Quelle test_animations_styles_on_event.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_animations_styles_on_event.html

<!DOCTYPE html>
<html>
<head>
  <title>
    Test that mouse movement immediately after finish() should involve
    restyling for finished state (Bug 1228137)
  </title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script type="application/javascript"
    src="animation_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  <style type="text/css">
    @keyframes anim {
      0% { transform: translateX(0px) }
      100% { transform: translateX(100px) }
    }
    .target {
      /* The animation target needs geometry in order to qualify for OMTA */
      width: 100px;
      height: 100px;
      background-color: white;
    }
  </style>
</head>
<body>
<div id="display"></div>
<script type="application/javascript">
SimpleTest.waitForExplicitFinish();

window.onload = function () {
  // To avoid the effect that newly created element's styles are
  // not updated immediately, we need to add an element without
  // animation properties first.
  var [ div ] = new_div("");
  div.setAttribute("id", "bug1228137");

  waitForPaints().then(function() {
    var initialRect = div.getBoundingClientRect();

    // Now we can set animation properties.
    div.style.animation = "anim 100s linear forwards";

    div.addEventListener("mousemove", function(event) {
      is(event.target.id, "bug1228137",
         "The target of the animation should receive the mouse move event " +
         "on the position of the animation's effect end.");
      done_div();
      SimpleTest.finish();
    });

    var animation = div.getAnimations()[0];
    animation.finish();

    // Mouse over where the animation is positioned at finished state.
    // We can't use synthesizeMouse here since synthesizeMouse causes
    // layout flush. We need to check the position without explicit flushes.
    synthesizeMouseAtPoint(initialRect.left + initialRect.width / 2 + 100,
                           initialRect.top + initialRect.height / 2,
                           { type: "mousemove" }, window);
  });
};
</script>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.10 Sekunden (vorverarbeitet) ¤

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.