| 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 #content { | 9 #content { |
| 10 font: 14px Ahem, sans-serif; | 10 font: 14px Ahem, sans-serif; |
| 11 line-height: 16px; | 11 line-height: 16px; |
| 12 -webkit-flow-into: flow; | 12 -webkit-flow-into: flow; |
| 13 } | 13 } |
| 14 .region { | 14 .region { |
| 15 width: 300px; | 15 width: 300px; |
| 16 height: 300px; | 16 height: 300px; |
| 17 margin-top: 10px; | 17 margin-top: 10px; |
| 18 border: 1px solid black; | 18 border: 1px solid black; |
| 19 background-color: yellow; | 19 background-color: yellow; |
| 20 -webkit-flow-from: flow; | 20 -webkit-flow-from: flow; |
| 21 } | 21 } |
| 22 #region_with_shape_inside { | 22 #region_with_shape_inside { |
| 23 border: 1px solid black; | 23 border: 1px solid black; |
| 24 -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px); | 24 -webkit-shape-inside: rectangle(50px, 0px, 250px, 300px); |
| 25 overflow: hidden; |
| 25 background-color: orange; | 26 background-color: orange; |
| 26 } | 27 } |
| 27 </style> | 28 </style> |
| 28 </head> | 29 </head> |
| 29 <body> | 30 <body> |
| 30 | 31 |
| 31 <div class="region"></div> | 32 <div class="region"></div> |
| 32 <div id="region_with_shape_inside" class="region"></div> | 33 <div id="region_with_shape_inside" class="region"></div> |
| 33 | 34 |
| 34 <div id="content"> | 35 <div id="content"> |
| 35 <p>Despite the passage of time, Major Quilan still suffers grief and bereave
ment from the death of his wife, killed during the Chelgrian civil war that resu
lted from the Culture's interference. | 36 <p>Despite the passage of time, Major Quilan still suffers grief and bereave
ment from the death of his wife, killed during the Chelgrian civil war that resu
lted from the Culture's interference. |
| 36 <p>Quilan is offered the chance to avenge the lost Chelgrians who died
in the civil war and is inducted into a plot to strike back at the Culture.</p> | 37 <p>Quilan is offered the chance to avenge the lost Chelgrians who died
in the civil war and is inducted into a plot to strike back at the Culture.</p> |
| 37 <p>As part of the plot, his | 38 <p>As part of the plot, his |
| 38 <p>"soulkeeper"</p> | 39 <p>"soulkeeper"</p> |
| 39 (a device normally used to store its owner's personality upon their
death) is equipped with both the mind of a long-dead Chelgrian general and a dev
ice... | 40 (a device normally used to store its owner's personality upon their
death) is equipped with both the mind of a long-dead Chelgrian general and a dev
ice... |
| 40 </p> | 41 </p> |
| 41 </p> | 42 </p> |
| 42 </div> | 43 </div> |
| 43 | 44 |
| 44 <p>Requires Ahem font. The content - what contains multiple nested paragraphs -
flows into multiple regions, a shape-inside property is applied only on the seco
nd region. <br/> | 45 <p>Requires Ahem font. The content - what contains multiple nested paragraphs -
flows into multiple regions, a shape-inside property is applied only on the seco
nd region. <br/> |
| 45 The content should start at the top of the second region inside a 200px (width)
and 150px (height) rectangle - which has a 50px left offset - then flow into the
original container.</p> | 46 The content should start at the top of the second region inside a 200px (width)
and 150px (height) rectangle - which has a 50px left offset - then flow into the
original container.</p> |
| 46 <p>Bug <a href="http://webkit.org/b/112177">112177</a>: block children do not la
yout inline content correctly in a region with shape-inside set</p> | 47 <p>Bug <a href="http://webkit.org/b/112177">112177</a>: block children do not la
yout inline content correctly in a region with shape-inside set</p> |
| 47 | 48 |
| 48 </body> | 49 </body> |
| 49 </html> | 50 </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