<!DOCTYPE html> <html class=reftest-wait> <title>Container Relative Units in gradients</title> <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths"> <link rel="match" href="container-units-gradient-ref.html"> <script src="/common/reftest-wait.js"></script> <script src="/common/rendering-utils.js"></script> <style> .container { container-type: size; width: 500px; height: 400px; display: flex; flex-wrap: wrap; } .smaller { width: 400px; height: 300px; } .box { width: 100px; height: 100px; margin: 5px; } </style> <div class=container> <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div> <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div> <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div> <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div> <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue)"></div> </div> <script> document.body.offsetTop; document.querySelector('.container').classList.add('smaller'); waitForAtLeastOneFrame().then(takeScreenshot); </script> </html>