additive-color-precision-animation.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset="utf-8">

<title>Additive SVG color animations accumulate in full precision</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">

    <rect id="target" width="100" height="100" fill="rgb(0, 0, 0)">

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

        <animate attributeName="fill" additive="sum" from="rgb(0, 0, 0)" to="rgb(1, 1, 1)" begin="0s" dur="10s"/>

    </rect>

</svg>

<script>

async_test(t => {

    window.onload = () => {

        const svg = document.querySelector("svg");

        svg.pauseAnimations();

        svg.setCurrentTime(4);

        requestAnimationFrame(t.step_func_done(() => {

            assert_equals(getComputedStyle(document.getElementById("target")).fill, "rgb(4, 4, 4)");

        }));

};

}, "Ten additive fill animations accumulate without per-layer 8-bit truncation");

</script>