| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 #rectangles p { | |
| 6 width: 800px; | |
| 7 height: 40px; | |
| 8 line-height: 20px; | |
| 9 margin-top: 50px; | |
| 10 background-color: green; | |
| 11 } | |
| 12 | |
| 13 #shape-inside-circle-radius0 { | |
| 14 shape-inside: circle(0px at 0px 0px); | |
| 15 } | |
| 16 | |
| 17 #shape-inside-ellipse-radiusX0 { | |
| 18 shape-inside: ellipse(0px 1em at 0px 0px); | |
| 19 } | |
| 20 | |
| 21 #shape-inside-ellipse-radiusY0 { | |
| 22 shape-inside: ellipse(1em 0px at 0px 0px); | |
| 23 } | |
| 24 | |
| 25 #shape-inside-polygon-1vertex { | |
| 26 shape-inside: polygon(0px 0px); | |
| 27 } | |
| 28 | |
| 29 #shape-inside-polygon-2vertices { | |
| 30 shape-inside: polygon(0px 0px, 1em 0px); | |
| 31 } | |
| 32 </style> | |
| 33 </head> | |
| 34 <body> | |
| 35 <div id="rectangles"> | |
| 36 <p id="shape-inside-circle-radius0" style="margin-top: 0px;"> | |
| 37 This text should be pushed down below the green rectangle. (There is a c
ircle(0px at 0px 0px) shape-inside CSS property on the green rectangle.) | |
| 38 </p> | |
| 39 <p id="shape-inside-ellipse-radiusX0"> | |
| 40 This text should be pushed down below the green rectangle. (There is an
ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.) | |
| 41 </p> | |
| 42 <p id="shape-inside-ellipse-radiusY0"> | |
| 43 This text should be pushed down below the green rectangle. (There is an
ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.) | |
| 44 </p> | |
| 45 <p id="shape-inside-polygon-1vertex"> | |
| 46 This text should be pushed down below the green rectangle. (There is a p
olygon(0px 0px) shape-inside CSS property on the green rectangle.) | |
| 47 </p> | |
| 48 <p id="shape-inside-polygon-2vertices"> | |
| 49 This text should be pushed down below the green rectangle. (There is a po
lygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.) | |
| 50 </p> | |
| 51 </div> | |
| 52 <p style="margin-top: 50px;"> | |
| 53 A dimension of every shape-inside on this page is defined to 0. Based on the
CSS Exclusions specification: The 'shape-inside' property adds one or more excl
usion areas to the element's wrapping context. | |
| 54 This modifies the normal rectangular shape of the content area to a possibly
non-rectangular wrapping area. The exclusion areas are defined by subtracting t
he shape from the element's content area.<br/> | |
| 55 Every text on this page should be pushed down below its green rectangle. | |
| 56 </p> | |
| 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