offsetTop-offsetLeft-across-shadow-boundaries.html (2093B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 .box { 8 width: 10px; 9 height: 10px; 10 } 11 </style> 12 13 <div> 14 <template shadowrootmode=open> 15 <style> 16 .box { 17 width: 10px; 18 height: 10px; 19 } 20 </style> 21 <div class=box></div> 22 <div style="position: relative"> 23 <div class=box></div> 24 <slot></slot> 25 </div> 26 </template> 27 <div class=box></div> 28 <div id=target1 style="position: absolute" class=box></div> 29 </div> 30 31 <span> 32 <template shadowrootmode=open> 33 <style> 34 .box { 35 width: 10px; 36 height: 10px; 37 } 38 </style> 39 <span class=box></span> 40 <span style="position: relative"> 41 <span class=box></span> 42 <slot></slot> 43 </span> 44 </template> 45 <span class=box></span> 46 <span id=target2 style="position: absolute" class=box></span> 47 </span> 48 49 <div> 50 <template shadowrootmode=open> 51 <style> 52 .box { 53 width: 10px; 54 height: 10px; 55 } 56 </style> 57 <div class=box></div> 58 <div style="position: relative"> 59 <div class=box></div> 60 <div> 61 <template shadowrootmode=open> 62 <style> 63 .box { 64 width: 10px; 65 height: 10px; 66 } 67 </style> 68 <div class=box></div> 69 <div style="position: relative"> 70 <div class=box></div> 71 <slot></slot> 72 </div> 73 </template> 74 <slot></slot> 75 </div> 76 </div> 77 </template> 78 <div class=box></div> 79 <div id=target3 style="position: absolute" class=box></div> 80 </div> 81 82 <script> 83 test(() => { 84 assert_equals(target1.offsetTop, 38); 85 }, 'Verifies that HTMLElement.offsetTop accounts for shadow boundaries.'); 86 87 test(() => { 88 assert_equals(target2.offsetLeft, 8); 89 }, 'Verifies that HTMLElement.offsetLeft accounts for shadow boundaries.'); 90 91 test(() => { 92 assert_equals(target3.offsetTop, 88); 93 }, 'Verifies that HTMLElement.offsetTop accounts for shadow boundaries when nested in multiple shadow roots.'); 94 </script>