registered-property-stylemap.https.html (1806B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Test styleMap functions</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 <script src="./resources/utils.js"></script> 9 <body> 10 <style> 11 #target { 12 width: 100px; 13 height: 100px; 14 background: paint(style-map); 15 } 16 </style> 17 <div id="target"></div> 18 <script> 19 try { 20 CSS.registerProperty({ 21 name: '--prop', 22 syntax: '<length>+', 23 initialValue: '10px 10px 10px 10px', 24 inherits: false 25 }); 26 27 const worklet = ` 28 registerPaint('style-map', class { 29 static get inputProperties() { return ['--prop']; } 30 paint(ctx, geom, styleMap) { 31 let serialize = (v) => '[' + v.constructor.name + ' ' + v.toString() + ']'; 32 let expected = '[CSSUnitValue 10px]'; 33 let isExpected = x => serialize(x) === expected; 34 35 let pass = true; 36 37 pass &= styleMap.has('--prop'); 38 pass &= isExpected(styleMap.get('--prop')); 39 pass &= styleMap.getAll('--prop').length == 4; 40 pass &= styleMap.getAll('--prop').every(isExpected); 41 pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].length == 4; 42 pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].every(isExpected); 43 44 ctx.fillStyle = pass ? 'green' : 'red'; 45 ctx.fillRect(0, 0, geom.width, geom.height); 46 } 47 });` 48 49 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, worklet); 50 } catch(e) { 51 document.body.textContent = e; 52 takeScreenshot(); 53 } 54 </script> 55 </body> 56 </html>