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