tor-browser

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

side-effects-of-animations-current.html (4628B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>
      4  Current animations should effectively apply will-change (i.e. force a
      5  stacking context)
      6 </title>
      7 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section">
      8 <link rel="author" href="mailto:bokan@chromium.org">
      9 <link rel="match" href="side-effects-of-animations-current-ref.html">
     10 <script src="/common/reftest-wait.js"></script>
     11 <script src="../testcommon.js"></script>
     12 <script src="resources/side-effects-common.js"></script>
     13 <style>
     14  .testcase {
     15    position: relative;
     16    margin: 2px;
     17    border: 1px solid black;
     18    width: 250px;
     19    height: 25px;
     20  }
     21  .container {
     22    background-color: lightgrey;
     23    margin: 4px;
     24    display: flex;
     25    width: 600px;
     26    flex-direction: row;
     27    justify-content: flex-end;
     28    align-items: center;
     29  }
     30  .label {
     31    flex-grow: 1;
     32  }
     33  .target {
     34    width: 100%;
     35    height: 100%;
     36  }
     37  .absolutebox {
     38    position: absolute;
     39    top: 0;
     40    left: 0;
     41    width: 100%;
     42    height: 100%;
     43  }
     44  .pass {
     45    background-color: limegreen;
     46  }
     47  .fail {
     48    background-color: red;
     49  }
     50 </style>
     51 
     52 <script>
     53 onload = takeScreenshotOnAnimationsReady;
     54 </script>
     55 
     56 <!-- OPACITY -->
     57 
     58 <!-- Is current - before phase playing forwards -->
     59 <div class="container">
     60  <div class="label">Opacity - before phase</div>
     61  <div class="testcase" id="opacity-before">
     62    <div class="absolutebox fail"></div>
     63    <div class="target pass"></div>
     64  </div>
     65 </div>
     66 <script>
     67  setupAnimation('#opacity-before', STATE_CURRENT, PROPERTY_OPACITY, PHASE_BEFORE);
     68 </script>
     69 
     70 <!-- Is current - in play-->
     71 <div class="container">
     72  <div class="label">Opacity - active phase</div>
     73  <div class="testcase" id="opacity-active">
     74    <div class="absolutebox fail"></div>
     75    <div class="target pass"></div>
     76  </div>
     77 </div>
     78 <script>
     79  setupAnimation('#opacity-active', STATE_CURRENT, PROPERTY_OPACITY, PHASE_ACTIVE);
     80 </script>
     81 
     82 <!-- Is current - after phase playing backwards-->
     83 <div class="container">
     84  <div class="label">Opacity - after phase</div>
     85  <div class="testcase" id="opacity-after">
     86    <div class="absolutebox fail"></div>
     87    <div class="target pass"></div>
     88  </div>
     89 </div>
     90 <script>
     91  setupAnimation('#opacity-after', STATE_CURRENT, PROPERTY_OPACITY, PHASE_AFTER);
     92 </script>
     93 
     94 <!-- TRANSFORM -->
     95 
     96 <!-- Is current - before phase playing forwards -->
     97 <div class="container">
     98  <div class="label">Transform - before phase</div>
     99  <div class="testcase" id="transform-before">
    100    <div class="absolutebox fail"></div>
    101    <div class="target pass"></div>
    102  </div>
    103 </div>
    104 <script>
    105  setupAnimation('#transform-before', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_BEFORE);
    106 </script>
    107 
    108 <!-- Is current - in play-->
    109 <div class="container">
    110  <div class="label">Transform - active phase</div>
    111  <div class="testcase" id="transform-active">
    112    <div class="absolutebox fail"></div>
    113    <div class="target pass"></div>
    114  </div>
    115 </div>
    116 <script>
    117  setupAnimation('#transform-active', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_ACTIVE);
    118 </script>
    119 
    120 <!-- Is current - after phase playing backwards-->
    121 <div class="container">
    122  <div class="label">Transform - after phase</div>
    123  <div class="testcase" id="transform-after">
    124    <div class="absolutebox fail"></div>
    125    <div class="target pass"></div>
    126  </div>
    127 </div>
    128 <script>
    129  setupAnimation('#transform-after', STATE_CURRENT, PROPERTY_TRANSFORM, PHASE_AFTER);
    130 </script>
    131 
    132 <!-- BACKGROUND COLOR -->
    133 <!--
    134  unlike opacity and transform, background color shouldn't create a stacking
    135  context.
    136 -->
    137 
    138 <!-- Is current - before phase playing forwards -->
    139 <div class="container">
    140  <div class="label">Background-color - before phase</div>
    141  <div class="testcase" id="bgcolor-before">
    142    <div class="absolutebox pass"></div>
    143    <div class="target fail"></div>
    144  </div>
    145 </div>
    146 <script>
    147  setupAnimation('#bgcolor-before', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_BEFORE);
    148 </script>
    149 
    150 <!-- Is current - in play-->
    151 <div class="container">
    152  <div class="label">Background-color - active phase</div>
    153  <div class="testcase" id="bgcolor-active">
    154    <div class="absolutebox pass"></div>
    155    <div class="target fail"></div>
    156  </div>
    157 </div>
    158 <script>
    159  setupAnimation('#bgcolor-active', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_ACTIVE);
    160 </script>
    161 
    162 <!-- Is current - after phase playing backwards-->
    163 <div class="container">
    164  <div class="label">Background-color - after phase</div>
    165  <div class="testcase" id="bgcolor-after">
    166    <div class="absolutebox pass"></div>
    167    <div class="target fail"></div>
    168  </div>
    169 </div>
    170 <script>
    171  setupAnimation('#bgcolor-after', STATE_CURRENT, PROPERTY_BGCOLOR, PHASE_AFTER);
    172 </script>
    173 
    174 </html>