Content - 448a11f141eabb3b05fc1c68b7dfac18d659ee42 - a6647f8/css/css-ui/outline-018.html

visit type:

Tip revision: c342c1ccba3e21cadb933bc2c648b37af18c26c8 authored by Mustaq Ahmed on 06 April 2018, 14:14:32 UTC
Make BlueTooth/USB requestDevice non-consuming.

Tip revision: c342c1c

outline-018.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: non interpolable outline-style 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 black;
  }
  to {
    outline: dotted 1px black;
  }
}

#test {
  animation: outline-anim 3s -1.5s paused linear;
  outline: solid 1px black;
}
</style>
<body>
  <div id="test"></div>
  <div id=log></div>

  <script>
    test(
      function(){
        var test = document.getElementById("test");

        test.style.animation = "outline-anim 3s 0s paused linear"
        assert_equals(getComputedStyle(test).outlineStyle, 'solid');
        test.style.animation = "outline-anim 3s -1s paused linear"
        assert_equals(getComputedStyle(test).outlineStyle, 'solid');
        test.style.animation = "outline-anim 3s -2s paused linear"
        assert_equals(getComputedStyle(test).outlineStyle, 'dotted');
        test.style.animation = "outline-anim 3s 0s paused reverse-linear"
        assert_equals(getComputedStyle(test).outlineStyle, 'dotted');
      }, "outline-style is animated as a discrete type");
</script>
</body>

Browse the archive

https://github.com/web-platform-tests/wpt