cross-origin-occlusion.sub.html (1659B)
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 iframe { 14 width: 300px; 15 height: 150px; 16 border: none; 17 } 18 #occluder { 19 will-change: transform; 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 } 24 </style> 25 26 <iframe src="http://{{domains[www1]}}:{{ports[http][0]}}/intersection-observer/resources/v2-subframe.html"></iframe> 27 <div id="occluder"></div> 28 29 <script> 30 async_test(function(t) { 31 let iframe = document.querySelector("iframe"); 32 let occluder = document.getElementById("occluder"); 33 34 function step0(event) { 35 assert_equals(event.data,""); 36 } 37 38 function step1(event) { 39 occluder.style.marginTop = "-150px"; 40 assert_equals(JSON.stringify(event.data), 41 JSON.stringify([true])); 42 } 43 44 function step2(event) { 45 occluder.style.marginTop = ""; 46 assert_equals(JSON.stringify(event.data), 47 JSON.stringify([false])); 48 } 49 50 function step3(event) { 51 assert_equals(JSON.stringify(event.data), 52 JSON.stringify([true])); 53 } 54 55 let steps = [step0, step1, step2, step3]; 56 57 window.addEventListener("message", event => { 58 if (steps.length) { 59 t.step(steps.shift(), t, event); 60 waitForFrame(t, () => { 61 iframe.contentWindow.postMessage("", "*"); 62 }); 63 } else { 64 t.done(); 65 } 66 }); 67 68 }, "Intersection observer V2 test with occlusion of target in iframe."); 69 </script>