style-background-image.https.html (1954B)
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-background-image-ref.html"> 5 <style> 6 .container { 7 width: 100px; 8 height: 100px; 9 margin-left: 2px; 10 --foo:bar; 11 } 12 13 #canvas-geometry { 14 background-image: paint(geometry); 15 } 16 </style> 17 <script src="/common/reftest-wait.js"></script> 18 <script src="/common/worklet-reftest.js"></script> 19 <body> 20 <div id="canvas-geometry" class="container"></div> 21 22 <script id="code" type="text/worklet"> 23 registerPaint('geometry', class { 24 static get inputProperties() { 25 return [ 26 '--bar', 27 '--foo', 28 'empty-cells', 29 'margin-left', 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] != "--bar: [CSSUnparsedValue=]") 46 ctx.fillStyle = 'red'; 47 if (serializedStrings[1] != "--foo: [CSSUnparsedValue=bar]") 48 ctx.fillStyle = 'blue'; 49 if (serializedStrings[2] != "empty-cells: [CSSKeywordValue=show]") 50 ctx.fillStyle = 'yellow'; 51 if (serializedStrings[3] != "margin-left: [CSSUnitValue=2px]") 52 ctx.fillStyle = 'cyan'; 53 ctx.fillRect(0, 0, geom.width, geom.height); 54 } 55 }); 56 </script> 57 58 <script> 59 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 60 </script> 61 </body> 62 </html>