tor-browser

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

one-custom-property-animation.https.html (2830B)

      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="one-custom-property-animation-ref.html">
      5 <style>
      6 .container {
      7  width: 100px;
      8  height: 100px;
      9 }
     10 @keyframes expand {
     11  0% { --foo: 0; }
     12  100% { --foo: 100; }
     13 }
     14 .animate {
     15  background-image: paint(geometry);
     16  /* Use a long animation that start at 50% progress where the slope of the
     17     selected timing function is zero. By setting up the animation in this way,
     18     we accommodate lengthy delays in running the test without a potential drift
     19     in the animated property value. This is important for avoiding flakes,
     20     especially on debug builds. The screenshots are taken as soon as the
     21     animation is ready, thus the long animation duration has no bearing on
     22     the actual duration of the test. */
     23  animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s;
     24 }
     25 
     26 #canvas-geometry {
     27  background-color: blue;
     28 }
     29 </style>
     30 
     31 <script src="/common/reftest-wait.js"></script>
     32 <script src="/web-animations/testcommon.js"></script>
     33 
     34 <body>
     35 <div id="canvas-geometry" class="container"></div>
     36 <div id="log"></div>
     37 
     38 <script id="code" type="text/worklet">
     39 registerPaint('geometry', class {
     40  static get inputProperties() { return ['--foo']; }
     41  paint(ctx, geom, properties) {
     42    let fooValue = parseFloat(properties.get('--foo').toString());
     43    ctx.fillStyle = 'green';
     44    ctx.fillRect(0, 0, fooValue, fooValue);
     45  }
     46 });
     47 </script>
     48 
     49 <script>
     50 CSS.registerProperty({
     51  name: '--foo',
     52  syntax: '<number>',
     53  initialValue: '0',
     54  inherits: false
     55 });
     56 
     57 function logAssert(condition, message) {
     58  if(!condition) {
     59    document.getElementById("log").innerHTML = "<p>" + message + "</p>";
     60  }
     61 }
     62 
     63 window.onload = async() => {
     64  await waitForCompositorReady();
     65 
     66  const blob = new Blob([document.getElementById('code').textContent],
     67                         {type: 'text/javascript'});
     68  // Load the module and verify it was loaded.
     69  try {
     70    await CSS.paintWorklet.addModule(URL.createObjectURL(blob));
     71  } catch (error) {
     72    logAssert(false, 'The module was not loaded: ' + error.message)
     73  }
     74 
     75  // Check that custom property is registered.
     76  const style = getComputedStyle(document.documentElement);
     77  logAssert(style.getPropertyValue('--foo'),
     78            'Custom property is not registered');
     79 
     80  // Trigger CSS-animation.
     81  document.getElementById('canvas-geometry').classList.add('animate');
     82  const animations = document.getAnimations();
     83  // Verify we have an animation.
     84  logAssert(animations.length == 1, 'Animation was not added');
     85 
     86  // Force failure as a result of image mismatch instead of Timeout if
     87  // animation is not created
     88  if(animations.length == 1){
     89    await animations[0].ready;
     90  }
     91  await waitForAnimationFrames(3);
     92  takeScreenshot();
     93 };
     94 
     95 
     96 </script>
     97 </body>
     98 </html>