animate-inherit-css-property.html (1862B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Tests animation with 'inherit'.</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 8 9 <svg> 10 </svg> 11 12 <script> 13 var rootSVGElement = document.querySelector("svg"); 14 var epsilon = 1.0; 15 16 // Setup test document 17 var g = createSVGElement("g"); 18 g.setAttribute("fill", "green"); 19 20 var rect = createSVGElement("rect"); 21 rect.setAttribute("id", "rect"); 22 rect.setAttribute("width", "100px"); 23 rect.setAttribute("height", "100px"); 24 rect.setAttribute("fill", "red"); 25 rect.setAttribute("onclick", "executeTest()"); 26 g.appendChild(rect); 27 28 var animateInherit = createSVGElement("animate"); 29 animateInherit.setAttribute("id", "animateInherit"); 30 animateInherit.setAttribute("attributeName", "fill"); 31 animateInherit.setAttribute("from", "red"); 32 animateInherit.setAttribute("to", "inherit"); 33 animateInherit.setAttribute("dur", "3s"); 34 animateInherit.setAttribute("begin", "0s"); 35 animateInherit.setAttribute("fill", "freeze"); 36 rect.appendChild(animateInherit); 37 rootSVGElement.appendChild(g); 38 39 // Setup animation test 40 function sample1() { 41 // Check initial conditions 42 expectFillColor(rect, 255, 0, 0); 43 assert_equals(rect.style.fill, ""); 44 } 45 46 function sample2() { 47 // Check half-time conditions 48 expectFillColor(rect, 128, 64, 0); 49 assert_equals(rect.style.fill, ""); 50 } 51 52 function sample3() { 53 // Check end conditions 54 expectFillColor(rect, 0, 128, 0); 55 assert_equals(rect.style.fill, ""); 56 } 57 58 smil_async_test((t) => { 59 const expectedValues = [ 60 // [animationId, time, sampleCallback] 61 ["animateInherit", 0.0, sample1], 62 ["animateInherit", 1.5, sample2], 63 ["animateInherit", 3.0, sample3] 64 ]; 65 66 runAnimationTest(t, expectedValues); 67 }); 68 69 </script>