tor-browser

browser_animation_keyframes-graph_computed-value-path_easing-hint.js (9338B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test for following easing hint in ComputedValuePath.
// * element existence
// * path segments
// * hint text

const TEST_DATA = [
 {
   targetClass: "no-easing",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "linear",
           path: [
             { x: 0, y: 100 },
             { x: 500, y: 50 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "effect-easing",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "linear",
           path: [
             { x: 0, y: 100 },
             { x: 199, y: 81 },
             { x: 200, y: 80 },
             { x: 399, y: 61 },
             { x: 400, y: 60 },
             { x: 599, y: 41 },
             { x: 600, y: 40 },
             { x: 799, y: 21 },
             { x: 800, y: 20 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "keyframe-easing",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "steps(2)",
           path: [
             { x: 0, y: 100 },
             { x: 499, y: 100 },
             { x: 500, y: 50 },
             { x: 999, y: 50 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "both-easing",
   properties: [
     {
       name: "margin-left",
       expectedHints: [
         {
           hint: "steps(1)",
           path: [
             { x: 0, y: 0 },
             { x: 999, y: 0 },
             { x: 1000, y: 100 },
           ],
         },
       ],
     },
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "steps(2)",
           path: [
             { x: 0, y: 100 },
             { x: 499, y: 100 },
             { x: 500, y: 50 },
             { x: 999, y: 50 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "narrow-keyframes",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "linear",
           path: [
             { x: 0, y: 0 },
             { x: 100, y: 100 },
           ],
         },
         {
           hint: "steps(1)",
           path: [
             { x: 129, y: 100 },
             { x: 130, y: 0 },
           ],
         },
         {
           hint: "linear",
           path: [
             { x: 130, y: 0 },
             { x: 1000, y: 100 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "duplicate-keyframes",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "linear",
           path: [
             { x: 0, y: 0 },
             { x: 500, y: 100 },
           ],
         },
         {
           hint: "",
           path: [
             { x: 500, y: 100 },
             { x: 500, y: 0 },
           ],
         },
         {
           hint: "steps(1)",
           path: [
             { x: 500, y: 0 },
             { x: 999, y: 0 },
             { x: 1000, y: 100 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "color-keyframes",
   properties: [
     {
       name: "color",
       expectedHints: [
         {
           hint: "ease-in",
           rect: {
             x: 0,
             height: 100,
             width: 400,
           },
         },
         {
           hint: "ease-out",
           rect: {
             x: 400,
             height: 100,
             width: 600,
           },
         },
       ],
     },
   ],
 },
 {
   targetClass: "jump-start",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "steps(2, jump-start)",
           path: [
             { x: 0, y: 50 },
             { x: 499, y: 50 },
             { x: 500, y: 0 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "jump-end",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "steps(2)",
           path: [
             { x: 0, y: 100 },
             { x: 499, y: 100 },
             { x: 500, y: 50 },
             { x: 999, y: 50 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
 {
   targetClass: "jump-both",
   properties: [
     {
       name: "opacity",
       expectedHints: [
         {
           hint: "steps(3, jump-both)",
           path: [
             { x: 0, y: 75 },
             { x: 330, y: 75 },
             { x: 340, y: 50 },
             { x: 660, y: 50 },
             { x: 670, y: 25 },
             { x: 999, y: 25 },
             { x: 1000, y: 0 },
           ],
         },
       ],
     },
   ],
 },
];

// Prevent test timeout's on windows code coverage: Bug 1470757
requestLongerTimeout(2);

add_task(async function () {
 await addTab(URL_ROOT + "doc_multi_easings.html");
 await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
 const { animationInspector, panel } = await openAnimationInspector();

 for (const { properties, targetClass } of TEST_DATA) {
   info(`Checking keyframes graph for ${targetClass}`);
   const onDetailRendered = animationInspector.once(
     "animation-keyframes-rendered"
   );
   await clickOnAnimationByTargetSelector(
     animationInspector,
     panel,
     `.${targetClass}`
   );
   await onDetailRendered;

   for (const { name, expectedHints } of properties) {
     const testTarget = `${name} in ${targetClass}`;
     info(`Checking easing hint for ${testTarget}`);
     info(`Checking easing hint existence for ${testTarget}`);
     const hintEls = panel.querySelectorAll(`.${name} .hint`);
     is(
       hintEls.length,
       expectedHints.length,
       `Count of easing hint elements of ${testTarget} ` +
         `should be ${expectedHints.length}`
     );

     for (let i = 0; i < expectedHints.length; i++) {
       const hintTarget = `hint[${i}] of ${testTarget}`;

       info(`Checking ${hintTarget}`);
       const hintEl = hintEls[i];
       const expectedHint = expectedHints[i];

       info(`Checking <title> in ${hintTarget}`);
       const titleEl = hintEl.querySelector("title");
       ok(titleEl, `<title> element in ${hintTarget} should be existence`);
       is(
         titleEl.textContent,
         expectedHint.hint,
         `Content of <title> in ${hintTarget} should be ${expectedHint.hint}`
       );

       let interactionEl = null;
       let displayedEl = null;
       if (expectedHint.path) {
         info(`Checking <path> in ${hintTarget}`);
         interactionEl = hintEl.querySelector("path");
         displayedEl = interactionEl;
         ok(
           interactionEl,
           `The <path> element  in ${hintTarget} should be existence`
         );
         assertPathSegments(interactionEl, false, expectedHint.path);
       } else {
         info(`Checking <rect> in ${hintTarget}`);
         interactionEl = hintEl.querySelector("rect");
         displayedEl = hintEl.querySelector("line");
         ok(
           interactionEl,
           `The <rect> element  in ${hintTarget} should be existence`
         );
         is(
           parseInt(interactionEl.getAttribute("x"), 10),
           expectedHint.rect.x,
           `x of <rect> in ${hintTarget} should be ${expectedHint.rect.x}`
         );
         is(
           parseInt(interactionEl.getAttribute("width"), 10),
           expectedHint.rect.width,
           `width of <rect> in ${hintTarget} should be ${expectedHint.rect.width}`
         );
       }

       info(`Checking interaction for ${hintTarget}`);
       interactionEl.scrollIntoView(false);
       const win = hintEl.ownerGlobal;
       // Mouse over the pathEl.
       ok(
         isStrokeChangedByMouseOver(interactionEl, displayedEl, win),
         `stroke-opacity of hintEl for ${hintTarget} should be 1 ` +
           "while mouse is over the element"
       );
       // Mouse out from pathEl.
       EventUtils.synthesizeMouse(
         panel.querySelector(".animation-toolbar"),
         0,
         0,
         { type: "mouseover" },
         win
       );
       is(
         parseInt(win.getComputedStyle(displayedEl).strokeOpacity, 10),
         0,
         `stroke-opacity of hintEl for ${hintTarget} should be 0 ` +
           "while mouse is out from the element"
       );
     }
   }
 }
});

function isStrokeChangedByMouseOver(mouseoverEl, displayedEl, win) {
 const boundingBox = mouseoverEl.getBoundingClientRect();
 const x = boundingBox.width / 2;

 for (let y = 0; y < boundingBox.height; y++) {
   EventUtils.synthesizeMouse(mouseoverEl, x, y, { type: "mouseover" }, win);

   if (win.getComputedStyle(displayedEl).strokeOpacity == 1) {
     return true;
   }
 }

 return false;
}