third_party/WebKit/LayoutTests/svg/animations/script-tests/animate-marker-orient-to-angle.js

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