| 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 .region { | 5 .region { |
| 10 font: 14px Ahem, sans-serif; | 6 font: 14px Ahem, sans-serif; |
| 11 line-height: 16px; | 7 line-height: 16px; |
| 12 width: 300px; | 8 width: 300px; |
| 13 height: 300px; | 9 height: 300px; |
| 14 margin-top: 10px; | 10 margin-top: 10px; |
| 15 border: 1px solid black; | 11 border: 1px solid black; |
| 16 background-color: yellow; | 12 background-color: yellow; |
| 17 } | 13 } |
| 18 #region_with_shape_inside { | 14 #region_with_shape_inside { |
| 19 border: 1px solid black; | 15 border: 1px solid black; |
| 20 -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px); | 16 overflow: hidden; |
| 21 background-color: orange; | 17 background-color: orange; |
| 22 } | 18 } |
| 19 #placeholder { |
| 20 float: left; |
| 21 width: 50px; |
| 22 height: 300px; |
| 23 } |
| 23 </style> | 24 </style> |
| 24 </head> | 25 </head> |
| 25 <body> | 26 <body> |
| 26 | 27 |
| 27 <div class="region"> | 28 <div class="region"> |
| 28 <p>Despite the passage of time, Major Quilan still suffers grief and berea
vement from the death of his wife, killed during the Chelgrian civil war that re
sulted from the Culture's interference. <p>Quilan is offered the chance to aveng
e the lost Chelgrians who died in the civil war and is inducted into a plot to
strike back | 29 <p>Despite the passage of time, Major Quilan still suffers grief and berea
vement from the death of his wife, killed during the Chelgrian civil war that re
sulted from the Culture's interference. <p>Quilan is offered the chance to aveng
e the lost Chelgrians who died in the civil war and is inducted into a plot to s
trike back at the Culture.</p> |
| 29 </div> | 30 </div> |
| 30 <div id="region_with_shape_inside" class="region"> | 31 <div id="region_with_shape_inside" class="region"> |
| 31 at the Culture.</p>As part of the plot, his <p>"soulkeeper"</p> (a device normal
ly used to store its owner's personality upon their death) is equipped with both
the mind of a long-dead Chelgrian general and a device... | 32 <div id="placeholder"></div> |
| 33 <p>As part of the plot, his <p>"soulkeeper"</p> (a device normally used to s
tore its owner's personality upon their death) is equipped with both the mind of
a long-dead Chelgrian general and a device... |
| 32 </div> | 34 </div> |
| 33 | 35 |
| 34 <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/> | 36 <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/> |
| 35 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> | 37 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> |
| 36 <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> | 38 <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> |
| 37 | 39 |
| 38 </body> | 40 </body> |
| 39 </html> | 41 </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