| <!doctype html> |
| |
| <style> |
| |
| @font-face { |
| font-family: webkit-ahem; |
| font-style: normal; |
| src: url(../../resources/Ahem.ttf); |
| } |
| |
| #test-goals, #test, #test2{ |
| font-family: webkit-ahem; |
| } |
| |
| #content { |
| -webkit-flow-into: flow1; |
| padding: 5px; |
| } |
| |
| #first-box { |
| border: 1px solid blue; |
| } |
| |
| #second-box { |
| margin:7px; |
| border: 1px solid green; |
| } |
| |
| #region1, #region2, #region3 { |
| border: 1px solid black; |
| -webkit-flow-from: flow1; |
| } |
| |
| #region1 { |
| width: 15em; |
| height: 55px; |
| } |
| |
| #region2 { |
| width: 35em; |
| height: 45px; |
| } |
| |
| #region3 { |
| width: 10em; |
| height: 55px; |
| } |
| </style> |
| |
| <div id="topLevel"> |
| <span id="test-goals">Text should flow through all three regions and not spill outside of the border</span> |
| </div> |
| <div id="content"> |
| <div id="first-box"> |
| <div id="second-box"> |
| <span id="test">mnopq mnopq mnopq mnopq </span> <span id="test2"> mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mno mno mno mno mno mno mno mno</span> |
| </div> |
| </div> |
| </div> |
| |
| <div id="container"> |
| <div id="region1"></div> |
| <div id="region2"></div> |
| <div id="region3"></div> |
| </div> |
| |
| <script> |
| document.body.offsetWidth; |
| document.getElementById('test').appendChild(document.createTextNode("qponmqponm ")); |
| </script> |
