third_party/WebKit/LayoutTests/svg/animations/script-tests/svgenum-animation-4.js

   1 description("Test CompositeOperationType enumeration animations");
   2 createSVGTestCase();
   3
   4 // Setup test document
   5 var defsElement = createSVGElement("defs");
   6 rootSVGElement.appendChild(defsElement);
   7
   8 var off1 = createSVGElement("feOffset");
   9 off1.setAttribute("dx", "35");
  10 off1.setAttribute("dy", "25");
  11 off1.setAttribute("result", "off1");
  12
  13 var flood1 = createSVGElement("feFlood");
  14 flood1.setAttribute("flood-color", "#408067");
  15 flood1.setAttribute("flood-opacity", ".8");
  16 flood1.setAttribute("result", "F1");
  17
  18 var overComposite1 = createSVGElement("feComposite");
  19 overComposite1.setAttribute("in", "F1");
  20 overComposite1.setAttribute("in2", "off1");
  21 overComposite1.setAttribute("operator", "over");
  22 overComposite1.setAttribute("k1", ".5");
  23 overComposite1.setAttribute("k2", ".1");
  24 overComposite1.setAttribute("k3", ".5");
  25 overComposite1.setAttribute("k4", ".3");
  26
  27 overComposite1.setAttribute("result", "C1");
  28
  29 var off2 = createSVGElement("feOffset");
  30 off2.setAttribute("in", "SourceGraphic");
  31 off2.setAttribute("dx", "60");
  32 off2.setAttribute("dy", "50");
  33 off2.setAttribute("result", "off2");
  34
  35 var flood2 = createSVGElement("feFlood");
  36 flood2.setAttribute("flood-color", "#408067");
  37 flood2.setAttribute("flood-opacity", ".6");
  38 flood2.setAttribute("result", "F2");
  39
  40 var overComposite2 = createSVGElement("feComposite");
  41 overComposite2.setAttribute("in", "F2");
  42 overComposite2.setAttribute("in2", "off2");
  43 overComposite2.setAttribute("operator", "in");
  44 overComposite2.setAttribute("result", "C2");
  45
  46 var off3 = createSVGElement("feOffset");
  47 off3.setAttribute("in", "SourceGraphic");
  48 off3.setAttribute("dx", "85");
  49 off3.setAttribute("dy", "75");
  50 off3.setAttribute("result", "off3");
  51
  52 var flood3 = createSVGElement("feFlood");
  53 flood3.setAttribute("flood-color", "#408067");
  54 flood3.setAttribute("flood-opacity", ".4");
  55 flood3.setAttribute("result", "F3");
  56
  57 var overComposite3 = createSVGElement("feComposite");
  58 overComposite3.setAttribute("in2", "off3");
  59 overComposite3.setAttribute("operator", "in");
  60 overComposite3.setAttribute("result", "C3");
  61
  62 var merge = createSVGElement("feMerge");
  63
  64 var mergeNode1 = createSVGElement("feMergeNode");
  65 mergeNode1.setAttribute("in", "C1");
  66
  67 var mergeNode2 = createSVGElement("feMergeNode");
  68 mergeNode2.setAttribute("in", "C2");
  69
  70 var mergeNode3 = createSVGElement("feMergeNode");
  71 mergeNode3.setAttribute("in", "C3");
  72
  73 var mergeNode4 = createSVGElement("feMergeNode");
  74 mergeNode4.setAttribute("in", "SourceGraphic");
  75
  76 merge.appendChild(mergeNode3);
  77 merge.appendChild(mergeNode2);
  78 merge.appendChild(mergeNode1);
  79 merge.appendChild(mergeNode4);
  80
  81 var overFilter = createSVGElement("filter");
  82 overFilter.setAttribute("id", "overFilter");
  83 overFilter.setAttribute("filterUnits", "objectBoundingBox");
  84 overFilter.setAttribute("x", "0");
  85 overFilter.setAttribute("y", "0");
  86 overFilter.setAttribute("width", "3.5");
  87 overFilter.setAttribute("height", "4");
  88 overFilter.appendChild(off1);
  89 overFilter.appendChild(flood1);
  90 overFilter.appendChild(overComposite1);
  91 overFilter.appendChild(off2);
  92 overFilter.appendChild(flood2);
  93 overFilter.appendChild(overComposite2);
  94 overFilter.appendChild(off3);
  95 overFilter.appendChild(flood3);
  96 overFilter.appendChild(overComposite3);
  97 overFilter.appendChild(merge);
  98
  99 defsElement.appendChild(overFilter);
 100
 101 // Setup test document
 102 var rect = createSVGElement("rect");
 103 rect.setAttribute("id", "rect");
 104 rect.setAttribute("width", "100");
 105 rect.setAttribute("height", "100");
 106 rect.setAttribute("fill", "#408067");
 107 rect.setAttribute("filter", "url(#overFilter)");
 108 rect.setAttribute("onclick", "executeTest()");
 109 rootSVGElement.appendChild(rect);
 110
 111 var animate = createSVGElement("animate");
 112 animate.setAttribute("id", "animation");
 113 animate.setAttribute("attributeName", "operator");
 114 animate.setAttribute("begin", "rect.click");
 115 animate.setAttribute("dur", "5s");
 116 animate.setAttribute("values", "in;out;atop;xor;arithmetic");
 117 overComposite1.appendChild(animate);
 118
 119 // Setup animation test
 120 function sample1() {
 121     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 122     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 123 }
 124
 125 function sample2() {
 126     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_IN");
 127     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 128 }
 129
 130 function sample3() {
 131     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OUT");
 132     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 133 }
 134
 135 function sample4() {
 136     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ATOP");
 137     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 138 }
 139
 140 function sample5() {
 141     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_XOR");
 142     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 143 }
 144
 145 function sample6() {
 146     shouldBe("overComposite1.operator.animVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_ARITHMETIC");
 147     shouldBe("overComposite1.operator.baseVal", "SVGFECompositeElement.SVG_FECOMPOSITE_OPERATOR_OVER");
 148 }
 149
 150 function executeTest() {
 151     const expectedValues = [
 152         // [animationId, time, sampleCallback]
 153         ["animation", 0.0,   sample1],
 154         ["animation", 0.001, sample2],
 155         ["animation", 0.999, sample2],
 156         ["animation", 1.001, sample3],
 157         ["animation", 1.999, sample3],
 158         ["animation", 2.001, sample4],
 159         ["animation", 2.999, sample4],
 160         ["animation", 3.001, sample5],
 161         ["animation", 3.999, sample5],
 162         ["animation", 4.001, sample6],
 163         ["animation", 4.999, sample6],
 164         ["animation", 5.001, sample1]
 165     ];
 166
 167     runAnimationTest(expectedValues);
 168 }
 169
 170 var successfullyParsed = true;