Quelle test_transitions_cancel_near_end.html Sprache: HTML

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

<!DOCTYPE HTML>
<html>

<head>
  <title>Test for Bug 613888</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  <style type="text/css">
    #animated-elements-container > span {
      color: black;
      background: white;
      transition:
        color 10s ease-out,
        background 1s ease-out;
    }
    #animated-elements-container > span.another {
      color: white;
      background: black;
    }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a>
<pre id="animated-elements-container">
  <span should-restyle="true">canceled on a half of the animation</span>
  <span should-restyle="true">canceled too fast, and restyled on transitionend</span>
  <span>canceled too fast, but not restyled on transitionend</span>
</pre>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for Bug 613888: that we don't cancel transitions when they're
    about to end (current interpolated value rounds to ending value) and
    they get an unrelated style change.  **/

var count_remaining = 6;

window.addEventListener('load', function() {
  var cases = Array.from(document.querySelectorAll('#animated-elements-container > span'));

  cases.forEach(function(aTarget) {
    aTarget.addEventListener('transitionend', function(aEvent) {
      if (aTarget.hasAttribute('should-restyle'))
        aTarget.style.outline = '1px solid';
      var attr = 'transitionend-' + aEvent.propertyName;
      if (aTarget.hasAttribute(attr)) {
        // It's possible, given bad timers, that we might get a
        // transition that completed before we reversed it, which could
        // lead to two transitionend events for the same thing.  We
        // don't want to decrement count_remaining in this case.
        return;
      }
      aTarget.setAttribute(attr, "true");
      if (--count_remaining == 0) {
        cases.forEach(function(aCase, aIndex) {
          ok(aCase.hasAttribute('transitionend-color'),
             "transitionend for color was fired for case "+aIndex);
          ok(aCase.hasAttribute('transitionend-background-color'),
             "transitionend for background-color was fired for case "+aIndex);
        });
        SimpleTest.finish();
      }
    });
  });

  cases.forEach(aCase => aCase.className = 'another' );

  window.setTimeout(() => cases[0].className = '', 500);
  window.setTimeout(() => cases[1].className = cases[2].className = '', 250);

});

SimpleTest.waitForExplicitFinish();
SimpleTest.requestFlakyTimeout("untriaged");

</script>
</pre>
</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.