getClientRects-inline-inline-child.html (1651B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getclientrects"> 3 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 <div> 8 <span>test</span> 9 <span id="vertical-align-sub-as-grand-child" 10 title="sub element in a child inline box should not be included"> 11 <span> 12 <sub class="not-include" style="vertical-align: sub">subscript</sub> 13 </span> 14 </span> 15 <span>test</span> 16 </div> 17 <script> 18 testTargetDoesNotInclude('vertical-align-sub-as-grand-child'); 19 20 function testTargetDoesNotInclude(target) { 21 target = document.getElementById(target); 22 test(() => { 23 let target_rects = target.getClientRects(); 24 25 let not_include_rects = []; 26 for (let element of target.querySelectorAll('.not-include')) { 27 for (let rect of element.getClientRects()) 28 not_include_rects.push(rect); 29 } 30 for (let rect of target_rects) { 31 for (let not_include_rect of not_include_rects) { 32 assert_rect_not_equals(rect, not_include_rect); 33 } 34 } 35 }, target.title); 36 } 37 38 function assert_rect_not_equals(rect1, rect2) { 39 assert_false(rectEquals(rect1, rect2), 40 `${rectToString(rect1)} and ${rectToString(rect2)} are not equal`); 41 } 42 43 function rectEquals(rect1, rect2) { 44 return rect1.x === rect2.x && rect1.y === rect2.y && 45 rect1.width === rect2.width && rect1.height === rect2.height; 46 } 47 48 function rectToString(rect) { 49 return `{${rect.x}, ${rect.y} ${rect.width}x${rect.height}}`; 50 } 51 </script> 52 </body>