non-additive-type-by-animation.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/animations/non-additive-type-by-animation.html - WPT Dashboard Interop Dashboard

<!doctype html>

<html>

<meta charset="utf-8">

<title>This by animation for all non-additive property types - should have no effect.</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 200 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

    <filter id="filter">

        <feConvolveMatrix id="feConvolveMatrix" kernelMatrix="0 1 0   0 1 0   0 1 0" order="6 6" targetX="5" preserveAlpha="false"/>

    </filter>

</defs>

<rect id="rect" y="100" width="100" height="100" fill="black" filter="url(#filter)"/>

<!-- AnimatedBoolean -->

<animate id="an1" xlink:href="#feConvolveMatrix" attributeName="preserveAlpha" begin="0s" dur="4s" by="true" fill="freeze"/>

<!-- AnimatedEnumeration -->

<animate xlink:href="#filter" attributeName="filterUnits" begin="0s" dur="4s" by="userSpaceOnUse" fill="freeze"/>

<!-- AnimatedPreserveAspectRatio -->

<animate xlink:href="#svg" attributeName="preserveAspectRatio" begin="0s" dur="4s" by="xMaxYMax slice" fill="freeze"/>

<!-- AnimatedString -->

<animate xlink:href="#feConvolveMatrix" attributeName="result" begin="0s" dur="4s" by="test" fill="freeze"/>

</svg>

<script>

var rootSVGElement = document.querySelector("svg");

var epsilon = 1.0;

// Setup animation test

function sample() {

    assert_equals(feConvolveMatrix.preserveAlpha.animVal, false);

    assert_equals(filter.filterUnits.animVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);

    assert_equals(svg.preserveAspectRatio.animVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);

    assert_equals(svg.preserveAspectRatio.animVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);

    assert_equals(feConvolveMatrix.result.animVal, "");

    assert_equals(feConvolveMatrix.preserveAlpha.baseVal, false);

    assert_equals(filter.filterUnits.baseVal, SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX);

    assert_equals(svg.preserveAspectRatio.baseVal.align, SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE);

    assert_equals(svg.preserveAspectRatio.baseVal.meetOrSlice, SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET);

    assert_equals(feConvolveMatrix.result.baseVal, "");

smil_async_test((t) => {

    filter = rootSVGElement.ownerDocument.getElementsByTagName("filter")[0];

    feConvolveMatrix = rootSVGElement.ownerDocument.getElementsByTagName("feConvolveMatrix")[0];

    svg = rootSVGElement.ownerDocument.getElementsByTagName("svg")[0];

    const expectedValues = [

        // [animationId, time, sampleCallback]

        ["an1", 0.0,   sample],

        ["an1", 1.999, sample],

        ["an1", 2.001, sample],

        ["an1", 3.999, sample],

        ["an1", 4.001, sample]

];

    runAnimationTest(t, expectedValues);

});

window.animationStartsImmediately = true;

</script>