outline-018.html (1929B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: non interpolable outline-style animation</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-outline-style"> 6 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 @keyframes outline-anim { 11 from { 12 outline: solid 1px black; 13 } 14 to { 15 outline: dotted 1px black; 16 } 17 } 18 19 #test1 { 20 animation: outline-anim 3s 0s paused linear; 21 outline: solid 1px black; 22 } 23 #test2 { 24 animation: outline-anim 3s -1s paused linear; 25 outline: solid 1px black; 26 } 27 #test3 { 28 animation: outline-anim 3s -2s paused linear; 29 outline: solid 1px black; 30 } 31 #test4 { 32 animation: outline-anim 3s 0s paused reverse linear; 33 outline: solid 1px black; 34 } 35 </style> 36 <body> 37 <div id="test1"></div> 38 <div id="test2"></div> 39 <div id="test3"></div> 40 <div id="test4"></div> 41 <div id=log></div> 42 43 <script> 44 // outline being a render-only property, its animation can be done off the main thread 45 // checking the values after the first paint is safer, hence requestAnimationFrame 46 setup({explicit_done:true}); 47 requestAnimationFrame(function() { 48 // synchronous tests being run during the page's first paint 49 test( 50 function(){ 51 var tests = document.querySelectorAll("div[id^='test']"); 52 assert_equals(getComputedStyle(tests[0]).outlineStyle, 'solid'); 53 assert_equals(getComputedStyle(tests[1]).outlineStyle, 'solid'); 54 assert_equals(getComputedStyle(tests[2]).outlineStyle, 'dotted'); 55 assert_equals(getComputedStyle(tests[3]).outlineStyle, 'dotted'); 56 }, "outline-style is animated as a discrete type" 57 ); 58 done(); 59 }); 60 </script> 61 </body>