zero-area-element-visible.html (1210B)
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 #target { 14 width: 0px; 15 height: 0px; 16 } 17 #container { 18 overflow: clip; 19 } 20 </style> 21 22 <div id="container"> 23 <div id='target'></div> 24 </div> 25 26 <script> 27 var entries = []; 28 29 runTestCycle(function() { 30 var target = document.getElementById('target'); 31 assert_true(!!target, "target exists"); 32 var observer = new IntersectionObserver(function(changes) { 33 entries = entries.concat(changes) 34 }); 35 observer.observe(target); 36 entries = entries.concat(observer.takeRecords()); 37 assert_equals(entries.length, 0, "No initial notifications."); 38 runTestCycle(step0, "First rAF should generate a notification."); 39 }, "Ensure that a zero-area target intersecting root generates a notification with intersectionRatio == 1"); 40 41 function step0() { 42 assert_equals(entries.length, 1, "One notification."); 43 assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio == 1"); 44 } 45 </script>