OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 window.onload = function() { | 5 window.onload = function() { |
6 // fetch offsetTop to force a layout | 6 // fetch offsetTop to force a layout |
7 document.body.offsetTop; | 7 document.body.offsetTop; |
8 | 8 |
9 var el = document.querySelector('#add-shape-outside .shape'); | 9 var el = document.querySelector('#add-shape-outside .shape'); |
10 el.className = 'shape rectangle50'; | 10 el.className = 'shape rectangle50'; |
(...skipping 25 matching lines...) Expand all Loading... |
36 position: absolute; | 36 position: absolute; |
37 display: block; | 37 display: block; |
38 top: 0px; left: 0px; | 38 top: 0px; left: 0px; |
39 width: 100%; | 39 width: 100%; |
40 height: 100%; | 40 height: 100%; |
41 background-color: blue; | 41 background-color: blue; |
42 content: ' '; | 42 content: ' '; |
43 } | 43 } |
44 | 44 |
45 .rectangle50 { | 45 .rectangle50 { |
46 shape-outside: rectangle(0, 0, 50px, 50px); | 46 shape-outside: polygon(0px 0px, 50px 0px, 50px 50px, 0px 50px); |
47 } | 47 } |
48 .rectangle50::before { | 48 .rectangle50::before { |
49 width: 50px; | 49 width: 50px; |
50 height: 50px; | 50 height: 50px; |
51 } | 51 } |
52 | 52 |
53 .rectangle25 { | 53 .rectangle25 { |
54 shape-outside: rectangle(0, 0, 25px, 25px); | 54 shape-outside: polygon(0px 0px, 25px 0px, 25px 25px, 0px 25px); |
55 } | 55 } |
56 .rectangle25::before { | 56 .rectangle25::before { |
57 width: 25px; | 57 width: 25px; |
58 height: 25px; | 58 height: 25px; |
59 } | 59 } |
60 </style> | 60 </style> |
61 </head> | 61 </head> |
62 <body> | 62 <body> |
63 <p>When shape-outside is modified dynamically, content affected by the shape
's contour should relayout. For each test, you should see green blocks separated
by white space, wrapping around a blue square in the upper left. This test requ
ires the Ahem font.</p> | 63 <p>When shape-outside is modified dynamically, content affected by the shape
's contour should relayout. For each test, you should see green blocks separated
by white space, wrapping around a blue square in the upper left. This test requ
ires the Ahem font.</p> |
64 | 64 |
65 <p>Setting shape-outside with no prior entry</p> | 65 <p>Setting shape-outside with no prior entry</p> |
66 <div id='add-shape-outside' class='container'><div class='shape'></div>x x x
x x x x x x x</div> | 66 <div id='add-shape-outside' class='container'><div class='shape'></div>x x x
x x x x x x x</div> |
67 | 67 |
68 <p>Setting shape-outside with a prior entry</p> | 68 <p>Setting shape-outside with a prior entry</p> |
69 <div id='change-shape-outside' class='container'><div class='shape rectangle
50'></div>x x x x x x x x x x</div> | 69 <div id='change-shape-outside' class='container'><div class='shape rectangle
50'></div>x x x x x x x x x x</div> |
70 | 70 |
71 <p>Removing shape-outside with a prior entry</p> | 71 <p>Removing shape-outside with a prior entry</p> |
72 <div id='remove-shape-outside' class='container'><div class='shape rectangle
50'></div>x x x x x x x x x x</div> | 72 <div id='remove-shape-outside' class='container'><div class='shape rectangle
50'></div>x x x x x x x x x x</div> |
73 </body> | 73 </body> |
74 </html> | 74 </html> |
OLD | NEW |