inline-static-position-001.html (1916B)
1 <!DOCTYPE html> 2 <title>CSS Test: Static positions and line wrapping</title> 3 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#static-position"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .tests, .no-tests { 11 margin-bottom: 1em; 12 font-family: Ahem; 13 font-size: 10px; 14 line-height: 1; 15 } 16 .tests > div, .no-tests > div { 17 position: relative; 18 width: 10ch; 19 border: 1px solid blue; 20 } 21 .abs { 22 position: absolute; 23 color: orange; 24 } 25 </style> 26 <body> 27 <section class="tests"> 28 <div>12345<span class="abs" data-offset-x="50" data-offset-y="0">span</span>54321</div> 29 <div>123456<span class="abs" data-offset-x="60" data-offset-y="0">span</span>654321</div> 30 <div>12345<span class="abs" data-offset-x="50" data-offset-y="0">span</span> 54321</div> 31 <div>12345 <span class="abs" data-offset-x="60" data-offset-y="0">span</span> 54321</div> 32 <div>12345 <span class="abs" data-offset-x="60" data-offset-y="0">span</span> 54321</div> 33 </section> 34 <section class="tests"> 35 <!-- offsetTop is interoperable but offsetLeft is not due to white space collapsing. --> 36 <div>12345 <span class="abs" data-offset-y="0">span</span> 54321</div> 37 </section> 38 <section class="no-tests"> 39 <!-- These tests are not interoperable. --> 40 <div>12345 <span class="abs">span</span>54321</div> 41 <div>12345 <span class="abs">span</span> 54321</div> 42 <div>123456789012 <span class="abs">span</span> 54321</div> 43 <div>123456789012 <span class="abs">span</span> 543210987654321</div> 44 </section> 45 <script> 46 document.fonts.ready.then(()=> { 47 checkLayout('.tests .abs'); 48 }); 49 </script> 50 </body>