tor-browser

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

function-layer.html (2376B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: @function within @layer</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 <div id=target></div>
      9 <div id=main></div>
     10 
     11 <!-- To pass, a test must produce matching computed values for --actual and
     12     --expected on #target. -->
     13 
     14 <template data-name="Single function within anonymous layer">
     15  <style>
     16    @layer {
     17      @function --f() { result: 1px; }
     18    }
     19    #target {
     20      --actual: --f();
     21      --expected: 1px;
     22    }
     23  </style>
     24 </template>
     25 
     26 <template data-name="Last anonymous layer wins">
     27  <style>
     28    @layer {
     29      @function --f() { result: 1px; }
     30    }
     31    @layer {
     32      @function --f() { result: 2px; }
     33    }
     34    #target {
     35      --actual: --f();
     36      --expected: 2px;
     37    }
     38  </style>
     39 </template>
     40 
     41 <template data-name="Unlayered styles win">
     42  <style>
     43    @layer {
     44      @function --f() { result: 1px; }
     45    }
     46    @layer {
     47      @function --f() { result: 2px; }
     48    }
     49    @function --f() { result: 3px; }
     50    #target {
     51      --actual: --f();
     52      --expected: 3px;
     53    }
     54  </style>
     55 </template>
     56 
     57 <template data-name="Unlayered styles win, reverse">
     58  <style>
     59    @function --f() { result: 3px; }
     60    @layer {
     61      @function --f() { result: 1px; }
     62    }
     63    @layer {
     64      @function --f() { result: 2px; }
     65    }
     66    #target {
     67      --actual: --f();
     68      --expected: 3px;
     69    }
     70  </style>
     71 </template>
     72 
     73 <template data-name="Single named layer">
     74  <style>
     75    @layer base {
     76      @function --f() { result: 10px; }
     77    }
     78    #target {
     79      --actual: --f();
     80      --expected: 10px;
     81    }
     82  </style>
     83 </template>
     84 
     85 <template data-name="Named layers">
     86  <style>
     87    @layer base {
     88      @function --f() { result: 10px; }
     89    }
     90    @layer theme {
     91      @function --f() { result: 20px; }
     92    }
     93    #target {
     94      --actual: --f();
     95      --expected: 20px;
     96    }
     97  </style>
     98 </template>
     99 
    100 <template data-name="Named layers, reordered">
    101  <style>
    102    @layer theme, base;
    103 
    104    @layer base {
    105      @function --f() { result: 10px; } /* Winner */
    106    }
    107    @layer theme {
    108      @function --f() { result: 20px; }
    109    }
    110    #target {
    111      --actual: --f();
    112      --expected: 10px;
    113    }
    114  </style>
    115 </template>
    116 
    117 <script>
    118  test_all_templates();
    119 </script>