tor-browser

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

function-conditionals.html (7829B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: Conditionals within @function</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="resources/utils.js"></script>
      7 
      8 <style>
      9  #container {
     10    container-type: size;
     11    width: 100px;
     12    height: 50px;
     13  }
     14 </style>
     15 <div id=container>
     16  <div id=target></div>
     17 <div>
     18 <div id=main></div>
     19 
     20 <!-- To pass, a test must produce matching computed values for --actual and
     21     --expected on #target. -->
     22 
     23 <template data-name="Basic @supports">
     24  <style>
     25    @function --f() {
     26      result: FAIL;
     27      @supports (width: 100px) {
     28        result: PASS;
     29      }
     30    }
     31    #target {
     32      --actual: --f();
     33      --expected: PASS;
     34    }
     35  </style>
     36 </template>
     37 
     38 <template data-name="Basic @supports (false)">
     39  <style>
     40    @function --f() {
     41      result: PASS;
     42      @supports (not (width: 100px)) {
     43        result: FAIL;
     44      }
     45    }
     46    #target {
     47      --actual: --f();
     48      --expected: PASS;
     49    }
     50  </style>
     51 </template>
     52 
     53 <template data-name="Nested @supports">
     54  <style>
     55    @function --f() {
     56      result: FAIL;
     57      @supports (not (width: red)) {
     58        @supports (height: 100px) {
     59          result: PASS;
     60        }
     61      }
     62    }
     63    #target {
     64      --actual: --f();
     65      --expected: PASS;
     66    }
     67  </style>
     68 </template>
     69 
     70 <template data-name="Nested @supports (false)">
     71  <style>
     72    @function --f() {
     73      result: FAIL-outer;
     74      @supports (not (width: red)) {
     75        result: PASS;
     76        @supports (height: red) {
     77          result: FAIL-inner;
     78        }
     79      }
     80    }
     81    #target {
     82      --actual: --f();
     83      --expected: PASS;
     84    }
     85  </style>
     86 </template>
     87 
     88 <template data-name="Inconsequential conditional">
     89  <style>
     90    @function --f() {
     91      @supports (width: 100px) {
     92        result: FAIL;
     93      }
     94      result: PASS;
     95    }
     96    #target {
     97      --actual: --f();
     98      --expected: PASS;
     99    }
    100  </style>
    101 </template>
    102 
    103 <template data-name="@supports with locals">
    104  <style>
    105    @function --f(--x) {
    106      --y: 2;
    107      --z: 3;
    108      @supports (width: 100px) {
    109        --y: 20;
    110      }
    111      result: var(--x) var(--y) var(--z);
    112    }
    113    #target {
    114      --actual: --f(1);
    115      --expected: 1 20 3;
    116    }
    117  </style>
    118 </template>
    119 
    120 <!-- @media -->
    121 
    122 <template data-name="Basic @media">
    123  <style>
    124    @function --f() {
    125      result: FAIL;
    126      @media (width > 0px) {
    127        result: PASS;
    128      }
    129    }
    130    #target {
    131      --actual: --f();
    132      --expected: PASS;
    133    }
    134  </style>
    135 </template>
    136 
    137 <template data-name="Basic @media (false)">
    138  <style>
    139    @function --f() {
    140      result: PASS;
    141      @media (not (width)) {
    142        result: FAIL;
    143      }
    144    }
    145    #target {
    146      --actual: --f();
    147      --expected: PASS;
    148    }
    149  </style>
    150 </template>
    151 
    152 <template data-name="Nested @media">
    153  <style>
    154    @function --f() {
    155      result: FAIL;
    156      @media (width > 0px) {
    157        @media (not (height: 99999999px)) {
    158          result: PASS;
    159        }
    160        @media (width: 99999999px) {
    161          result: FAIL;
    162        }
    163      }
    164    }
    165    #target {
    166      --actual: --f();
    167      --expected: PASS;
    168    }
    169  </style>
    170 </template>
    171 
    172 <template data-name="Nested @media (false)">
    173  <style>
    174    @function --f() {
    175      result: PASS;
    176      @media (not (width > 0px)) {
    177        @media (not (height: 99999999px)) {
    178          result: FAIL;
    179        }
    180        @media (width: 99999999px) {
    181          result: FAIL;
    182        }
    183      }
    184    }
    185    #target {
    186      --actual: --f();
    187      --expected: PASS;
    188    }
    189  </style>
    190 </template>
    191 
    192 <template data-name="Locals within @media">
    193  <style>
    194    @function --f() {
    195      --x: FAIL;
    196      @media (width > 0px) {
    197        --x: PASS;
    198      }
    199      result: var(--x);
    200    }
    201    #target {
    202      --actual: --f();
    203      --expected: PASS;
    204    }
    205  </style>
    206 </template>
    207 
    208 <template data-name="@supports within @media">
    209  <style>
    210    @function --f() {
    211      --x: FAIL;
    212      @media (width > 0px) {
    213        @supports (color: green) {
    214          --x: PASS;
    215        }
    216        @supports (not (color: green)) {
    217          --x: FAIL;
    218        }
    219      }
    220      result: var(--x);
    221    }
    222    #target {
    223      --actual: --f();
    224      --expected: PASS;
    225    }
    226  </style>
    227 </template>
    228 
    229 <template data-name="@media within @supports">
    230  <style>
    231    @function --f() {
    232      --x: FAIL;
    233      @supports (color: green) {
    234        @media (width > 0px) {
    235          --x: PASS;
    236        }
    237        @media (width = 99999999999px) {
    238          --x: FAIL;
    239        }
    240      }
    241      result: var(--x);
    242    }
    243    #target {
    244      --actual: --f();
    245      --expected: PASS;
    246    }
    247  </style>
    248 </template>
    249 
    250 
    251 <!-- @container -->
    252 
    253 <template data-name="Basic @container">
    254  <style>
    255    @function --f() {
    256      result: FAIL;
    257      @container (width = 100px) {
    258        result: PASS;
    259      }
    260    }
    261    #target {
    262      --actual: --f();
    263      --expected: PASS;
    264    }
    265  </style>
    266 </template>
    267 
    268 <template data-name="Basic @container (false)">
    269  <style>
    270    @function --f() {
    271      result: PASS;
    272      @container (width = 110px) {
    273        result: FAIL;
    274      }
    275    }
    276    #target {
    277      --actual: --f();
    278      --expected: PASS;
    279    }
    280  </style>
    281 </template>
    282 
    283 <template data-name="Nested @container">
    284  <style>
    285    @function --f() {
    286      result: FAIL;
    287      @container (width = 100px) {
    288        @container (not (height = 75px)) {
    289          result: PASS;
    290        }
    291        @container (height: 75px) {
    292          result: FAIL;
    293        }
    294      }
    295    }
    296    #target {
    297      --actual: --f();
    298      --expected: PASS;
    299    }
    300  </style>
    301 </template>
    302 
    303 <template data-name="Nested @container (false)">
    304  <style>
    305    @function --f() {
    306      result: PASS;
    307      @container (width = 200px) {
    308        @container (not (height = 75px)) {
    309          result: FAIL;
    310        }
    311        @container (width: 75px) {
    312          result: FAIL;
    313        }
    314      }
    315    }
    316    #target {
    317      --actual: --f();
    318      --expected: PASS;
    319    }
    320  </style>
    321 </template>
    322 
    323 <template data-name="Locals within @container">
    324  <style>
    325    @function --f() {
    326      --x: FAIL;
    327      @container (width = 100px) {
    328        --x: PASS;
    329      }
    330      result: var(--x);
    331    }
    332    #target {
    333      --actual: --f();
    334      --expected: PASS;
    335    }
    336  </style>
    337 </template>
    338 
    339 <template data-name="@supports within @container">
    340  <style>
    341    @function --f() {
    342      --x: FAIL;
    343      @container (width = 100px) {
    344        @supports (color: green) {
    345          --x: PASS;
    346        }
    347        @supports (not (color: green)) {
    348          --x: FAIL;
    349        }
    350      }
    351      result: var(--x);
    352    }
    353    #target {
    354      --actual: --f();
    355      --expected: PASS;
    356    }
    357  </style>
    358 </template>
    359 
    360 <template data-name="@container within @supports">
    361  <style>
    362    @function --f() {
    363      --x: FAIL;
    364      @supports (color: green) {
    365        @container (width = 100px) {
    366          --x: PASS;
    367        }
    368        @container (width = 75px) {
    369          --x: FAIL;
    370        }
    371      }
    372      result: var(--x);
    373    }
    374    #target {
    375      --actual: --f();
    376      --expected: PASS;
    377    }
    378  </style>
    379 </template>
    380 
    381 <template data-name="@container, @media, @supports">
    382  <style>
    383    @function --f() {
    384      --x: FAIL;
    385      @container (width = 100px) {
    386        @media (width > 0px) {
    387          @supports (color: red) {
    388            --x: PASS;
    389          }
    390        }
    391      }
    392      result: var(--x);
    393    }
    394    #target {
    395      --actual: --f();
    396      --expected: PASS;
    397    }
    398  </style>
    399 </template>
    400 
    401 <template data-name="@supports, @media, @container">
    402  <style>
    403    @function --f() {
    404      --x: FAIL;
    405      @supports (color: red) {
    406        @media (width > 0px) {
    407          @container (width = 100px) {
    408            --x: PASS;
    409          }
    410        }
    411      }
    412      result: var(--x);
    413    }
    414    #target {
    415      --actual: --f();
    416      --expected: PASS;
    417    }
    418  </style>
    419 </template>
    420 
    421 <script>
    422  test_all_templates();
    423 </script>