zoom-scaled-target.html (2068B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing elements with css zoom</title> 3 <link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="resources/intersection-observer-test-utils.js"></script> 9 <head> 10 <style> 11 div { 12 width: 64px; 13 height: 64px; 14 background-color: blue 15 } 16 div.a { 17 zoom: 1.0; 18 width: 512px; 19 height: 512px; 20 } 21 22 div.b { 23 zoom: 4.0; 24 background-color: pink; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="a" id="ToBeRemoved"> 30 <div class="b" id="target"></div> 31 </div> 32 <script> 33 const viewportWidth = document.documentElement.clientWidth; 34 const viewportHeight = document.documentElement.clientHeight; 35 setup(() => { 36 window.entries = []; 37 window.target = document.getElementById("target"); 38 window.targetRect = target.getBoundingClientRect(); 39 }); 40 runTestCycle(function() { 41 assert_true(!!target, "target exists"); 42 const observer = new IntersectionObserver(function(changes) { 43 entries = entries.concat(changes); 44 }); 45 observer.observe(target); 46 entries = entries.concat(observer.takeRecords()); 47 assert_equals(entries.length, 0, "No initial notifications"); 48 runTestCycle(validateIntersectionRect, "Validate intersection rect"); 49 }); 50 function validateIntersectionRect() { 51 // The numbers in brackets are target client rect; intersection rect; 52 // and root bounds. 53 checkLastEntry(entries, 0, [ 54 // the 8 pixels comes from the html body padding. 55 8, 8 + 256, 8, 8 + 256, 56 8, 8 + 256, 8, 8 + 256, 57 0, viewportWidth, 0, viewportHeight, 58 true, 59 ]); 60 } 61 </script> 62 </body>