container-units-gradient-invalidation.html (1227B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Container Relative Units in gradients</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 5 <link rel="match" href="container-units-gradient-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/common/rendering-utils.js"></script> 8 <style> 9 .container { 10 container-type: size; 11 width: 500px; 12 height: 400px; 13 display: flex; 14 flex-wrap: wrap; 15 } 16 .smaller { 17 width: 400px; 18 height: 300px; 19 } 20 .box { 21 width: 100px; 22 height: 100px; 23 margin: 5px; 24 } 25 </style> 26 <div class=container> 27 <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div> 28 <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div> 29 <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div> 30 <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div> 31 <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue)"></div> 32 </div> 33 <script> 34 document.body.offsetTop; 35 document.querySelector('.container').classList.add('smaller'); 36 waitForAtLeastOneFrame().then(takeScreenshot); 37 </script> 38 </html>