tor-browser

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

starting-style-cascade.html (4319B)

      1 <!DOCTYPE html>
      2 <title>CSS Transitions Test: Cascading @starting-style</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/css/css-transitions/support/helper.js"></script>
      7 <style>
      8  .color-transition {
      9    transition: color 100s steps(2, start);
     10  }
     11 
     12  @starting-style {
     13    #t1 { color: red; }
     14  }
     15  #t1 { color: green; }
     16 
     17  @starting-style {
     18    div#t2 { color: lime; }
     19  }
     20  #t2 { color: green; }
     21 
     22  #t3 { color: green; }
     23  @starting-style {
     24    #t3 { color: red; }
     25  }
     26  #t3 > div { color: green; }
     27 
     28  #t4 { color: green; }
     29  #t4[hidden] { color: red; }
     30  #t4 > div { color: lime; }
     31  @starting-style {
     32    #t4 > div { color: inherit; }
     33  }
     34 
     35  #t5 { color: green; }
     36  @starting-style {
     37    #t5 { color: black; }
     38  }
     39  #t5 > div { color: lime; }
     40  @starting-style {
     41    #t5 > div { color: inherit; }
     42  }
     43 
     44  #t6 { color: green; }
     45  @starting-style {
     46    #t6 { color: black; }
     47  }
     48  #t6 .color-transition { color: lime; }
     49  @starting-style {
     50    #t6 .color-transition { color: inherit; }
     51  }
     52 
     53 </style>
     54 <div id="t1" hidden class="color-transition"></div>
     55 <div id="t2" hidden class="color-transition"></div>
     56 <div id="t3" hidden>
     57  <div class="color-transition"></div>
     58 </div>
     59 <div id="t4" hidden>
     60  <div class="color-transition"></div>
     61 </div>
     62 <div id="t5" hidden class="color-transition">
     63  <div class="color-transition"></div>
     64 </div>
     65 <div id="t6" hidden class="color-transition">
     66  <div>
     67    <div class="color-transition"></div>
     68  </div>
     69 </div>
     70 <script>
     71  setup(() => {
     72    assert_true(supportsStartingStyle(), "Prerequisite: @starting-style parses");
     73  });
     74 
     75  promise_test(async t => {
     76    await waitForAnimationFrames(2);
     77    t1.removeAttribute("hidden");
     78    await waitForAnimationFrames(2);
     79    assert_equals(getComputedStyle(t1).color, "rgb(0, 128, 0)",
     80                  "No transition of color");
     81  }, "Overridden @starting-style - order of appearance");
     82 
     83  promise_test(async t => {
     84    t2.removeAttribute("hidden");
     85    await waitForAnimationFrames(2);
     86    assert_equals(getComputedStyle(t2).color, "rgb(0, 192, 0)",
     87                  "Transition of color");
     88  }, "@starting-style with higher specificity");
     89 
     90  promise_test(async t => {
     91    t3.removeAttribute("hidden");
     92    await waitForAnimationFrames(2);
     93    assert_equals(getComputedStyle(t3.firstElementChild).color, "rgb(0, 128, 0)",
     94                  "No transition of color");
     95  }, "Starting style does not inherit from parent starting style");
     96 
     97  promise_test(async t => {
     98    assert_equals(getComputedStyle(t4).color, "rgb(255, 0, 0)",
     99                  "Parent transition started");
    100    t4.removeAttribute("hidden");
    101    await waitForAnimationFrames(2);
    102    assert_equals(getComputedStyle(t4).color, "rgb(0, 128, 0)",
    103                  "Parent changed to green");
    104    assert_equals(getComputedStyle(t4.firstElementChild).color, "rgb(0, 192, 0)",
    105                  "Transition started from parent's after-change style color");
    106  }, "Starting style inheriting from parent's after-change style");
    107 
    108  promise_test(async t => {
    109    t5.removeAttribute("hidden");
    110    await waitForAnimationFrames(2);
    111    assert_equals(getComputedStyle(t5).color, "rgb(0, 64, 0)",
    112                  "Parent transition started");
    113    assert_equals(getComputedStyle(t5.firstElementChild).color, "rgb(0, 192, 0)",
    114                  "Transition started from parent's after-change style color");
    115  }, "Starting style inheriting from parent's after-change style while parent transitioning");
    116 
    117  promise_test(async t => {
    118    t6.removeAttribute("hidden");
    119    await waitForAnimationFrames(2);
    120    assert_equals(getComputedStyle(t6).color, "rgb(0, 64, 0)",
    121                  "Parent transition started");
    122    assert_equals(getComputedStyle(t6.firstElementChild).color, "rgb(0, 64, 0)",
    123                  "Inherited effect from parent transition");
    124    assert_equals(getComputedStyle(t6.firstElementChild.firstElementChild).color, "rgb(0, 192, 0)",
    125                  "Transition started from parent's after-change style color, inherited from ancestors after-change color");
    126  }, "Starting style inheriting from parent's after-change style while ancestor is transitioning");
    127 
    128 </script>