| <!doctype html> |
| |
| <style> |
| html { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| |
| .content { |
| width: 200px; |
| font: 16px Ahem; |
| -webkit-font-smoothing: none; |
| } |
| |
| #region1, #region2 { |
| border: 1px solid black; |
| margin: 50px; |
| float: left; |
| } |
| |
| #region1 { |
| width: 200px; |
| height: 90px; |
| } |
| |
| #region2 { |
| width: 250px; |
| height: 100px; |
| } |
| |
| .positioned { |
| position: relative; |
| top: 30px; |
| left: 30px; |
| } |
| |
| .split { |
| height: 5px; |
| width: 50px; |
| background-color: green; |
| } |
| </style> |
| |
| <a href="https://bugs.webkit.org/show_bug.cgi?id=125291">[CSS Regions] Implement visual overflow computation for inline elements</a> |
| <p>The paragraph inside the regions must be fragmented. Each fragment must be relatively positioned based on the fragment position.</p> |
| |
| <div id="container"> |
| <div id="region1"><div class="content"><span class="positioned"><span id="positioned">AXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <span>Ne<span>sted<div class="split"></div></span></span></span></div></div> |
| <div id="region2"><div class="content"><span class="positioned"><span>SPANS</br></span> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXB</div></div> |
| </div> |
