| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 .region { | |
| 6 width: 100px; | |
| 7 height: 100px; | |
| 8 margin-top: 10px; | |
| 9 background-color: #CCD8D4; | |
| 10 -webkit-shape-inside: polygon(25px 0px, 100px 0px, 50px 100px); | |
| 11 } | |
| 12 | |
| 13 .content { | |
| 14 font: 20px/1 Ahem, sans-serif; | |
| 15 -webkit-flow-into: flow; | |
| 16 } | |
| 17 | |
| 18 .region { -webkit-flow-from: flow; } | |
| 19 </style> | |
| 20 </head> | |
| 21 | |
| 22 <body> | |
| 23 <div class="content">X X X X X X X X X X</div> | |
| 24 | |
| 25 <div class="page"> | |
| 26 <div class="region"></div> | |
| 27 <div class="region"></div> | |
| 28 </div> | |
| 29 <p style="margin-top: 40px;"> | |
| 30 Requires Ahem font. We have two regions, an up-side-down triangular shap
e is applied on the regions. | |
| 31 The content should flow from the first shape to the second shape. The ov
erflow should be pushed down below the content box. | |
| 32 </p> | |
| 33 <p>Issue <a href="https://code.google.com/p/chromium/issues/detail?id=333417
">333417</a>: [CSS Regions][CSS Shapes] ASSERTION FAILED: m_segmentRanges.size()
< m_segments.size()</p> | |
| 34 </body> | |
| 35 </html> | |
| OLD | NEW |