third_party/WebKit/LayoutTests/svg/animations/animate-marker-orient-from-auto-to-angle.html

   1 <script src="../../resources/js-test.js"></script>
   2 <script src="resources/SVGTestCase.js"></script>
   3 <script src="resources/SVGAnimationTestCase.js"></script>
   4 <body onload="runSMILTest()">
   5 <h1>SVG 1.1 dynamic animation tests</h1>
   6 <script>
   7 description("Animate SVGMarkerElement orientAttr from auto to an angle");
   8 createSVGTestCase();
   9
  10 // Setup test document
  11
  12 var marker = createSVGElement("marker");
  13 marker.setAttribute("id", "marker");
  14 marker.setAttribute("viewBox", "0 0 10 10");
  15 marker.setAttribute("markerWidth", "2");
  16 marker.setAttribute("markerHeight", "2");
  17 marker.setAttribute("refX", "5");
  18 marker.setAttribute("refY", "5");
  19 marker.setAttribute("markerUnits", "strokeWidth");
  20
  21 var markerPath = createSVGElement("path");
  22 markerPath.setAttribute("fill", "blue");
  23 markerPath.setAttribute("d", "M 5 0 L 10 10 L 0 10 Z");
  24 marker.appendChild(markerPath);
  25
  26 var defsElement = createSVGElement("defs");
  27 defsElement.appendChild(marker);
  28 rootSVGElement.appendChild(defsElement);
  29
  30 var path = createSVGElement("path");
  31 path.setAttribute("id", "path");
  32 path.setAttribute("onclick", "executeTest()");
  33 path.setAttribute("fill", "none");
  34 path.setAttribute("stroke", "green");
  35 path.setAttribute("stroke-width", "10");
  36 path.setAttribute("marker-start", "url(#marker)");
  37 path.setAttribute("marker-end", "url(#marker)");
  38 path.setAttribute("d", "M 130 135 L 180 135 L 180 185");
  39 path.setAttribute("transform", "translate(-130, -120)");
  40 rootSVGElement.appendChild(path);
  41
  42 var animate1 = createSVGElement("animate");
  43 animate1.setAttribute("id", "animation");
  44 animate1.setAttribute("attributeName", "orient");
  45 animate1.setAttribute("begin", "path.click");
  46 animate1.setAttribute("dur", "4s");
  47 animate1.setAttribute("from", "auto");
  48 animate1.setAttribute("to", "90deg");
  49 animate1.setAttribute("fill", "freeze");
  50 marker.appendChild(animate1);
  51
  52 // Setup animation test
  53 function sample1() {
  54     shouldBeCloseEnough("marker.orientAngle.animVal.value", "0");
  55     shouldBe("marker.orientAngle.baseVal.value", "0");
  56
  57     shouldBe("marker.orientType.animVal", "SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE");
  58     shouldBe("marker.orientType.baseVal", "SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE");
  59 }
  60
  61 function sample2() {
  62     shouldBeCloseEnough("marker.orientAngle.animVal.value", "0");
  63     shouldBe("marker.orientAngle.baseVal.value", "0");
  64
  65     shouldBe("marker.orientType.animVal", "SVGMarkerElement.SVG_MARKER_ORIENT_AUTO");
  66     shouldBe("marker.orientType.baseVal", "SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE");
  67 }
  68
  69 function sample3() {
  70     shouldBeCloseEnough("marker.orientAngle.animVal.value", "90");
  71     shouldBe("marker.orientAngle.baseVal.value", "0");
  72
  73     shouldBe("marker.orientType.animVal", "SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE");
  74     shouldBe("marker.orientType.baseVal", "SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE");
  75 }
  76
  77 function executeTest() {
  78     const expectedValues = [
  79         // [animationId, time, sampleCallback]
  80         ["animation", 0.0,   sample1],
  81         ["animation", 0.001, sample2],
  82         ["animation", 1.999, sample2],
  83         ["animation", 2.001, sample3],
  84         ["animation", 3.999, sample3],
  85         ["animation", 4.001, sample3]
  86     ];
  87
  88     runAnimationTest(expectedValues);
  89 }
  90 </script>
  91 </body>