outline-017.html (1906B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: interpolable outline-* properties 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 rgba(1, 0, 0, 0.5); 13 outline-offset: 1px; 14 } 15 to { 16 outline: solid 3px rgba(3, 0, 0, 0.5); 17 outline-offset: 3px; 18 } 19 } 20 21 #test { 22 animation: outline-anim 3s -1.5s paused linear; 23 outline: solid 1px rgba(1, 0, 0, 0.5); 24 outline-offset: 1px; 25 } 26 </style> 27 <body> 28 <div id="test"></div> 29 <div id=log></div> 30 31 <script> 32 // outline being a render-only property, its animation can be done off the main thread 33 // checking the values after the first paint is safer, hence requestAnimationFrame 34 setup({explicit_done:true}); 35 requestAnimationFrame(function() { 36 // synchronous tests being run during the page's first paint 37 test( 38 function(){ 39 var test = document.getElementById("test"); 40 assert_equals(getComputedStyle(test).outlineColor, 'rgba(2, 0, 0, 0.5)'); 41 }, "outline-color is animated as a color"); 42 test( 43 function(){ 44 var test = document.getElementById("test"); 45 assert_equals(getComputedStyle(test).outlineWidth, '2px'); 46 }, "outline-width is animated as a length"); 47 test( 48 function(){ 49 var test = document.getElementById("test"); 50 assert_equals(getComputedStyle(test).outlineOffset, '2px'); 51 }, "outline-offset is animated as a length"); 52 done(); 53 }); 54 </script> 55 </body>