Quelle outline-017.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/web-platform/tests/css/css-ui/outline-017.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: interpolable outline-* properties animation</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-outline-style">
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes outline-anim {
  from {
    outline: solid 1px rgba(1, 0, 0, 0.5);
    outline-offset: 1px;
  }
  to {
    outline: solid 3px rgba(3, 0, 0, 0.5);
    outline-offset: 3px;
  }
}

#test {
  animation: outline-anim 3s -1.5s paused linear;
  outline: solid 1px rgba(1, 0, 0, 0.5);
  outline-offset: 1px;
}
</style>
<body>
  <div id="test"></div>
  <div id=log></div>

  <script>
    // outline being a render-only property, its animation can be done off the main thread
    // checking the values after the first paint is safer, hence requestAnimationFrame
    setup({explicit_done:true});
    requestAnimationFrame(function() {
        // synchronous tests being run during the page's first paint
        test(
          function(){
            var test = document.getElementById("test");
            assert_equals(getComputedStyle(test).outlineColor, 'rgba(2, 0, 0, 0.5)');
          }, "outline-color is animated as a color");
        test(
          function(){
            var test = document.getElementById("test");
            assert_equals(getComputedStyle(test).outlineWidth, '2px');
          }, "outline-width is animated as a length");
        test(
          function(){
            var test = document.getElementById("test");
            assert_equals(getComputedStyle(test).outlineOffset, '2px');
          }, "outline-offset is animated as a length");
        done();
    });
</script>
</body>

quality100%

¤ Dauer der Verarbeitung: 0.40 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 ist noch experimentell.