style-map-multi.https.html (1950B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-invalidation"> 4 <link rel="match" href="style-map-multi-ref.html"> 5 <meta name="assert" content="This test checks that properties are correctly given to the layout function." /> 6 7 <style> 8 .test { 9 background: red; 10 margin: 10px; 11 width: 100px; 12 13 /* Properties under test. */ 14 --foo:bar; 15 margin-left: 2px; 16 } 17 18 @supports (display: layout(test)) { 19 .test { 20 background: green; 21 display: layout(test); 22 } 23 } 24 </style> 25 <script src="/common/reftest-wait.js"></script> 26 <script src="/common/worklet-reftest.js"></script> 27 28 <div class="test"></div> 29 30 <script id="code" type="text/worklet"> 31 registerLayout('test', class { 32 static get inputProperties() { 33 return [ '--bar', '--foo', 'empty-cells', 'margin-left']; 34 } 35 36 async intrinsicSizes() {} 37 async layout(children, edges, constraints, styleMap) { 38 const expected = [ 39 {property: '--bar', value: '[CSSUnparsedValue=]'}, 40 {property: '--foo', value: '[CSSUnparsedValue=bar]'}, 41 {property: 'empty-cells', value: '[CSSKeywordValue=show]'}, 42 {property: 'margin-left', value: '[CSSUnitValue=2px]'}, 43 ]; 44 45 const actual = Array.from(styleMap.keys()).sort().map((property) => { 46 const valueObject = styleMap.get(property); 47 const value = '[' + valueObject.constructor.name + '=' + valueObject.toString() + ']'; 48 return {property, value}; 49 }); 50 51 if (expected.length != actual.length) 52 return {autoBlockSize: 0}; 53 54 for (let i = 0; i < expected.length; i++) { 55 if (expected[i].property != actual[i].property) 56 return {autoBlockSize: 0}; 57 58 if (expected[i].value != actual[i].value) 59 return {autoBlockSize: 0}; 60 } 61 62 return {autoBlockSize: 100}; 63 } 64 }); 65 </script> 66 67 <script> 68 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 69 </script> 70 </html>