tor-browser

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

rule-inset-bidirectional-shorthand.html (5955B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Gap Decorations: rule-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>? /[<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-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end',
     17                'column-rule-interior-inset-start', 'column-rule-interior-inset-end',
     18                'row-rule-edge-inset-start', 'row-rule-edge-inset-end',
     19                'row-rule-interior-inset-start', 'row-rule-interior-inset-end']
     20        };
     21 
     22        const bidirectionalTestCases = [
     23            {
     24                input: '0px',
     25                expected: {
     26                    columnRuleEdgeInsetStart: '0px',
     27                    columnRuleEdgeInsetEnd: '0px',
     28                    columnRuleInteriorInsetStart: '0px',
     29                    columnRuleInteriorInsetEnd: '0px',
     30                    rowRuleEdgeInsetStart: '0px',
     31                    rowRuleEdgeInsetEnd: '0px',
     32                    rowRuleInteriorInsetStart: '0px',
     33                    rowRuleInteriorInsetEnd: '0px'
     34                }
     35            },
     36            {
     37                input: '10px',
     38                expected: {
     39                    columnRuleEdgeInsetStart: '10px',
     40                    columnRuleEdgeInsetEnd: '10px',
     41                    columnRuleInteriorInsetStart: '10px',
     42                    columnRuleInteriorInsetEnd: '10px',
     43                    rowRuleEdgeInsetStart: '10px',
     44                    rowRuleEdgeInsetEnd: '10px',
     45                    rowRuleInteriorInsetStart: '10px',
     46                    rowRuleInteriorInsetEnd: '10px'
     47                }
     48            },
     49            {
     50                input: '50%',
     51                expected: {
     52                    columnRuleEdgeInsetStart: '50%',
     53                    columnRuleEdgeInsetEnd: '50%',
     54                    columnRuleInteriorInsetStart: '50%',
     55                    columnRuleInteriorInsetEnd: '50%',
     56                    rowRuleEdgeInsetStart: '50%',
     57                    rowRuleEdgeInsetEnd: '50%',
     58                    rowRuleInteriorInsetStart: '50%',
     59                    rowRuleInteriorInsetEnd: '50%',
     60                }
     61            },
     62            {
     63                input: '10px 20px',
     64                expected: {
     65                    columnRuleEdgeInsetStart: '10px',
     66                    columnRuleEdgeInsetEnd: '20px',
     67                    columnRuleInteriorInsetStart: '10px',
     68                    columnRuleInteriorInsetEnd: '20px',
     69                    rowRuleEdgeInsetStart: '10px',
     70                    rowRuleEdgeInsetEnd: '20px',
     71                    rowRuleInteriorInsetStart: '10px',
     72                    rowRuleInteriorInsetEnd: '20px',
     73                }
     74            },
     75            {
     76                input: '10px 20px / 30px',
     77                expected: {
     78                    columnRuleEdgeInsetStart: '10px',
     79                    columnRuleEdgeInsetEnd: '20px',
     80                    columnRuleInteriorInsetStart: '30px',
     81                    columnRuleInteriorInsetEnd: '30px',
     82                    rowRuleEdgeInsetStart: '10px',
     83                    rowRuleEdgeInsetEnd: '20px',
     84                    rowRuleInteriorInsetStart: '30px',
     85                    rowRuleInteriorInsetEnd: '30px',
     86                }
     87            },
     88            {
     89                input: '10px / 20px 30px',
     90                expected: {
     91                    columnRuleEdgeInsetStart: '10px',
     92                    columnRuleEdgeInsetEnd: '10px',
     93                    columnRuleInteriorInsetStart: '20px',
     94                    columnRuleInteriorInsetEnd: '30px',
     95                    rowRuleEdgeInsetStart: '10px',
     96                    rowRuleEdgeInsetEnd: '10px',
     97                    rowRuleInteriorInsetStart: '20px',
     98                    rowRuleInteriorInsetEnd: '30px',
     99                }
    100            },
    101            {
    102                input: '10px 20px / 30px 40px',
    103                expected: {
    104                    columnRuleEdgeInsetStart: '10px',
    105                    columnRuleEdgeInsetEnd: '20px',
    106                    columnRuleInteriorInsetStart: '30px',
    107                    columnRuleInteriorInsetEnd: '40px',
    108                    rowRuleEdgeInsetStart: '10px',
    109                    rowRuleEdgeInsetEnd: '20px',
    110                    rowRuleInteriorInsetStart: '30px',
    111                    rowRuleInteriorInsetEnd: '40px',
    112                }
    113            },
    114 
    115        ];
    116 
    117 
    118        for (rule_property in rule_properties) {
    119            const test_cases = bidirectionalTestCases;
    120 
    121            for (const { input, expected } of test_cases) {
    122                const [columnRuleEdgeInsetStart, columnRuleEdgeInsetEnd, columnRuleInteriorInsetStart, columnRuleInteriorInsetEnd, rowRuleEdgeInsetStart, rowRuleEdgeInsetEnd, rowRuleInteriorInsetStart, rowRuleInteriorInsetEnd] = rule_properties[rule_property];
    123 
    124                test_shorthand_value(rule_property, input, {
    125                    [columnRuleEdgeInsetStart]: expected.columnRuleEdgeInsetStart,
    126                    [columnRuleEdgeInsetEnd]: expected.columnRuleEdgeInsetEnd,
    127                    [columnRuleInteriorInsetStart]: expected.columnRuleInteriorInsetStart,
    128                    [columnRuleInteriorInsetEnd]: expected.columnRuleInteriorInsetEnd,
    129                    [rowRuleEdgeInsetStart]: expected.rowRuleEdgeInsetStart,
    130                    [rowRuleEdgeInsetEnd]: expected.rowRuleEdgeInsetEnd,
    131                    [rowRuleInteriorInsetStart]: expected.rowRuleInteriorInsetStart,
    132                    [rowRuleInteriorInsetEnd]: expected.rowRuleInteriorInsetEnd,
    133                });
    134            }
    135        }
    136    </script>
    137 </body>
    138 </html>