list-style-image-gradients.html (1753B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <meta charset="utf-8"> 8 <title>CSS Test: Gradient list markers</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-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 .none > li { list-style-type: none; } 16 </style> 17 <ul> 18 <li style="list-style-image: linear-gradient(blue, blue)">text</li> 19 <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> 20 <li style="list-style-image: radial-gradient(blue, blue)">text</li> 21 <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> 22 </ul> 23 <ol> 24 <li style="list-style-image: linear-gradient(blue, blue)">text</li> 25 <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> 26 <li style="list-style-image: radial-gradient(blue, blue)">text</li> 27 <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> 28 </ol> 29 <ol class="none"> 30 <li style="list-style-image: linear-gradient(blue, blue)">text</li> 31 <li style="list-style-image: repeating-linear-gradient(blue, blue 2px, blue 4px)">text</li> 32 <li style="list-style-image: radial-gradient(blue, blue)">text</li> 33 <li style="list-style-image: repeating-radial-gradient(blue, blue .2em, blue .4em)">text</li> 34 </ol> 35 </html>