Content - 54155e4b8aad8f4c7d63bda4a02616a526233987 - 4c959ef/css/css-ui/outline-017.html

visit type:

Tip revision: bf21aa6a53367f9ad69c1f8c78d66c20270bbeaf authored by Andrea Marchesini on 04 April 2018, 17:43:55 UTC
setTimeout/setInterval should silently fail if the worker is shutting down,

Tip revision: bf21aa6

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 rgb(1,0,0);
    outline-offset: 1px;
  }
  to {
    outline: solid 3px rgb(3,0,0);
    outline-offset: 3px;
  }
}

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

  <script>
    test(
      function(){
        var test = document.getElementById("test");
        assert_equals(getComputedStyle(test).outlineColor, 'rgb(2, 0, 0)');
      }, "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");
</script>
</body>

Browse the archive

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