tor-browser

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

registered-property-revert.html (2383B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1" />
      3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#default" />
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7    #parent {
      8        --inherited: 10px;
      9        --non-inherited: 10px;
     10    }
     11    #child {
     12        --inherited: 20px;
     13        --non-inherited: 20px;
     14        --inherited: revert;
     15        --non-inherited: revert;
     16    }
     17 
     18    @keyframes revert_animation {
     19        from {
     20            --animated-inherited: revert;
     21            --animated-non-inherited: revert;
     22        }
     23        to {
     24            --animated-inherited: 100px;
     25            --animated-non-inherited: 100px;
     26        }
     27    }
     28 
     29    #animated_parent {
     30        --animated-inherited: 0px;
     31    }
     32    #animated_child {
     33        animation: revert_animation 10s -5s linear paused;
     34    }
     35 </style>
     36 <div id=parent>
     37    <div id=child>
     38    </div>
     39 </div>
     40 <div id=animated_parent>
     41    <div id=animated_child>
     42    </div>
     43 </div>
     44 <script>
     45 
     46 CSS.registerProperty({
     47    name: "--inherited",
     48    syntax: "<length>",
     49    initialValue: "0px",
     50    inherits: true
     51 });
     52 
     53 CSS.registerProperty({
     54    name: "--non-inherited",
     55    syntax: "<length>",
     56    initialValue: "0px",
     57    inherits: false
     58 });
     59 
     60 CSS.registerProperty({
     61    name: "--animated-non-inherited",
     62    syntax: "<length>",
     63    initialValue: "0px",
     64    inherits: false
     65 });
     66 
     67 CSS.registerProperty({
     68    name: "--animated-inherited",
     69    syntax: "<length>",
     70    initialValue: "10000px",
     71    inherits: true
     72 });
     73 
     74 test(function(){
     75    let cs = getComputedStyle(child);
     76    assert_equals(cs.getPropertyValue('--inherited'), '10px');
     77 }, 'Inherited registered custom property can be reverted');
     78 
     79 test(function(){
     80    let cs = getComputedStyle(child);
     81    assert_equals(cs.getPropertyValue('--non-inherited'), '0px');
     82 }, 'Non-inherited registered custom property can be reverted');
     83 
     84 test(function(){
     85    let cs = getComputedStyle(animated_child);
     86    assert_equals(cs.getPropertyValue('--animated-non-inherited'), '50px');
     87 }, 'Non-inherited registered custom property can be reverted in animation');
     88 
     89 test(function(){
     90    let cs = getComputedStyle(animated_child);
     91    assert_equals(cs.getPropertyValue('--animated-inherited'), '50px');
     92 }, 'Inherited registered custom property can be reverted in animation');
     93 
     94 </script>