clip-path.html (1601B)
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 { margin: 0 } 9 pre, #log { 10 position: absolute; 11 top: 0; 12 left: 200px; 13 } 14 #target { 15 background-color: green; 16 width: 100px; 17 height: 100px; 18 } 19 #container { 20 padding: 8px; 21 width: 0px; 22 height: 0px; 23 } 24 </style> 25 26 <div id="container"> 27 <div id="target"></div> 28 </div> 29 30 <script> 31 var vw = document.documentElement.clientWidth; 32 var vh = document.documentElement.clientHeight; 33 34 var entries = []; 35 36 promise_test(async function(t) { 37 var target = document.getElementById("target"); 38 var container = document.getElementById("container"); 39 var root = document.getElementById("root"); 40 var observer = new IntersectionObserver(function(changes) { 41 entries = entries.concat(changes) 42 }); 43 observer.observe(target); 44 entries = entries.concat(observer.takeRecords()); 45 assert_equals(entries.length, 0, "No initial notifications."); 46 47 await waitForNotification(); 48 49 checkLastEntry( 50 entries, 51 0, 52 [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], 53 ); 54 container.style.clipPath = "inset(1000px)"; 55 56 await waitForNotification(); 57 58 checkLastEntry( 59 entries, 60 1, 61 [8, 108, 8, 108, 0, 0, 0, 0, 0, vw, 0, vh, false], 62 ); 63 64 container.style.clipPath = ""; 65 66 await waitForNotification(); 67 68 checkLastEntry( 69 entries, 70 2, 71 [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], 72 ); 73 }); 74 </script>