computed-style-layout-function.https.html (1653B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#valdef-display-layout"> 3 <meta name="assert" content="This test checks that a layout() function parses correctly and serializes correctly from computed style." /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #test1 { display: layout(test1); } 8 #test2 { display: layout(); } 9 #test3 { display: layout(test3, invalid); } 10 #test4 { --display: layout(test4); display: var(--display); } 11 </style> 12 13 <div id=test1></div> 14 <div id=test2></div> 15 <div id=test3></div> 16 <div id=test4></div> 17 <div id=test5></div> 18 <script> 19 test(function() { 20 const test1 = document.getElementById('test1'); 21 assert_equals(getComputedStyle(test1).display, 'layout(test1)'); 22 }); 23 24 test(function() { 25 // layout() should fail to parse. 26 const test2 = document.getElementById('test2'); 27 assert_equals(getComputedStyle(test2).display, 'block'); 28 }); 29 30 test(function() { 31 // layout(test3, invalid) should fail to parse. 32 const test3 = document.getElementById('test3'); 33 assert_equals(getComputedStyle(test3).display, 'block'); 34 }); 35 36 test(function() { 37 // Setting via a custom property should work. 38 const test4 = document.getElementById('test4'); 39 assert_equals(getComputedStyle(test4).display, 'layout(test4)'); 40 }); 41 42 test(function() { 43 // Setting the inline style should reflect in the computed style. 44 const test5 = document.getElementById('test5'); 45 assert_equals(getComputedStyle(test5).display, 'block'); 46 47 test5.style.display = 'layout(test5)'; 48 assert_equals(getComputedStyle(test5).display, 'layout(test5)'); 49 }); 50 </script>