svg-stroke-change.html (2038B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing an SVG element while its stroke is changed</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/intersection-observer-test-utils.js"></script> 7 <svg width="400" height="10000"> 8 <!-- Ensure the svg bounds are unchanged with a white fill --> 9 <rect x="-5000" y="-5000" width="10000" height="10000" fill="white"/> 10 <rect id="target" x="0" y="100vh" width="100px" height="100px" stroke="green" stroke-width="0"/> 11 </svg> 12 <script> 13 const viewportWidth = document.documentElement.clientWidth; 14 const viewportHeight = document.documentElement.clientHeight; 15 setup(() => { 16 window.entries = []; 17 window.target = document.getElementById("target"); 18 window.targetRect = target.getBoundingClientRect(); 19 }); 20 runTestCycle(function() { 21 assert_true(!!target, "target exists"); 22 const observer = new IntersectionObserver(function(changes) { 23 entries = entries.concat(changes); 24 }); 25 observer.observe(target); 26 entries = entries.concat(observer.takeRecords()); 27 assert_equals(entries.length, 0, "No initial notifications"); 28 runTestCycle(step0, "First rAF."); 29 }); 30 function step0() { 31 target.setAttribute('stroke-width', '30'); 32 runTestCycle(step1, "change stroke"); 33 // The numbers in brackets are target client rect; intersection rect; 34 // and root bounds. 35 checkLastEntry(entries, 0, [ 36 8, 8 + targetRect.width, viewportHeight+8, viewportHeight+8 + targetRect.height, 37 0, 0, 0, 0, 38 0, viewportWidth, 0, viewportHeight, 39 false, 40 ]); 41 } 42 function step1() { 43 checkLastEntry(entries, 1, [ 44 // The stroke width is divided by 2, as half of the stroke is inside the shape 45 8-30/2, 8 + targetRect.width + 30/2, viewportHeight+8 -30/2, viewportHeight+8 + targetRect.height + 30/2, 46 8, 8 + targetRect.width + 30/2, viewportHeight-7, viewportHeight, 47 0, viewportWidth, 0, viewportHeight, 48 true, 49 ]); 50 } 51 </script>