registered-property-invalidation-002.https.html (1292B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Registering a property causes invalidation for applied value</title> 4 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 5 <link rel="match" href="parse-input-arguments-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/common/worklet-reftest.js"></script> 8 <body> 9 <style> 10 #target { 11 background: paint(geometry); 12 width: 100px; 13 height: 100px; 14 --length: 100px; 15 } 16 </style> 17 <div id="target"></div> 18 <script id="code" type="text/worklet"> 19 registerPaint('geometry', class { 20 static get inputProperties() { return ['--length']; } 21 paint(ctx, geom, styleMap) { 22 let value = styleMap.get('--length'); 23 let pass = value.value === 100 && value.unit === 'px'; 24 ctx.fillStyle = pass ? 'green' : 'red'; 25 ctx.fillRect(0, 0, geom.width, geom.height); 26 } 27 }); 28 </script> 29 30 <script> 31 async function test() { 32 getComputedStyle(target); 33 let code = document.getElementById('code').textContent; 34 await importWorklet(CSS.paintWorklet, code); 35 await workletPainted(); 36 CSS.registerProperty({ 37 name: '--length', 38 syntax: '<length>', 39 initialValue: '0px', 40 inherits: false 41 }); 42 await workletPainted(); 43 takeScreenshot(); 44 } 45 46 test(); 47 </script> 48 </body> 49 </html>