tor-browser

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

custom-property-transition-number.html (1853B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="../resources/utils.js"></script>
      6 <div id="target"></div>
      7 <script>
      8 
      9 transition_test({
     10  syntax: "<number>",
     11  from: "100",
     12  to: "200",
     13  expected: "150"
     14 }, 'A custom property of type <number> can yield a CSS Transition');
     15 
     16 // This tests if there is a transition to a random floating-point number.
     17 promise_test(async () => {
     18  const customProperty = generate_name();
     19 
     20  CSS.registerProperty({
     21    name: customProperty,
     22    syntax: "<number>",
     23    inherits: false,
     24    initialValue: "100"
     25  });
     26 
     27  assert_equals(
     28    getComputedStyle(target).getPropertyValue(customProperty),
     29    "100",
     30    "Element has the expected initial value"
     31  );
     32 
     33  const transitionEventPromise = new Promise(resolve => {
     34    let listener = event => {
     35        target.removeEventListener("transitionrun", listener);
     36        assert_equals(
     37          event.propertyName,
     38          customProperty,
     39          "TransitionEvent has the expected property name"
     40        );
     41        resolve();
     42    };
     43    target.addEventListener("transitionrun", listener);
     44  });
     45 
     46  target.style.transition = `${customProperty} 1s -500ms linear`;
     47  target.style.setProperty(customProperty, "112.24859");
     48 
     49  const animations = target.getAnimations();
     50  assert_equals(animations.length, 1, "A single animation is running");
     51 
     52  const transition = animations[0];
     53  assert_class_string(
     54    transition,
     55    "CSSTransition",
     56    "A CSSTransition is running"
     57  );
     58  assert_equals(transition.playState, "running", "The transition is running");
     59 
     60  await transitionEventPromise;
     61 }, 'The to value of a custom property to a random floating-point number can ' +
     62   'yield a CSS Transition');
     63 
     64 </script>