DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (c68fe15a81fc)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275
<!doctype html>
<html>
<meta charset="utf-8">
<title>This by animation for all XML property types</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/SVGAnimationTestCase-testharness.js"></script>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg id="svg" viewBox="0 0 300 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- All additive types except AnimatedPath are tested here -->
<defs>
    <marker id="marker" viewBox="0 0 10 10" markerWidth="4" markerHeight="3" refX="1" refY="5" orient="-45deg">
        <polyline id="polyline" points="0,0 10,5 0,10 1,5" fill="green"/>
    </marker>

    <filter id="filter">
        <feConvolveMatrix id="feConvolveMatrix" kernelUnitLength="20 30" kernelMatrix="0 1 0   0 1 0   0 1 0" divisor="37.5" order="6 6" targetX="5" preserveAlpha="false"/>
    </filter>
</defs>

<!-- Non-additive types AnimatedBoolean, AnimatedEnumeration, AnimatedPreserveAspectRatio, AnimatedString are tested in non-additive-type-by-animation.svg -->

<path id="path" d="M45,50 L55,50" transform="rotate(45)" stroke-width="10" stroke="green" marker-end="url(#marker)"/>
<rect id="rect" y="0" width="100" height="100" fill="black" filter="url(#filter)"/>
<text id="text" x="50" y="50" dy="5 -10 10 -10">ABCD</text>

<!-- AnimatedAngle -->
<animate id="an1" xlink:href="#marker" attributeName="orient" begin="0s" dur="4s" by="45deg" fill="freeze"/>

<!-- AnimatedColor -->
<animate xlink:href="#rect" attributeName="fill" begin="0s" dur="4s" by="green" fill="freeze"/>

<!-- AnimatedLength -->
<animate xlink:href="#rect" attributeName="y" begin="0s" dur="4s" by="100" fill="freeze"/>

<!-- AnimatedLengthList -->
<animate xlink:href="#text" attributeName="dy" begin="0s" dur="4s" by="-10 20 -20 20" fill="freeze"/>

<!-- AnimatedNumberOptionalNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelUnitLength" begin="0s" dur="4s" by="-10 -20" fill="freeze"/>

<!-- AnimatedNumber -->
<animate xlink:href="#feConvolveMatrix" attributeName="divisor" begin="0s" dur="4s" by="-17.5" fill="freeze"/>

<!-- AnimatedNumberList -->
<animate xlink:href="#feConvolveMatrix" attributeName="kernelMatrix" begin="0s" dur="4s" by="2 1 3   2 1 3   2 1 3" fill="freeze"/>

<!-- AnimatedIntegerOptionalInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="order" begin="0s" dur="4s" by="-3 -3" fill="freeze"/>

<!-- AnimatedInteger -->
<animate xlink:href="#feConvolveMatrix" attributeName="targetX" begin="0s" dur="4s" by="-4" fill="freeze"/>

<!-- AnimatedPoints -->
<animate xlink:href="#polyline" attributeName="points" begin="0s" dur="4s" by="0,0 10,5 0,10 1,5" fill="freeze"/>

<!-- AnimatedRect -->
<animate xlink:href="#svg" attributeName="viewBox" begin="0s" dur="4s" by="0 0 -100 -100" fill="freeze"/>

<!-- AnimatedTransformList -->
<animateTransform xlink:href="#path" attributeName="transform" type="rotate" begin="0s" dur="4s" by="-45" fill="freeze"/>

</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function checkBaseVal() {
    assert_equals(marker.orientAngle.baseVal.value, -45);
    assert_equals(feConvolveMatrix.divisor.baseVal, 37.5);
    assert_equals(feConvolveMatrix.orderX.baseVal, 6);
    assert_equals(feConvolveMatrix.orderY.baseVal, 6);
    assert_equals(feConvolveMatrix.targetX.baseVal, 5);
    assert_equals(feConvolveMatrix.kernelUnitLengthX.baseVal, 20);
    assert_equals(feConvolveMatrix.kernelUnitLengthY.baseVal, 30);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.numberOfItems, 9);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(0).value, 0);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(1).value, 1);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(2).value, 0);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(3).value, 0);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(4).value, 1);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(5).value, 0);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(6).value, 0);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(7).value, 1);
    assert_equals(feConvolveMatrix.kernelMatrix.baseVal.getItem(8).value, 0);
    assert_equals(rect.y.baseVal.value, 0);
    assert_equals(text.dy.baseVal.numberOfItems, 4);
    assert_equals(text.dy.baseVal.getItem(0).value, 5);
    assert_equals(text.dy.baseVal.getItem(1).value, -10);
    assert_equals(text.dy.baseVal.getItem(2).value, 10);
    assert_equals(text.dy.baseVal.getItem(3).value, -10);
    assert_equals(svg.viewBox.baseVal.x, 0);
    assert_equals(svg.viewBox.baseVal.y, 0);
    assert_equals(svg.viewBox.baseVal.width, 300);
    assert_equals(svg.viewBox.baseVal.height, 300);
    assert_equals(polyline.points.numberOfItems, 4);
    assert_equals(polyline.points.getItem(0).x, 0);
    assert_equals(polyline.points.getItem(0).y, 0);
    assert_equals(polyline.points.getItem(1).x, 10);
    assert_equals(polyline.points.getItem(1).y, 5);
    assert_equals(polyline.points.getItem(1).x, 10);
    assert_equals(polyline.points.getItem(1).y, 5);
    assert_equals(polyline.points.getItem(2).x, 0);
    assert_equals(polyline.points.getItem(2).y, 10);
    assert_equals(path.transform.baseVal.numberOfItems, 1);
    assert_equals(path.transform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_equals(path.transform.baseVal.getItem(0).angle, 45);
}

