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-margin .shape'); | 9 var el = document.querySelector('#add-shape-margin .shape'); |
10 el.className = 'shape margin50'; | 10 el.className = 'shape margin50'; |
(...skipping 13 matching lines...) Expand all Loading... |
24 border: 2px solid blue; | 24 border: 2px solid blue; |
25 font: 50px/1 Ahem, sans-serif; | 25 font: 50px/1 Ahem, sans-serif; |
26 color: green; | 26 color: green; |
27 overflow: hidden; | 27 overflow: hidden; |
28 } | 28 } |
29 .shape { | 29 .shape { |
30 float: left; | 30 float: left; |
31 position: relative; | 31 position: relative; |
32 width: 100px; | 32 width: 100px; |
33 height: 100px; | 33 height: 100px; |
34 -webkit-shape-outside: rectangle(0, 0, 0, 0); | 34 -webkit-shape-outside: inset(0 100% 100% 0); |
35 } | 35 } |
36 .shape::before { | 36 .shape::before { |
37 position: absolute; | 37 position: absolute; |
38 display: block; | 38 display: block; |
39 top: 0px; left: 0px; | 39 top: 0px; left: 0px; |
40 width: 0; | 40 width: 0; |
41 height: 0; | 41 height: 0; |
42 background-color: blue; | 42 background-color: blue; |
43 content: ' '; | 43 content: ' '; |
44 } | 44 } |
(...skipping 21 matching lines...) Expand all Loading... |
66 <p>Setting shape-margin with no prior entry</p> | 66 <p>Setting shape-margin with no prior entry</p> |
67 <div id='add-shape-margin' class='container'><div class='shape'></div>x x x
x x x x x x x</div> | 67 <div id='add-shape-margin' class='container'><div class='shape'></div>x x x
x x x x x x x</div> |
68 | 68 |
69 <p>Setting shape-margin with a prior entry</p> | 69 <p>Setting shape-margin with a prior entry</p> |
70 <div id='change-shape-margin' class='container'><div class='shape margin50'>
</div>x x x x x x x x x x</div> | 70 <div id='change-shape-margin' class='container'><div class='shape margin50'>
</div>x x x x x x x x x x</div> |
71 | 71 |
72 <p>Removing shape-margin with a prior entry</p> | 72 <p>Removing shape-margin with a prior entry</p> |
73 <div id='remove-shape-margin' class='container'><div class='shape margin50'>
</div>x x x x x x x x x x</div> | 73 <div id='remove-shape-margin' class='container'><div class='shape margin50'>
</div>x x x x x x x x x x</div> |
74 </body> | 74 </body> |
75 </html> | 75 </html> |
OLD | NEW |