unclipped-root.html (1612B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 #root { 14 overflow: visible; 15 height: 200px; 16 width: 160px; 17 border: 7px solid black; 18 } 19 #target { 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 } 24 </style> 25 26 <div id="root"> 27 <div id="target" style="transform: translateY(300px)"></div> 28 </div> 29 30 <script> 31 var entries = []; 32 var target; 33 34 runTestCycle(function() { 35 target = document.getElementById("target"); 36 assert_true(!!target, "target exists"); 37 var root = document.getElementById("root"); 38 assert_true(!!root, "root exists"); 39 var observer = new IntersectionObserver(function(changes) { 40 entries = entries.concat(changes) 41 }, {root: root}); 42 observer.observe(target); 43 entries = entries.concat(observer.takeRecords()); 44 assert_equals(entries.length, 0, "No initial notifications."); 45 runTestCycle(step0, "First rAF."); 46 }, "Test that border bounding box is used to calculate intersection with a non-scrolling root."); 47 48 function step0() { 49 target.style.transform = "translateY(195px)"; 50 runTestCycle(step1, "target.style.transform = 'translateY(195px)'"); 51 checkLastEntry(entries, 0, [15, 115, 315, 415, 0, 0, 0, 0, 8, 182, 8, 222, false]); 52 } 53 54 function step1() { 55 target.style.transform = ""; 56 checkLastEntry(entries, 1, [15, 115, 210, 310, 15, 115, 210, 222, 8, 182, 8, 222, true]); 57 } 58 </script>