initial-observation-with-threshold.html (1549B)
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 .spacer { 14 height: calc(100vh + 100px); 15 } 16 #root { 17 display: inline-block; 18 overflow-y: scroll; 19 height: 240px; 20 border: 3px solid black; 21 } 22 #target { 23 width: 100px; 24 height: 100px; 25 margin: 200px 0 0 0; 26 background-color: green; 27 } 28 </style> 29 30 <div id="root"> 31 <div id="target"></div> 32 </div> 33 34 <script> 35 var entries = []; 36 var root, target; 37 38 runTestCycle(function() { 39 target = document.getElementById("target"); 40 assert_true(!!target, "target exists"); 41 root = document.getElementById("root"); 42 assert_true(!!root, "root exists"); 43 var observer = new IntersectionObserver(function(changes) { 44 entries = entries.concat(changes) 45 }, { root: root, threshold: [0.5] }); 46 observer.observe(target); 47 entries = entries.concat(observer.takeRecords()); 48 assert_equals(entries.length, 0, "No initial notifications."); 49 runTestCycle(step0, "First rAF"); 50 }, "First observation with a threshold."); 51 52 function step0() { 53 root.scrollTop = 20; 54 runTestCycle(step1, "root.scrollTop = 20"); 55 checkLastEntry(entries, 0, [ 11, 111, 211, 311, 11, 111, 211, 251, 11, 111, 11, 251, false]); 56 } 57 58 function step1() { 59 checkLastEntry(entries, 1, [ 11, 111, 191, 291, 11, 111, 191, 251, 11, 111, 11, 251, true]); 60 } 61 </script>