text-box-trim-om-001.html (1843B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> 3 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @font-face { 8 font-family: test-font; 9 src: url(support/cap-x-height.ttf); 10 } 11 .spacer { 12 background: lightgray; 13 block-size: 100px; 14 } 15 #target { 16 font-family: test-font; 17 font-size: 100px; 18 line-height: 2; 19 text-box-trim: both; 20 text-box-edge: ex alphabetic; 21 } 22 </style> 23 <div id="container"> 24 <div class="spacer"></div> 25 <div id="target">A</div> 26 <div class="spacer"></div> 27 </div> 28 <script> 29 function run_tests(test_names) { 30 const container = document.getElementById('container'); 31 const container_bounds = container.getBoundingClientRect(); 32 const target = document.getElementById('target'); 33 const target_bounds = target.getBoundingClientRect(); 34 35 // Test `getBoundingClientRect()` returns the trimmed box size. 36 test(() => { 37 assert_equals(target_bounds.top - container_bounds.top, 100); 38 }, "getBoundingClientRect.top"); 39 test(() => { 40 assert_equals(target_bounds.height, 20); 41 }, "getBoundingClientRect.height"); 42 43 // Test `elementFromPoint()` hits `target` even if the point is above/below 44 // the client rect, because the inner line box overflows the box. 45 test(() => { 46 const result = document.elementFromPoint(10, 90 + container_bounds.top); 47 assert_equals(result, target); 48 }, "elementFromPoint: 10px above the client rect"); 49 test(() => { 50 const result = document.elementFromPoint(10, 130 + container_bounds.top); 51 assert_equals(result, target); 52 }, "elementFromPoint: 10px below the client rect"); 53 } 54 55 setup({explicit_done: true}); 56 document.fonts.ready.then(() => { 57 run_tests(); 58 done(); 59 }); 60 </script>