| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #rectangles p { | 5 #rectangles p { |
| 6 width: 800px; | 6 width: 800px; |
| 7 height: 40px; | 7 height: 40px; |
| 8 line-height: 20px; | 8 line-height: 20px; |
| 9 margin-top: 50px; | 9 margin-top: 50px; |
| 10 background-color: green; | 10 background-color: green; |
| 11 } | 11 } |
| 12 | 12 |
| 13 #shape-inside-rectangle-width0 { | 13 #shape-inside-rectangle-width0 { |
| 14 shape-inside: rectangle(0px, 0px, 0px, 1em); | 14 shape-inside: rectangle(0px, 0px, 0px, 1em); |
| 15 } | 15 } |
| 16 | 16 |
| 17 #shape-inside-rectangle-height0 { | 17 #shape-inside-rectangle-height0 { |
| 18 shape-inside: rectangle(0px, 0px, 1em, 0px); | 18 shape-inside: rectangle(0px, 0px, 1em, 0px); |
| 19 } | 19 } |
| 20 | 20 |
| 21 #shape-inside-circle-radius0 { | 21 #shape-inside-circle-radius0 { |
| 22 shape-inside: circle(0px at 0px 0px); | 22 shape-inside: circle(0px at 0px 0px); |
| 23 } | 23 } |
| 24 | 24 |
| 25 #shape-inside-ellipse-radiusX0 { | 25 #shape-inside-ellipse-radiusX0 { |
| 26 shape-inside: ellipse(0px, 0px, 0px, 1em); | 26 shape-inside: ellipse(0px 1em at 0px 0px); |
| 27 } | 27 } |
| 28 | 28 |
| 29 #shape-inside-ellipse-radiusY0 { | 29 #shape-inside-ellipse-radiusY0 { |
| 30 shape-inside: ellipse(0px, 0px, 1em, 0px); | 30 shape-inside: ellipse(1em 0px at 0px 0px); |
| 31 } | 31 } |
| 32 | 32 |
| 33 #shape-inside-polygon-1vertex { | 33 #shape-inside-polygon-1vertex { |
| 34 shape-inside: polygon(0px 0px); | 34 shape-inside: polygon(0px 0px); |
| 35 } | 35 } |
| 36 | 36 |
| 37 #shape-inside-polygon-2vertices { | 37 #shape-inside-polygon-2vertices { |
| 38 shape-inside: polygon(0px 0px, 1em 0px); | 38 shape-inside: polygon(0px 0px, 1em 0px); |
| 39 } | 39 } |
| 40 </style> | 40 </style> |
| 41 </head> | 41 </head> |
| 42 <body> | 42 <body> |
| 43 <div id="rectangles"> | 43 <div id="rectangles"> |
| 44 <p id="shape-inside-rectangle-width0" style="margin-top: 0px;"> | 44 <p id="shape-inside-rectangle-width0" style="margin-top: 0px;"> |
| 45 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.) | 45 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.) |
| 46 </p> | 46 </p> |
| 47 <p id="shape-inside-rectangle-height0"> | 47 <p id="shape-inside-rectangle-height0"> |
| 48 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.) | 48 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.) |
| 49 </p> | 49 </p> |
| 50 <p id="shape-inside-circle-radius0"> | 50 <p id="shape-inside-circle-radius0"> |
| 51 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.) | 51 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.) |
| 52 </p> | 52 </p> |
| 53 <p id="shape-inside-ellipse-radiusX0"> | 53 <p id="shape-inside-ellipse-radiusX0"> |
| 54 This text should be pushed down below the green rectangle. (There is an
ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.) | 54 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.) |
| 55 </p> | 55 </p> |
| 56 <p id="shape-inside-ellipse-radiusY0"> | 56 <p id="shape-inside-ellipse-radiusY0"> |
| 57 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.) | 57 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.) |
| 58 </p> | 58 </p> |
| 59 <p id="shape-inside-polygon-1vertex"> | 59 <p id="shape-inside-polygon-1vertex"> |
| 60 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.) | 60 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.) |
| 61 </p> | 61 </p> |
| 62 <p id="shape-inside-polygon-2vertices"> | 62 <p id="shape-inside-polygon-2vertices"> |
| 63 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.) | 63 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.) |
| 64 </p> | 64 </p> |
| 65 </div> | 65 </div> |
| 66 <p style="margin-top: 50px;"> | 66 <p style="margin-top: 50px;"> |
| 67 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. | 67 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. |
| 68 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/> | 68 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/> |
| 69 Every text on this page should be pushed down below its green rectangle. | 69 Every text on this page should be pushed down below its green rectangle. |
| 70 </p> | 70 </p> |
| 71 </body> | 71 </body> |
| 72 </html> | 72 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 124303002:
Layout support for new ellipse shape syntax (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master