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