tor-browser

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

browser_animation_animated-property-name.js (3466B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test the following animated property name component features:
      7 // * name of property
      8 // * display compositor sign when the property was running on compositor.
      9 // * display warning when the property is runnable on compositor but was not.
     10 
     11 async function test_element(className, data) {
     12  await addTab(URL_ROOT + "doc_simple_animation.html");
     13  await removeAnimatedElementsExcept([className]);
     14  const { panel } = await openAnimationInspector();
     15 
     16  info("Checking animated property name component");
     17  const animatedPropertyNameEls = panel.querySelectorAll(
     18    ".animated-property-name"
     19  );
     20  is(
     21    animatedPropertyNameEls.length,
     22    data.length,
     23    `Number of animated property name elements should be ${data.length}`
     24  );
     25 
     26  for (const [
     27    index,
     28    animatedPropertyNameEl,
     29  ] of animatedPropertyNameEls.entries()) {
     30    const { property, isOnCompositor, isWarning } = data[index];
     31 
     32    info(`Checking text content for ${property}`);
     33 
     34    const spanEl = animatedPropertyNameEl.querySelector("span");
     35    ok(
     36      spanEl,
     37      `<span> element should be in animated-property-name of ${property}`
     38    );
     39    is(spanEl.textContent, property, `textContent should be ${property}`);
     40 
     41    info(`Checking compositor sign for ${property}`);
     42 
     43    if (isOnCompositor) {
     44      ok(
     45        animatedPropertyNameEl.classList.contains("compositor"),
     46        "animatedPropertyNameEl should has .compositor class"
     47      );
     48      isnot(
     49        getComputedStyle(spanEl, "::before").width,
     50        "auto",
     51        "width of ::before pseud should not be auto"
     52      );
     53    } else {
     54      ok(
     55        !animatedPropertyNameEl.classList.contains("compositor"),
     56        "animatedPropertyNameEl should not have .compositor class"
     57      );
     58      is(
     59        getComputedStyle(spanEl, "::before").width,
     60        "auto",
     61        "width of ::before pseud should be auto"
     62      );
     63    }
     64 
     65    info(`Checking warning for ${property}`);
     66 
     67    if (isWarning) {
     68      ok(
     69        animatedPropertyNameEl.classList.contains("warning"),
     70        "animatedPropertyNameEl should has .warning class"
     71      );
     72      is(
     73        getComputedStyle(spanEl).textDecorationStyle,
     74        "dotted",
     75        "text-decoration-style of spanEl should be 'dotted'"
     76      );
     77      is(
     78        getComputedStyle(spanEl).textDecorationLine,
     79        "underline",
     80        "text-decoration-line of spanEl should be 'underline'"
     81      );
     82    } else {
     83      ok(
     84        !animatedPropertyNameEl.classList.contains("warning"),
     85        "animatedPropertyNameEl should not have .warning class"
     86      );
     87      is(
     88        getComputedStyle(spanEl).textDecorationStyle,
     89        "solid",
     90        "text-decoration-style of spanEl should be 'solid'"
     91      );
     92      is(
     93        getComputedStyle(spanEl).textDecorationLine,
     94        "none",
     95        "text-decoration-line of spanEl should be 'none'"
     96      );
     97    }
     98  }
     99 }
    100 
    101 add_task(async function compositor_notall() {
    102  await test_element(".compositor-notall", [
    103    {
    104      property: "--ball-color",
    105    },
    106    {
    107      property: "opacity",
    108      isOnCompositor: true,
    109    },
    110    {
    111      property: "transform",
    112      isOnCompositor: true,
    113    },
    114    {
    115      property: "width",
    116    },
    117  ]);
    118 });
    119 
    120 add_task(async function compositor_warning() {
    121  await test_element(".compositor-warning", [
    122    {
    123      property: "opacity",
    124      isWarning: true,
    125    },
    126  ]);
    127 });