style-first-letter-pseudo.https.html (1804B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 4 <link rel="match" href="style-first-letter-pseudo-ref.html"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 div { 8 color: rgb(0, 255, 0); 9 line-height: 1px; 10 height: 10px; 11 } 12 13 div::first-letter { 14 background-image: paint(geometry); 15 color: rgb(255, 0, 0); 16 line-height: 2px; 17 } 18 </style> 19 <script src="/common/reftest-wait.js"></script> 20 <script src="/common/worklet-reftest.js"></script> 21 <body style="font: 10px/1 Ahem;"> 22 <div>ppp</div> 23 24 <script id="code" type="text/worklet"> 25 registerPaint('geometry', class { 26 static get inputProperties() { 27 return [ 28 'color', 29 'line-height', 30 ]; 31 } 32 paint(ctx, geom, styleMap) { 33 const properties = [...styleMap.keys()].sort(); 34 var serializedStrings = []; 35 for (let i = 0; i < properties.length; i++) { 36 const value = styleMap.get(properties[i]); 37 let serialized; 38 if (value) 39 serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']'; 40 else 41 serialized = properties[i].toString() + ': [null]'; 42 serializedStrings.push(serialized); 43 } 44 ctx.fillStyle = 'green'; 45 if (serializedStrings[0] != "color: [CSSStyleValue=rgb(255, 0, 0)]") 46 ctx.fillStyle = 'red'; 47 if (serializedStrings[1] != "line-height: [CSSUnitValue=2px]") 48 ctx.fillStyle = 'blue'; 49 ctx.fillRect(0, 0, geom.width, geom.height); 50 } 51 }); 52 </script> 53 54 <script> 55 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 56 </script> 57 </body> 58 </html>