paint-order-001-ref.html (1225B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>webkit-text-stroke and paint-order: reference</title> 5 <link rel="author" title="Jonathan Kew" href="jfkthame@gmail.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 7 <style> 8 body>div { position: relative; clear: left; float: left; } 9 span.f { -webkit-text-stroke: 5px orange; } 10 span.s, 11 span.sf { display: inline-block; position: relative; } 12 span.s::before, 13 span.sf::before { -webkit-text-stroke: 5px orange; position: absolute; z-index: -1; } 14 span.s::before { content: "stroke"; } 15 span.sf::before { content: "s-f"; } 16 </style> 17 <body> 18 <div style="font: bold 32px serif;"> 19 <span class="f">initial</span> 20 <span class="f">fill</span> 21 <span class="s">stroke</span> 22 <span class="f">f-s</span> 23 <span class="sf">s-f</span> 24 </div> 25 26 <div style="font: bold 64px serif;"> 27 <span class="f">initial</span> 28 <span class="f">fill</span> 29 <span class="s">stroke</span> 30 <span class="f">f-s</span> 31 <span class="sf">s-f</span> 32 </div> 33 34 <div style="font: bold 96px serif;"> 35 <span class="f">initial</span><br> 36 <span class="f">fill</span> 37 <span class="s">stroke</span><br> 38 <span class="f">f-s</span> 39 <span class="sf">s-f</span> 40 </div> 41 <body> 42 <html>