Quelle file_domwindowutils_animation.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/base/test/file_domwindowutils_animation.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DOMWindowUtils test with animation</title>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script src="/tests/dom/animation/test/testcommon.js"></script>
</head>
<body>
<script type="application/javascript">

const SimpleTest = window.opener.SimpleTest;
const utils = SpecialPowers.getDOMWindowUtils(window);
const next = window.opener.next;
const is = window.opener.is;
const ok = window.opener.ok;

function addStyle(rules) {
  const extraStyle = document.createElement("style");
  document.head.appendChild(extraStyle);
  rules.forEach(rule => {
    extraStyle.sheet.insertRule(rule, extraStyle.sheet.cssRules.length);
  });
}

function deleteStyle() {
  document.head.querySelector("style").remove();
}

let propertyIndex = 0;

function test_getUnanimatedComputedStyle() {
  const name = `--property-${++propertyIndex}`;
  CSS.registerProperty({
    name,
    syntax: "",
    initialValue: "2px",
    inherits: false,
  });
  [
    {
      property: "opacity",
      keyframes: [1, 0],
      expectedInitialStyle: "1",
      expectedDuringTransitionStyle: "0",
      isDiscrete: false,
    },
    {
      property: name,
      keyframes: ["1px", "10px"],
      expectedInitialStyle: "2px",
      expectedDuringTransitionStyle: "2px",
      isDiscrete: true,
    },
    {
      property: "clear",
      keyframes: ["left", "inline-end"],
      expectedInitialStyle: "none",
      expectedDuringTransitionStyle: "inline-end",
      isDiscrete: true,
    },
  ].forEach(testcase => {
    const { property, keyframes, expectedInitialStyle,
            expectedDuringTransitionStyle, isDiscrete } = testcase;

    [null, "unset", "initial", "inherit"].forEach(initialStyle => {
      const scriptAnimation = target => {
        return target.animate({ [property]: keyframes }, 1000);
      }
      checkUnanimatedComputedStyle(property, initialStyle, null,
                                   expectedInitialStyle, expectedInitialStyle,
                                   scriptAnimation, "script animation");

      const cssAnimationStyle = `@keyframes cssanimation {`
                                + ` from { ${property}: ${ keyframes[0] }; }`
                                + ` to { ${property}: ${ keyframes[1] }; } }`;
      addStyle([cssAnimationStyle]);
      const cssAnimation = target => {
        target.style.animation = "cssanimation 1s";
        return target.getAnimations()[0];
      }
      checkUnanimatedComputedStyle(property, initialStyle, null,
                                   expectedInitialStyle, expectedInitialStyle,
                                   cssAnimation, "CSS Animations");
      deleteStyle();

      // We don't support discrete animations for CSS Transitions yet.
      // (bug 1320854)
      if (!isDiscrete) {
        const cssTransition = target => {
          target.style[property] = keyframes[0];
          target.style.transition =
            `${ property } 1s`;
          window.getComputedStyle(target)[property];
          target.style[property] = keyframes[1];
          return target.getAnimations()[0];
        }
        checkUnanimatedComputedStyle(property, initialStyle, null,
                                     expectedInitialStyle,
                                     expectedDuringTransitionStyle,
                                     cssTransition, "CSS Transitions");
      }

      addStyle([cssAnimationStyle,
                ".pseudo::before { content: '' }",
                ".animation::before { animation: cssanimation 1s }"]);
      const pseudoAnimation = target => {
        target.classList.add("animation");
        return target.getAnimations({ subtree: true })[0];
      }
      checkUnanimatedComputedStyle(property, initialStyle, "::before",
                                   expectedInitialStyle, expectedInitialStyle,
                                   pseudoAnimation, "Animation at pseudo");
      deleteStyle();
    });
  });

  const div = document.createElement("div");
  document.body.appendChild(div);

  SimpleTest.doesThrow(
    () => utils.getUnanimatedComputedStyle(div, null, "background", utils.FLUSH_NONE),
    "NS_ERROR_INVALID_ARG",
    "Shorthand property should throw");

  SimpleTest.doesThrow(
    () => utils.getUnanimatedComputedStyle(div, null, "invalid", utils.FLUSH_NONE),
    "NS_ERROR_INVALID_ARG",
    "Invalid property should throw");

  SimpleTest.doesThrow(
    () => utils.getUnanimatedComputedStyle(null, null, "opacity", utils.FLUSH_NONE),
    "NS_ERROR_INVALID_ARG",
    "Null element should throw");

  SimpleTest.doesThrow(
    () => utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_LAYOUT),
    "NS_ERROR_INVALID_ARG",
    "FLUSH_LAYOUT option should throw");

  SimpleTest.doesThrow(
    () => utils.getUnanimatedComputedStyle(div, "::before", "opacity", utils.FLUSH_NONE),
    "NS_ERROR_FAILURE",
    "Non-existent pseudo should throw");

  // Flush styles since getUnanimatedComputedStyle flushes pending styles even
  // with FLUSH_NONE option if the element hasn't yet styled.
  getComputedStyle(div).opacity;

  div.style.opacity = "0";
  is(utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_NONE),
     "1",
     "getUnanimatedComputedStyle with FLUSH_NONE should not flush pending styles");

  is(utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_STYLE),
     "0",
     "getUnanimatedComputedStyle with FLUSH_STYLE should flush pending styles");

  div.remove();

  test_needsFlushWithThrottledAnimations();
}

function checkUnanimatedComputedStyle(property, initialStyle, pseudoType,
                                      expectedBeforeAnimation,
                                      expectedDuringAnimation,
                                      animate, animationType) {
  const div = document.createElement("div");
  document.body.appendChild(div);

  if (initialStyle) {
    div.style[property] = initialStyle;
  }
  if (pseudoType) {
    div.classList.add("pseudo");
  }

  is(utils.getUnanimatedComputedStyle(div, pseudoType, property, utils.FLUSH_STYLE),
     expectedBeforeAnimation,
     `'${ property }' property with '${ initialStyle }' style `
     + `should be '${ expectedBeforeAnimation }' `
     + `before animating by ${ animationType }`);

  const animation = animate(div);
  animation.currentTime = 500;
  is(utils.getUnanimatedComputedStyle(div, pseudoType, property, utils.FLUSH_STYLE),
     expectedDuringAnimation,
     `'${ property }' property with '${ initialStyle }' style `
     + `should be '${ expectedDuringAnimation }' `
     + `even while animating by ${ animationType }`);

  div.remove();
}

function test_needsFlushWithThrottledAnimations() {
  const div = document.createElement("div");
  div.style = "width: 100px; height: 100px; background-color: blue;";
  document.body.appendChild(div);

  const animation = div.animate({ opacity: [ 0, 1 ] },
                                { duration: 100000, iterations: Infinity });
  waitForAnimationReadyToRestyle(animation).then(() => {
    ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
        "Opacity animation should run on the compositor");

    // FIXME! Bug 1442861: We should make sure needsFlush() returns true
    // before flusing layout.
    //ok(utils.needsFlush(SpecialPowers.Ci.nsIDOMWindowUtils.FLUSH_STYLE),
    //   "needsFlush should return true if there is an animation on the compositor");

    // Flush layout.
    document.documentElement.getBoundingClientRect();

    ok(!utils.needsFlush(SpecialPowers.Ci.nsIDOMWindowUtils.FLUSH_STYLE),
        "needsFlush should return false after flushing layout");

    div.remove();
    next();
    window.close();
  });
}

window.addEventListener("load", test_getUnanimatedComputedStyle);

</script>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.3 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.