abspos-containing-block-outside-scroller.html (1521B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { margin: 0; } 7 #scroller { overflow: scroll; width: 500px; height: 400px; } 8 #space { height: 1000px; } 9 #abs { 10 position: absolute; background-color: red; 11 width: 100px; height: 100px; 12 left: 25px; top: 25px; 13 } 14 #rel { 15 position: relative; background-color: green; 16 left: 50px; top: 100px; width: 100px; height: 75px; 17 } 18 19 </style> 20 <div id="scroller"> 21 <div id="space"> 22 <div id="abs"></div> 23 <div id="before"></div> 24 <div id="rel"></div> 25 </div> 26 </div> 27 <script> 28 29 // Tests that anchor node selection skips an absolute-positioned descendant of 30 // the scroller if and only if its containing block is outside the scroller. 31 32 test(() => { 33 var scroller = document.querySelector("#scroller"); 34 var abs = document.querySelector("#abs"); 35 var before = document.querySelector("#before"); 36 var rel = document.querySelector("#rel"); 37 38 // We should not anchor to #abs, because it does not move with the scroller. 39 scroller.scrollTop = 25; 40 before.style.height = "25px"; 41 assert_equals(scroller.scrollTop, 50); 42 43 // Reset, make #scroller a containing block. 44 before.style.height = "0"; 45 scroller.scrollTop = 0; 46 scroller.style.position = "relative"; 47 48 // This time we should anchor to #abs. 49 scroller.scrollTop = 25; 50 before.style.height = "25px"; 51 assert_equals(scroller.scrollTop, 25); 52 53 }, "Abs-pos descendant with containing block outside the scroller."); 54 55 </script>