rule-edge-interior-inset-shorthand.html (2291B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Gap Decorations: {column/row}-rule-{edge/interior}-inset shorthands</title> 6 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset"> 7 <meta name="assert" 8 content="rule-inset supports the full grammar '<length-percentage> <length-percentage>?'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/shorthand-testcommon.js"></script> 12 </head> 13 <body> 14 <script> 15 const rule_properties = { 16 'column-rule-edge-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end'], 17 'row-rule-edge-inset': ['row-rule-edge-inset-start', 'row-rule-edge-inset-end'], 18 'column-rule-interior-inset': ['column-rule-interior-inset-start', 'column-rule-interior-inset-end'], 19 'row-rule-interior-inset': ['row-rule-interior-inset-start', 'row-rule-interior-inset-end'] 20 }; 21 const testCases = [ 22 { 23 input: '0px', 24 expected: { 25 ruleInsetStart: '0px', 26 ruleInsetEnd: '0px', 27 } 28 }, 29 { 30 input: '10px', 31 expected: { 32 ruleInsetStart: '10px', 33 ruleInsetEnd: '10px', 34 } 35 }, 36 { 37 input: '50%', 38 expected: { 39 ruleInsetStart: '50%', 40 ruleInsetEnd: '50%', 41 } 42 }, 43 { 44 input: '10px 20px', 45 expected: { 46 ruleInsetStart: '10px', 47 ruleInsetEnd: '20px', 48 } 49 }, 50 ]; 51 52 53 for (rule_property in rule_properties) { 54 const test_cases = testCases; 55 56 for (const { input, expected } of test_cases) { 57 const [ruleInsetStart, ruleInsetEnd] = rule_properties[rule_property]; 58 test_shorthand_value(rule_property, input, { 59 [ruleInsetStart]: expected.ruleInsetStart, 60 [ruleInsetEnd]: expected.ruleInsetEnd, 61 }); 62 } 63 } 64 </script> 65 </body> 66 </html>