cross-origin-effects.sub.html (1670B)
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 </style> 14 15 <div id="container"> 16 <iframe src="http://{{domains[www1]}}:{{ports[http][0]}}/intersection-observer/resources/v2-subframe.html"></iframe> 17 </div> 18 19 <script> 20 async_test(function(t) { 21 let container = document.getElementById("container"); 22 let iframe = document.querySelector("iframe"); 23 24 function step0(event) { 25 assert_equals(event.data,""); 26 } 27 28 function step1(event) { 29 container.style.opacity = "0.99"; 30 assert_equals(JSON.stringify(event.data), 31 JSON.stringify([true])); 32 } 33 34 function step2(event) { 35 container.style.opacity = ""; 36 assert_equals(JSON.stringify(event.data), 37 JSON.stringify([false])); 38 } 39 40 function step3(event) { 41 container.style.transform = "skew(30deg)"; 42 assert_equals(JSON.stringify(event.data), 43 JSON.stringify([true])); 44 } 45 46 function step4(event) { 47 assert_equals(JSON.stringify(event.data), 48 JSON.stringify([false])); 49 } 50 51 let steps = [step0, step1, step2, step3, step4]; 52 53 window.addEventListener("message", event => { 54 if (steps.length) { 55 t.step(steps.shift(), t, event); 56 waitForFrame(t, () => { 57 iframe.contentWindow.postMessage("", "*") 58 }); 59 } else { 60 t.done(); 61 } 62 }); 63 64 }, "Intersection observer V2 test with visual effects on iframe."); 65 </script>