chromium/src/third_party/blink/web_tests/animations/svg/svg-presentation-attribute-animation.html

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

<svg>
  <rect id="target"/>
</svg>

<script>
'use strict';

var testCases = [
  ['alignment-baseline', 'middle'],
  ['baseline-shift', '100px'],
  ['buffered-rendering', 'dynamic'],
  ['clip-path', 'url("#test")'],
  ['clip-rule', 'evenodd'],
  ['color', 'rgb(1, 2, 3)'],
  ['color-interpolation', 'linearrgb'],
  ['color-interpolation-filters', 'srgb'],
  ['color-rendering', 'optimizespeed'],
  ['cursor', 'url("test://uri/"), auto'],
  ['dominant-baseline', 'middle'],
  ['fill', 'rgb(1, 2, 3)'],
  ['fill-opacity', '0.25'],
  ['fill-rule', 'evenodd'],
  ['filter', 'url("#test")'],
  ['flood-color', 'rgb(1, 2, 3)'],
  ['flood-opacity', '0.25'],
  ['font-family', "\"Test Font\""],
  ['font-size', '123px'],
  ['font-stretch', '75%'],
  ['font-style', 'italic'],
  ['font-variant', 'small-caps'],
  ['font-weight', '900'],
  ['image-rendering', 'pixelated'],
  ['letter-spacing', '123px'],
  ['lighting-color', 'rgb(1, 2, 3)'],
  ['marker-end', 'url("#test")'],
  ['marker-mid', 'url("#test")'],
  ['marker-start', 'url("#test")'],
  ['mask', 'url("#test")'],
  ['mask-type', 'alpha'],
  ['opacity', '0.25'],
  ['overflow', 'hidden'],
  ['paint-order', 'fill markers'],
  ['pointer-events', 'all'],
  ['shape-rendering', 'geometricprecision'],
  ['stop-color', 'rgb(1, 2, 3)'],
  ['stop-opacity', '0.25'],
  ['stroke', 'rgb(1, 2, 3)'],
  ['stroke-dasharray', '1px, 2px, 3px'],
  ['stroke-dashoffset', '123px'],
  ['stroke-linecap', 'square'],
  ['stroke-linejoin', 'round'],
  ['stroke-miterlimit', '123'],
  ['stroke-opacity', '0.25'],
  ['stroke-width', '123px'],
  ['text-anchor', 'middle'],
  ['text-decoration', 'underline solid rgb(1, 2, 3)'],
  ['text-rendering', 'geometricprecision'],
  ['vector-effect', 'non-scaling-stroke'],
  ['visibility', 'collapse'],
  ['word-spacing', '123px'],
];

function svgPrefix(property) {
  return 'svg-' + property;
}

test(() => {
  for (var [property, value] of testCases) {
    assert_not_equals(getComputedStyle(target)[property], value, 'Precheck that this test is using a non-default value for ' + property);
  }
}, 'Pretest assertions');

// Separate animate() and getComputedStyle() into different phases to avoid quadratic animated style recalc churn.
for (var [property, value] of testCases) {
  target.animate({[svgPrefix(property)]: value}, {fill: 'forwards'});
}

for (var [property, value] of testCases) {
  test(() => {
    assert_equals(getComputedStyle(target)[property], value);
  }, 'Web Animations can target ' + svgPrefix(property));
}
</script>