| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 .container { | |
| 6 position: relative; | |
| 7 width: 200px; | |
| 8 height: 200px; | |
| 9 overflow-wrap: break-word; | |
| 10 border: 2px solid blue; | |
| 11 font: 40px/1 Ahem, sans-serif; | |
| 12 color: green; | |
| 13 } | |
| 14 .container.shape { | |
| 15 border-color: white; | |
| 16 } | |
| 17 .shape::before { | |
| 18 position: absolute; | |
| 19 display: block; | |
| 20 top: 8px; left: 8px; | |
| 21 width: 180px; | |
| 22 height: 180px; | |
| 23 border: 2px solid blue; | |
| 24 content: ' '; | |
| 25 } | |
| 26 .inside { | |
| 27 shape-inside: rectangle(10px, 10px, 180px, 180px); | |
| 28 } | |
| 29 .outside { | |
| 30 shape-outside: rectangle(10px, 10px, 180px, 180px); | |
| 31 } | |
| 32 </style> | |
| 33 </head> | |
| 34 <body> | |
| 35 <p>This test ensures layout properly respects shape-inside when it is set/un
set, or when shape-outside is set/unset for a value of "outside-shape". The test
requires the Ahem font, and in each case the green squares should be contained
by a blue outline.</p> | |
| 36 | |
| 37 <p>Setting shape-inside with no prior entry</p> | |
| 38 <div id='set-inside-shape' class='container shape inside'><div><div>xxxxxxxx
xx</div></div></div> | |
| 39 | |
| 40 <p>Setting shape-inside with a prior entry</p> | |
| 41 <div id='reset-inside-shape' class='container shape inside'><div><div>xxxxxx
xxxx</div></div></div> | |
| 42 | |
| 43 <p>Removing shape-inside with a prior entry</p> | |
| 44 <div id='remove-inside-shape' class='container'><div><div>xxxxxxxxxx</div></
div></div> | |
| 45 | |
| 46 <p>Removing a nested shape-inside</p> | |
| 47 <div class='container shape inside'><div id='remove-nested-inside-shape'><di
v>xxxxxxxxxx</div></div></div> | |
| 48 | |
| 49 <p>Setting outside-shape with no prior entry</p> | |
| 50 <div id='set-outside-shape' class='container shape outside'><div><div>xxxxxx
xxxx</div></div></div> | |
| 51 | |
| 52 <p>Setting outside-shape with a prior entry</p> | |
| 53 <div id='reset-outside-shape' class='container shape outside'><div><div>xxxx
xxxxxx</div></div></div> | |
| 54 | |
| 55 <p>Removing shape-outside with a prior entry</p> | |
| 56 <div id='remove-outside-shape' class='container'><div><div>xxxxxxxxxx</div><
/div></div> | |
| 57 </body> | |
| 58 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 209443007:
Remove shape-inside support (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master