force-use-shadow-tree-recreation-while-animating.html (1725B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This test forces use shadow tree recreation while an animating is running</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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 10 11 <defs> 12 <rect id="rect" width="10" height="100" fill="red"> 13 <animate id="an1" attributeName="width" fill="freeze" from="10" to="100" begin="0s" dur="4s"/> 14 </rect> 15 </defs> 16 17 <use xlink:href="#rect"/> 18 19 </svg> 20 21 <script> 22 var rootSVGElement = document.querySelector("svg"); 23 var epsilon = 1.0; 24 25 // Setup animation test 26 function sample1() { 27 assert_approx_equals(rect.width.animVal.value, 10, epsilon); 28 assert_equals(rect.width.baseVal.value, 10); 29 } 30 31 function sample2() { 32 assert_approx_equals(rect.width.animVal.value, 55, epsilon); 33 assert_equals(rect.width.baseVal.value, 10); 34 } 35 36 function forceUseShadowTreeRecreation() { 37 rect.setAttribute("fill", "green"); 38 } 39 40 function sample3() { 41 assert_approx_equals(rect.width.animVal.value, 100, epsilon); 42 assert_equals(rect.width.baseVal.value, 10); 43 } 44 45 smil_async_test((t) => { 46 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 47 48 const expectedValues = [ 49 // [animationId, time, sampleCallback] 50 ["an1", 0.0, sample1], 51 ["an1", 1.999, sample2], 52 ["an1", 2.0, forceUseShadowTreeRecreation], 53 ["an1", 2.001, sample2], 54 ["an1", 4.0, sample3], 55 ["an1", 60.0, sample3], 56 ]; 57 58 runAnimationTest(t, expectedValues); 59 }); 60 61 window.animationStartsImmediately = true; 62 63 </script>