OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>CSS Test: stacked floats with shape-outside</title> | 2 <title>CSS Test: stacked floats with shape-outside</title> |
3 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> | 3 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> |
4 <link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-mod
el-and-float-behavior"> | 4 <link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-mod
el-and-float-behavior"> |
5 <link rel="match" href="shape-outside-floats-stacked-000-ref.html"> | 5 <link rel="match" href="shape-outside-floats-stacked-000-ref.html"> |
6 <meta name="flags" content="ahem"> | 6 <meta name="flags" content="ahem"> |
7 <style> | 7 <style> |
8 .container { | 8 .container { |
9 width: 300px; | 9 width: 300px; |
10 height: 100px; | 10 height: 100px; |
11 font: 50px/1 Ahem, sans-serif; | 11 font: 50px/1 Ahem, sans-serif; |
12 line-height: 50px; | 12 line-height: 50px; |
13 background-color: red; | 13 background-color: red; |
14 margin-bottom: 50px; | 14 margin-bottom: 50px; |
15 overflow: hidden; | 15 overflow: hidden; |
| 16 color: green; |
16 } | 17 } |
17 .float-left { | 18 .float-left { |
18 width: 100px; | 19 width: 100px; |
19 height: 100px; | 20 height: 100px; |
20 float: left; | 21 float: left; |
21 background-color: green; | 22 background-color: green; |
22 } | 23 } |
23 .triangle-left { | 24 .triangle-left { |
24 -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); | 25 -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); |
25 } | 26 } |
(...skipping 21 matching lines...) Expand all Loading... |
47 X<br/> | 48 X<br/> |
48 <div class="float-left circle"></div> | 49 <div class="float-left circle"></div> |
49 </div> | 50 </div> |
50 <div style="text-align: right" class="container"> | 51 <div style="text-align: right" class="container"> |
51 <div class="float-right triangle-right"></div> | 52 <div class="float-right triangle-right"></div> |
52 <div class="float-left triangle-left"></div> | 53 <div class="float-left triangle-left"></div> |
53 X<br/> | 54 X<br/> |
54 <div class="float-right circle"></div> | 55 <div class="float-right circle"></div> |
55 </div> | 56 </div> |
56 </body> | 57 </body> |
OLD | NEW |