tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

rule-interior-inset-bidirectional-shorthand.html (3114B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Gap Decorations: rule-interior-inset shorthands</title>
      6 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#inset">
      7 <meta name="assert"
      8    content="rule-interior-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            'rule-interior-inset': ['column-rule-interior-inset-start', 'column-rule-interior-inset-end',
     17                'row-rule-interior-inset-start', 'row-rule-interior-inset-end']
     18        };
     19 
     20        const bidirectionalTestCases = [
     21            {
     22                input: '0px',
     23                expected: {
     24                    columnRuleInteriorInsetStart: '0px',
     25                    columnRuleInteriorInsetEnd: '0px',
     26                    rowRuleInteriorInsetStart: '0px',
     27                    rowRuleInteriorInsetEnd: '0px'
     28                }
     29            },
     30            {
     31                input: '10px',
     32                expected: {
     33                    columnRuleInteriorInsetStart: '10px',
     34                    columnRuleInteriorInsetEnd: '10px',
     35                    rowRuleInteriorInsetStart: '10px',
     36                    rowRuleInteriorInsetEnd: '10px'
     37                }
     38            },
     39            {
     40                input: '50%',
     41                expected: {
     42                    columnRuleInteriorInsetStart: '50%',
     43                    columnRuleInteriorInsetEnd: '50%',
     44                    rowRuleInteriorInsetStart: '50%',
     45                    rowRuleInteriorInsetEnd: '50%',
     46                }
     47            },
     48            {
     49                input: '10px 20px',
     50                expected: {
     51                    columnRuleEdgeInsetStart: '10px',
     52                    columnRuleEdgeInsetEnd: '20px',
     53                    columnRuleInteriorInsetStart: '10px',
     54                    columnRuleInteriorInsetEnd: '20px',
     55                    rowRuleEdgeInsetStart: '10px',
     56                    rowRuleEdgeInsetEnd: '20px',
     57                    rowRuleInteriorInsetStart: '10px',
     58                    rowRuleInteriorInsetEnd: '20px',
     59                }
     60            },
     61        ];
     62 
     63 
     64        for (rule_property in rule_properties) {
     65            const test_cases = bidirectionalTestCases;
     66 
     67            for (const { input, expected } of test_cases) {
     68                const [columnRuleInteriorInsetStart, columnRuleInteriorInsetEnd, rowRuleInteriorInsetStart, rowRuleInteriorInsetEnd] = rule_properties[rule_property];
     69 
     70                test_shorthand_value(rule_property, input, {
     71                    [columnRuleInteriorInsetStart]: expected.columnRuleInteriorInsetStart,
     72                    [columnRuleInteriorInsetEnd]: expected.columnRuleInteriorInsetEnd,
     73                    [rowRuleInteriorInsetStart]: expected.rowRuleInteriorInsetStart,
     74                    [rowRuleInteriorInsetEnd]: expected.rowRuleInteriorInsetEnd,
     75                });
     76            }
     77        }
     78    </script>
     79 </body>
     80 </html>