function sample1() {
    assert_approx_equals(marker.orientAngle.animVal.value, -45, epsilon);
    assert_approx_equals(feConvolveMatrix.divisor.animVal, 37.5, epsilon);
    assert_approx_equals(feConvolveMatrix.orderX.animVal, 6, epsilon);
    assert_approx_equals(feConvolveMatrix.orderY.animVal, 6, epsilon);
    assert_approx_equals(feConvolveMatrix.targetX.animVal, 5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 20, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 30, epsilon);
    assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 0, epsilon);
    assert_approx_equals(rect.y.animVal.value, 0, epsilon);
    assert_equals(text.dy.animVal.numberOfItems, 4);
    assert_approx_equals(text.dy.animVal.getItem(0).value, 5, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(1).value, -10, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(2).value, 10, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(3).value, -10, epsilon);
    assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.width, 300, epsilon);
    assert_approx_equals(svg.viewBox.animVal.height, 300, epsilon);
    assert_equals(polyline.animatedPoints.numberOfItems, 4);
    assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 10, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 5, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).y, 10, epsilon);
    assert_equals(path.transform.animVal.numberOfItems, 2);
    assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_equals(path.transform.animVal.getItem(0).angle, 45);
    assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_approx_equals(path.transform.animVal.getItem(1).angle, 0, epsilon);
    expectFillColor(rect, 0, 0, 0);
    checkBaseVal();
}

function sample2() {
    assert_approx_equals(marker.orientAngle.animVal.value, -22.5, epsilon);
    assert_approx_equals(feConvolveMatrix.divisor.animVal, 28.75, epsilon);
    assert_approx_equals(feConvolveMatrix.orderX.animVal, 5, epsilon);
    assert_approx_equals(feConvolveMatrix.orderY.animVal, 5, epsilon);
    assert_approx_equals(feConvolveMatrix.targetX.animVal, 3, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 15, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 20, epsilon);
    assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 1.5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 1.5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 1.5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 1.5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 1.5, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 1.5, epsilon);
    assert_approx_equals(rect.y.animVal.value, 50, epsilon);
    assert_equals(text.dy.animVal.numberOfItems, 4);
    assert_approx_equals(text.dy.animVal.getItem(0).value, 0, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(1).value, 0, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(2).value, 0, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(3).value, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.width, 250, epsilon);
    assert_approx_equals(svg.viewBox.animVal.height, 250, epsilon);
    assert_equals(polyline.animatedPoints.numberOfItems, 4);
    assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 15, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 7.5, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).y, 15, epsilon);
    assert_equals(path.transform.animVal.numberOfItems, 2);
    assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_equals(path.transform.animVal.getItem(0).angle, 45);
    assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_approx_equals(path.transform.animVal.getItem(1).angle, -22.5, epsilon);
    expectFillColor(rect, 0, 63, 0);
    checkBaseVal();
}

function sample3() {
    assert_approx_equals(marker.orientAngle.animVal.value, 0, epsilon);
    assert_approx_equals(feConvolveMatrix.divisor.animVal, 20, epsilon);
    assert_approx_equals(feConvolveMatrix.orderX.animVal, 3, epsilon);
    assert_approx_equals(feConvolveMatrix.orderY.animVal, 3, epsilon);
    assert_approx_equals(feConvolveMatrix.targetX.animVal, 1, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthX.animVal, 10, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelUnitLengthY.animVal, 10, epsilon);
    assert_equals(feConvolveMatrix.kernelMatrix.animVal.numberOfItems, 9);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(0).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(1).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(2).value, 3, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(3).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(4).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(5).value, 3, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(6).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(7).value, 2, epsilon);
    assert_approx_equals(feConvolveMatrix.kernelMatrix.animVal.getItem(8).value, 3, epsilon);
    assert_approx_equals(rect.y.animVal.value, 100, epsilon);
    assert_equals(text.dy.animVal.numberOfItems, 4);
    assert_approx_equals(text.dy.animVal.getItem(0).value, -5, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(1).value, 10, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(2).value, -10, epsilon);
    assert_approx_equals(text.dy.animVal.getItem(3).value, 10, epsilon);
    assert_approx_equals(svg.viewBox.animVal.x, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.y, 0, epsilon);
    assert_approx_equals(svg.viewBox.animVal.width, 200, epsilon);
    assert_approx_equals(svg.viewBox.animVal.height, 200, epsilon);
    assert_equals(polyline.animatedPoints.numberOfItems, 4);
    assert_approx_equals(polyline.animatedPoints.getItem(0).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(0).y, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).x, 20, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(1).y, 10, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).x, 0, epsilon);
    assert_approx_equals(polyline.animatedPoints.getItem(2).y, 20, epsilon);
    assert_equals(path.transform.animVal.numberOfItems, 2);
    assert_equals(path.transform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_equals(path.transform.animVal.getItem(0).angle, 45);
    assert_equals(path.transform.animVal.getItem(1).type, SVGTransform.SVG_TRANSFORM_ROTATE);
    assert_approx_equals(path.transform.animVal.getItem(1).angle, -45, epsilon);
    expectFillColor(rect, 0, 128, 0);
    checkBaseVal();
}

smil_async_test((t) => {
    marker = rootSVGElement.ownerDocument.getElementsByTagName("marker")[0];
    filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];
    feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];
    rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
    svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];
    path = rootSVGElement.ownerDocument.getElementsByTagName("path")[0];
    polyline = rootSVGElement.ownerDocument.getElementsByTagName("polyline")[0];
    text = rootSVGElement.ownerDocument.getElementsByTagName("text")[0];

    const expectedValues = [
        // [animationId, time, sampleCallback]
        ["an1", 0.0,   sample1],
        ["an1", 2.0,   sample2],
        ["an1", 4.001, sample3]
    ];

    runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>