tor-browser

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

two-element-custom-property-animation.https.html (2714B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
      4 <link rel="match" href="two-element-custom-property-animation-ref.html">
      5 <style>
      6 #footainer {
      7  width: 200px;
      8  height: 200px;
      9 }
     10 .fooanimate {
     11  background-image: paint(foo);
     12  /* Use long animations that start at 50% progress where the slope of the
     13     selected timing function is zero. By setting up the animations in this way,
     14     we accommodate lengthy delays in running the test without a potential drift
     15     in the animated properties values. This is important for avoiding flakes,
     16     especially on debug builds. The screenshots are taken as soon as the
     17     animations are ready, thus the long animation duration has no bearing on
     18     the actual duration of the test. */
     19  animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s;
     20 }
     21 #bartainer {
     22  width: 200px;
     23  height: 200px;
     24 }
     25 .baranimate {
     26  background-image: paint(bar);
     27  animation: colorChange 1000000s cubic-bezier(0,1,1,0) -500000s;
     28 }
     29 @keyframes expand {
     30  0% { --foo: 0; }
     31  100% { --foo: 200; }
     32 }
     33 @keyframes colorChange {
     34  0% { --bar: rgb(200, 0, 0); }
     35  100% { --bar: rgb(0, 200, 0); }
     36 }
     37 </style>
     38 <script src="/common/reftest-wait.js"></script>
     39 <script src="/common/worklet-reftest.js"></script>
     40 <body>
     41 <div id="footainer"></div>
     42 <div id="bartainer"></div>
     43 
     44 <script id="code" type="text/worklet">
     45 registerPaint('foo', class {
     46  static get inputProperties() { return ['--foo']; }
     47  paint(ctx, geom, properties) {
     48    let fooValue = parseFloat(properties.get('--foo').toString());
     49    ctx.fillStyle = 'green';
     50    ctx.fillRect(0, 0, fooValue, fooValue);
     51  }
     52 });
     53 
     54 registerPaint('bar', class {
     55  static get inputProperties() { return ['--bar']; }
     56  paint(ctx, geom, properties) {
     57    ctx.fillStyle = properties.get('--bar').toString();
     58    ctx.fillRect(0, 0, 200, 200);
     59  }
     60 });
     61 </script>
     62 
     63 <script type="text/javascript">
     64 CSS.registerProperty({
     65  name: '--foo',
     66  syntax: '<number>',
     67  initialValue: '0',
     68  inherits: false
     69 });
     70 CSS.registerProperty({
     71  name: '--bar',
     72  syntax: '<color>',
     73  initialValue: 'rgb(0, 0, 0)',
     74  inherits: false
     75 });
     76 </script>
     77 
     78 <script>
     79 var code = document.getElementById('code').textContent;
     80 var blob = new Blob([code], {type: 'text/javascript'});
     81 CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
     82  document.getElementById('footainer').classList.add('fooanimate');
     83  document.getElementById('bartainer').classList.add('baranimate');
     84  const animations = document.getAnimations();
     85  // Wait for all animations to start before completing the test.
     86  Promise.all([animations[0].ready, animations[1].ready]).then(() => {
     87      takeScreenshot();
     88  });
     89 });
     90 </script>
     91 </body>
     92 </html>