custom-highlight-dynamic-container-metrics-001.html (1093B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>CSS Highlight API Test: Highlights using container sizes update on container changes</title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 7 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 8 <link rel="match" href="custom-highlight-dynamic-container-metrics-001-ref.html"> 9 <meta name="assert" value="lengths depending on containers take the correct values in a universal highlight with no container when the container size changes"> 10 <script src="/common/reftest-wait.js"></script> 11 <head> 12 <style> 13 iframe { 14 width: 200px; 15 height: 100px; 16 } 17 18 iframe.resize { 19 width: 400px; 20 height: 200px; 21 } 22 </style> 23 </head> 24 <iframe id="iframe" src="resources/iframe-container.html"></iframe> 25 <script> 26 function runtest() { 27 iframe.classList.add('resize'); 28 requestAnimationFrame(() => takeScreenshot()); 29 } 30 iframe.onload = runtest; 31 </script> 32 </html>