test_cascade.html (1069B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <style> 7 @keyframes margin-left { 8 from { margin-left: 20px; } 9 to { margin-left: 80px; } 10 } 11 </style> 12 <body> 13 <div id="log"></div> 14 <script> 15 'use strict'; 16 17 test(function(t) { 18 var div = addDiv(t, { style: 'transition: margin-left 100s; ' + 19 'margin-left: 80px' }); 20 var cs = getComputedStyle(div); 21 22 assert_equals(cs.marginLeft, '80px', 'initial margin-left'); 23 24 div.style.marginLeft = "20px"; 25 assert_equals(cs.marginLeft, '80px', 'margin-left transition at 0s'); 26 27 div.style.animation = "margin-left 2s"; 28 assert_equals(cs.marginLeft, '20px', 29 'margin-left animation overrides transition at 0s'); 30 31 div.style.animation = "none"; 32 assert_equals(cs.marginLeft, '80px', 33 'margin-left animation stops overriding transition at 0s'); 34 }, 'Animation overrides/stops overriding transition immediately'); 35 36 </script> 37 </body>