trailing-space-position-001.html (1374B)
1 <!DOCTYPE html> 2 <title>CSS Test: Positions of trailing collapsible spaces</title> 3 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> 4 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .container > div { 10 font-family: Ahem; 11 font-size: 10px; 12 line-height: 1; 13 color: gray; 14 width: 5ch; 15 outline: 2px solid orange; 16 margin-bottom: 6px; 17 position: relative; 18 } 19 .pre-wrap { 20 white-space: pre-wrap; 21 } 22 .bg { background: purple; } 23 .h { outline: 4px red solid; } 24 </style> 25 <body> 26 <section class="container"> 27 <div>1234<span data-line="0" class="h"> </span>567</div> 28 <div>1234 <span data-line="0" class="h"> </span>567</div> 29 <div>1234567<span data-line="0" class="h"> </span>567</div> 30 <div>1234567 <span data-line="0" class="h"> </span>567</div> 31 <div class="pre-wrap">1234<span data-line="0" class="bg"> </span>567</div> 32 </section> 33 <script> 34 setup({ explicit_done: true }); 35 document.fonts.ready.then(() => { 36 for (let e of document.querySelectorAll('[data-line]')) { 37 test(() => { 38 let y = e.offsetTop; 39 assert_equals(Math.round(y / 10), parseInt(e.dataset.line)); 40 }); 41 } 42 done(); 43 }); 44 </script> 45 </body>