svgenum-animation-7.html (3291B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Test SVGStitchOptions/TurbulenceType enumeration animations</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 defs = createSVGElement("defs"); 18 rootSVGElement.appendChild(defs); 19 20 var filter = createSVGElement("filter"); 21 filter.setAttribute("id", "filter"); 22 filter.setAttribute("filterUnits", "userSpaceOnUse"); 23 filter.setAttribute("x", "0"); 24 filter.setAttribute("y", "0"); 25 filter.setAttribute("width", "700"); 26 filter.setAttribute("height", "200"); 27 defs.appendChild(filter); 28 29 var turbulence = createSVGElement("feTurbulence"); 30 turbulence.setAttribute("in", "foo"); 31 turbulence.setAttribute("baseFrequency", "0.05"); 32 turbulence.setAttribute("numOctaves", "3"); 33 turbulence.setAttribute("seed", "5"); 34 turbulence.setAttribute("stitchTiles", "stitch"); 35 turbulence.setAttribute("type", "fractalNoise"); 36 filter.appendChild(turbulence); 37 38 var rect = createSVGElement("rect"); 39 rect.setAttribute("id", "rect"); 40 rect.setAttribute("width", "100"); 41 rect.setAttribute("height", "100"); 42 rect.setAttribute("fill", "#408067"); 43 rect.setAttribute("filter", "url(#filter)"); 44 rect.setAttribute("onclick", "executeTest()"); 45 rootSVGElement.appendChild(rect); 46 47 var animate1 = createSVGElement("animate"); 48 animate1.setAttribute("id", "animation"); 49 animate1.setAttribute("attributeName", "type"); 50 animate1.setAttribute("begin", "0s"); 51 animate1.setAttribute("dur", "4s"); 52 animate1.setAttribute("from", "fractalNoise"); 53 animate1.setAttribute("to", "turbulence"); 54 turbulence.appendChild(animate1); 55 56 var animate2 = createSVGElement("animate"); 57 animate2.setAttribute("attributeName", "stitchTiles"); 58 animate2.setAttribute("begin", "0s"); 59 animate2.setAttribute("dur", "4s"); 60 animate2.setAttribute("from", "stitch"); 61 animate2.setAttribute("to", "noStitch"); 62 turbulence.appendChild(animate2); 63 64 // Setup animation test 65 function sample1() { 66 assert_equals(turbulence.type.animVal, SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE); 67 assert_equals(turbulence.type.baseVal, SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE); 68 69 assert_equals(turbulence.stitchTiles.animVal, SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH); 70 assert_equals(turbulence.stitchTiles.baseVal, SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH); 71 } 72 73 function sample2() { 74 assert_equals(turbulence.type.animVal, SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_TURBULENCE); 75 assert_equals(turbulence.type.baseVal, SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE); 76 77 assert_equals(turbulence.stitchTiles.animVal, SVGFETurbulenceElement.SVG_STITCHTYPE_NOSTITCH); 78 assert_equals(turbulence.stitchTiles.baseVal, SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH); 79 } 80 81 smil_async_test((t) => { 82 const expectedValues = [ 83 // [animationId, time, sampleCallback] 84 ["animation", 0.0, sample1], 85 ["animation", 1.999, sample1], 86 ["animation", 2.001, sample2], 87 ["animation", 3.999, sample2], 88 ["animation", 4.001, sample1] 89 ]; 90 91 runAnimationTest(t, expectedValues); 92 }); 93 94 </script>