bounding-box.html (2584B)
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: 8px solid black; 18 } 19 #target { 20 margin: 10px; 21 width: 100px; 22 height: 100px; 23 padding: 10px; 24 background-color: green; 25 } 26 </style> 27 28 <div id="root"> 29 <div id="target" style="transform: translateY(300px)"></div> 30 </div> 31 32 <script> 33 var entries = []; 34 var target; 35 36 runTestCycle(function() { 37 target = document.getElementById("target"); 38 assert_true(!!target, "target exists"); 39 var root = document.getElementById("root"); 40 assert_true(!!root, "root exists"); 41 var observer = new IntersectionObserver(function(changes) { 42 entries = entries.concat(changes) 43 }, {root: root}); 44 observer.observe(target); 45 entries = entries.concat(observer.takeRecords()); 46 assert_equals(entries.length, 0, "No initial notifications."); 47 runTestCycle(step0, "First rAF."); 48 }, "Test that the target's border bounding box is used to calculate intersection."); 49 50 function step0() { 51 var targetBounds = clientBounds(target); 52 target.style.transform = "translateY(195px)"; 53 runTestCycle(step1, "target.style.transform = 'translateY(195px)'"); 54 checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, 8, 184, 8, 224, false)); 55 } 56 57 function step1() { 58 var targetBounds = clientBounds(target); 59 target.style.transform = "translateY(300px)"; 60 runTestCycle(step2, "target.style.transform = 'translateY(300px)'"); 61 checkLastEntry(entries, 1, targetBounds.concat(26, 146, 221, 224, 8, 184, 8, 224, true)); 62 } 63 64 function step2() { 65 var targetBounds = clientBounds(target); 66 target.style.transform = ""; 67 target.style.zoom = "2"; 68 runTestCycle(step3, "target.style.zoom = 2"); 69 checkLastEntry(entries, 2, targetBounds.concat(0, 0, 0, 0, 8, 184, 8, 224, false)); 70 } 71 72 function step3() { 73 var targetBounds = clientBounds(target); 74 var intersectionWidth = ( 75 176 // root width including border 76 -8 // root left border 77 -20 // target left margin * target zoom 78 ) 79 var intersectionHeight = (216 - 8 - 20); 80 var intersectionRect = [targetBounds[0], targetBounds[0] + intersectionWidth, 81 targetBounds[2], targetBounds[2] + intersectionHeight]; 82 checkLastEntry(entries, 3, targetBounds.concat(intersectionRect).concat(8, 184, 8, 224, true)); 83 } 84 85 </script>