z-index-changes.html (1702B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Intersection observer visibility should be updated after z-index changes</title> 4 <link rel="help" href="https://crbug.com/422531206"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #overlay { 9 position: absolute; 10 top: 0; 11 left: 0; 12 width: 220px; 13 height: 220px; 14 background-color: blue; 15 z-index: -9999; 16 } 17 #frame { 18 position: relative; 19 width: 200px; 20 height: 200px; 21 } 22 </style> 23 24 <div id="overlay"></div> 25 <iframe id="frame" srcdoc="<!doctype html>hello"></iframe> 26 27 <script> 28 async_test(function(t) { 29 let observation_count = 0; 30 31 const observer = new IntersectionObserver(t.step_func(function(records) { 32 records.forEach(function(record) { 33 observation_count++; 34 if (observation_count === 1) { 35 assert_equals(record.isVisible, true, 'Initial observation should be visible'); 36 37 // Adjust the overlay z-index so that it occludes the frame. 38 overlay.style.zIndex = '9999'; 39 } else if (observation_count === 2) { 40 assert_equals(record.isVisible, false, 'Second observation should be obscured'); 41 42 // Adjust the overlay z-index so it no longer occludes the frame. 43 overlay.style.zIndex = '-9999'; 44 } else if (observation_count === 3) { 45 assert_equals(record.isVisible, true, 'Third observation should be visible'); 46 47 observer.disconnect(); 48 t.done(); 49 } 50 }); 51 }), { trackVisibility: true, delay: 100 }); 52 53 frame.onload = t.step_func(() => { 54 observer.observe(frame.contentDocument.documentElement); 55 }); 56 }, 'IntersectionObserver observes visibility changes from z-index'); 57 </script>