| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script> | |
| 5 if (window.internals) | |
| 6 window.internals.settings.setCSSExclusionsEnabled(true); | |
| 7 </script> | |
| 8 <style> | 4 <style> |
| 9 .shape-inside { | 5 #rectangles div { |
| 10 width: 800px; | 6 width: 800px; |
| 11 height: 2em; | 7 height: 40px; |
| 8 line-height: 20px; |
| 9 margin-top: 50px; |
| 12 border: solid green; | 10 border: solid green; |
| 13 box-sizing: border-box; | 11 box-sizing: border-box; |
| 14 } | 12 } |
| 15 .padded { | 13 #rectangles p { margin-top: 34px; } |
| 16 padding-top: 1em; | |
| 17 } | |
| 18 </style> | 14 </style> |
| 19 </head> | 15 </head> |
| 20 <body> | 16 <body> |
| 21 <p class="shape-inside padded"> | 17 <div id="rectangles"> |
| 22 This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em
) shape-inside CSS property. | 18 <div style="margin-top: 0px;"> |
| 23 </p> | 19 <p>This text should be pushed down below the green rectangle. (There is
a rectangle(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle
.)</p> |
| 24 <p class="shape-inside"> | 20 </div> |
| 25 This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) s
hape-inside CSS property. | 21 <div> |
| 26 </p> | 22 <p>This text should be pushed down below the green rectangle. (There is
a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle
.)</p> |
| 27 <p class="shape-inside"> | 23 </div> |
| 28 This text should be unconstrained by the circle(0px, 0px, 0px) shape-ins
ide CSS property. | 24 <div> |
| 29 </p> | 25 <p>This text should be pushed down below the green rectangle. (There is
a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)</p> |
| 30 <p class="shape-inside padded"> | 26 </div> |
| 31 This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em
) shape-inside CSS property. | 27 <div> |
| 32 </p> | 28 <p>This text should be pushed down below the green rectangle. (There is
an ellipseX0(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangl
e.)</p> |
| 33 <p class="shape-inside"> | 29 </div> |
| 34 This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) sha
pe-inside CSS property. | 30 <div> |
| 35 </p> | 31 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.
)</p> |
| 36 <p class="shape-inside"> | 32 </div> |
| 37 This text should be unconstrained by the polygon(0px 0px) shape-inside C
SS property. | 33 <div> |
| 38 </p> | 34 <p>This text should be pushed down below the green rectangle. (There is
a polygon(0px 0px) shape-inside CSS property on the green rectangle.)</p> |
| 39 <p class="shape-inside"> | 35 </div> |
| 40 This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape
-inside CSS property. | 36 <div> |
| 41 </p> | 37 <p>This text should be pushed down below the green rectangle. (There is a
polygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.)</p
> |
| 38 </div> |
| 39 </div> |
| 40 |
| 41 <p style="margin-top: 50px;"> |
| 42 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. |
| 43 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/> |
| 44 Every text on this page should be pushed down below its green rectangle. |
| 45 </p> |
| 42 </body> | 46 </body> |
| 43 </html> | 47 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 19865002:
[CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master