style-map.https.html (1958B)
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-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 } 22 23 .test-0 { display: layout(test-0); } 24 .test-1 { display: layout(test-1); } 25 .test-2 { display: layout(test-2); } 26 .test-3 { display: layout(test-3); } 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="/common/worklet-reftest.js"></script> 31 32 <div class="test test-0"></div> 33 <div class="test test-1"></div> 34 <div class="test test-2"></div> 35 <div class="test test-3"></div> 36 37 <script> 38 const tmpl = (test, idx) => { 39 return ` 40 registerLayout('test-${idx}', class { 41 static get inputProperties() { return ['${test.property}']; } 42 43 async intrinsicSizes() {} 44 async layout(children, edges, constraints, styleMap) { 45 const value = styleMap.get('${test.property}'); 46 const result = '[' + value.constructor.name + '=' + value.toString() + ']'; 47 if (result != '${test.expected}') 48 return {autoBlockSize: 0}; 49 50 const size = Array.from(styleMap.keys()).length; 51 if (size != 1) 52 return {autoBlockSize: 0}; 53 54 return {autoBlockSize: 100}; 55 } 56 }); 57 `; 58 } 59 60 const tests = [ 61 {property: '--bar', expected: '[CSSUnparsedValue=]'}, 62 {property: '--foo', expected: '[CSSUnparsedValue=bar]'}, 63 {property: 'empty-cells', expected: '[CSSKeywordValue=show]'}, 64 {property: 'margin-left', expected: '[CSSUnitValue=2px]'}, 65 ]; 66 67 const workletSource = tests.map(tmpl).join('\n'); 68 69 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, workletSource); 70 </script> 71 </html>