animated-occlusion.html (1927B)
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 body, html { 9 margin: 0; 10 } 11 pre, #log { 12 position: absolute; 13 top: 0; 14 left: 200px; 15 } 16 #target { 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 @keyframes rotate { 22 from { 23 transform: rotate(0deg); 24 } 25 to { 26 transform: rotate(45deg); 27 } 28 } 29 #occluder { 30 will-change: transform; 31 width: 100px; 32 height: 100px; 33 background-color: blue; 34 } 35 </style> 36 37 <div id="target"></div> 38 <div id="occluder"></div> 39 40 <script> 41 var vw = document.documentElement.clientWidth; 42 var vh = document.documentElement.clientHeight; 43 var delay = 100; 44 var entries = []; 45 var target; 46 var occluder; 47 48 runTestCycle(function() { 49 target = document.getElementById("target"); 50 occluder = document.getElementById("occluder"); 51 assert_true(!!target, "target exists"); 52 assert_true(!!occluder, "occluder exists"); 53 var observer = new IntersectionObserver(function(changes) { 54 entries = entries.concat(changes) 55 }, {trackVisibility: true, delay: delay}); 56 observer.observe(target); 57 entries = entries.concat(observer.takeRecords()); 58 assert_equals(entries.length, 0, "No initial notifications."); 59 runTestCycle(step0, "First rAF.", delay); 60 }, "IntersectionObserverV2 in a single document using the implicit root, with an animated occluding element.", delay); 61 62 function step0() { 63 occluder.style.animation = "rotate .1s linear"; 64 step_timeout(() => { 65 runTestCycle(step1, "occluder.style.animation = 'rotate .1s linear'", delay); 66 }, 50); 67 checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, vw, 0, vh, true, true]); 68 } 69 70 function step1() { 71 checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, vw, 0, vh, true, false]); 72 } 73 </script>