| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script> | 4 <script> |
| 5 if (window.internals) | 5 if (window.internals) |
| 6 window.internals.settings.setCSSExclusionsEnabled(true); | 6 window.internals.settings.setCSSExclusionsEnabled(true); |
| 7 </script> | 7 </script> |
| 8 <style> | 8 <style> |
| 9 .shape-inside { | 9 #rectangles p { |
| 10 width: 800px; | 10 width: 800px; |
| 11 height: 2em; | 11 height: 40px; |
| 12 line-height: 20px; |
| 13 margin-top: 50px; |
| 12 border: solid green; | 14 border: solid green; |
| 13 box-sizing: border-box; | 15 box-sizing: border-box; |
| 14 } | 16 } |
| 15 | 17 |
| 16 #shape-inside-rectangle-width0 { | 18 #shape-inside-rectangle-width0 { |
| 17 -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em); | 19 -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em); |
| 18 padding-top: 1em; | |
| 19 } | 20 } |
| 20 | 21 |
| 21 #shape-inside-rectangle-height0 { | 22 #shape-inside-rectangle-height0 { |
| 22 -webkit-shape-inside: rectangle(0px, 0px, 1em, 0px); | 23 -webkit-shape-inside: rectangle(0px, 0px, 1em, 0px); |
| 23 } | 24 } |
| 24 | 25 |
| 25 #shape-inside-circle-radius0 { | 26 #shape-inside-circle-radius0 { |
| 26 -webkit-shape-inside: circle(0px, 0px, 0px); | 27 -webkit-shape-inside: circle(0px, 0px, 0px); |
| 27 } | 28 } |
| 28 | 29 |
| 29 #shape-inside-ellipse-radiusX0 { | 30 #shape-inside-ellipse-radiusX0 { |
| 30 -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em); | 31 -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em); |
| 31 padding-top: 1em; | |
| 32 } | 32 } |
| 33 | 33 |
| 34 #shape-inside-ellipse-radiusY0 { | 34 #shape-inside-ellipse-radiusY0 { |
| 35 -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px); | 35 -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px); |
| 36 } | 36 } |
| 37 | 37 |
| 38 #shape-inside-polygon-1vertex { | 38 #shape-inside-polygon-1vertex { |
| 39 -webkit-shape-inside: polygon(0px 0px); | 39 -webkit-shape-inside: polygon(0px 0px); |
| 40 } | 40 } |
| 41 | 41 |
| 42 #shape-inside-polygon-2vertices { | 42 #shape-inside-polygon-2vertices { |
| 43 -webkit-shape-inside: polygon(0px 0px, 1em 0px); | 43 -webkit-shape-inside: polygon(0px 0px, 1em 0px); |
| 44 } | 44 } |
| 45 </style> | 45 </style> |
| 46 </head> | 46 </head> |
| 47 <body> | 47 <body> |
| 48 <p class="shape-inside" id="shape-inside-rectangle-width0"> | 48 <div id="rectangles"> |
| 49 This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em
) shape-inside CSS property. | 49 <p id="shape-inside-rectangle-width0" style="margin-top: 0px;"> |
| 50 This text should be pushed down below the green rectangle. (There is a r
ectangle(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.) |
| 50 </p> | 51 </p> |
| 51 <p class="shape-inside" id="shape-inside-rectangle-height0"> | 52 <p id="shape-inside-rectangle-height0"> |
| 52 This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) s
hape-inside CSS property. | 53 This text should be pushed down below the green rectangle. (There is a r
ectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.) |
| 53 </p> | 54 </p> |
| 54 <p class="shape-inside" id="shape-inside-circle-radius0"> | 55 <p id="shape-inside-circle-radius0"> |
| 55 This text should be unconstrained by the circle(0px, 0px, 0px) shape-ins
ide CSS property. | 56 This text should be pushed down below the green rectangle. (There is a c
ircle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.) |
| 56 </p> | 57 </p> |
| 57 <p class="shape-inside" id="shape-inside-ellipse-radiusX0"> | 58 <p id="shape-inside-ellipse-radiusX0"> |
| 58 This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em
) shape-inside CSS property. | 59 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 rectangle.) |
| 59 </p> | 60 </p> |
| 60 <p class="shape-inside" id="shape-inside-ellipse-radiusY0"> | 61 <p id="shape-inside-ellipse-radiusY0"> |
| 61 This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) sha
pe-inside CSS property. | 62 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.) |
| 62 </p> | 63 </p> |
| 63 <p class="shape-inside" id="shape-inside-polygon-1vertex"> | 64 <p id="shape-inside-polygon-1vertex"> |
| 64 This text should be unconstrained by the polygon(0px 0px) shape-inside C
SS property. | 65 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.) |
| 65 </p> | 66 </p> |
| 66 <p class="shape-inside" id="shape-inside-polygon-2vertices"> | 67 <p id="shape-inside-polygon-2vertices"> |
| 67 This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape
-inside CSS property. | 68 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.) |
| 68 </p> | 69 </p> |
| 70 </div> |
| 71 <p style="margin-top: 50px;"> |
| 72 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. |
| 73 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/> |
| 74 Every text on this page should be pushed down below its green rectangle. |
| 75 </p> |
| 69 </body> | 76 </body> |
| 70 </html> | 77 </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