list-style-image-gradients-dynamic.html (1336B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html class="reftest-wait"> 7 <meta charset="utf-8"> 8 <title>CSS Test: Gradient list markers with dynamic font-size change</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-lists/#image-markers"> 11 <link rel="help" href="https://drafts.csswg.org/css-images-3/#typedef-gradient"> 12 <link rel="match" href="list-style-image-gradients-dynamic-ref.html"> 13 <meta name="assert" content="list-style-image:<gradient> with a single color renders the same as an image without an intrinsic size of the same color"> 14 <style> 15 .larger-font ::marker { 16 font-size: 36px; 17 } 18 </style> 19 <ul> 20 <li style="list-style-image: linear-gradient(blue, blue)">text</li> 21 <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> 22 <li style="list-style-image: radial-gradient(blue, blue)">text</li> 23 <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> 24 </ul> 25 <script src="/common/reftest-wait.js"></script> 26 <script> 27 addEventListener("load", () => { 28 document.body.offsetLeft; 29 document.body.classList.add("larger-font"); 30 takeScreenshot(); 31 }, {once: true}); 32 </script> 33 </html>