| OLD | NEW |
| (Empty) |
| 1 <script src="../resources/testharness.js"></script> | |
| 2 <script src="../resources/testharnessreport.js"></script> | |
| 3 | |
| 4 <svg> | |
| 5 <rect id="target"/> | |
| 6 </svg> | |
| 7 | |
| 8 <script> | |
| 9 'use strict'; | |
| 10 | |
| 11 var testCases = [ | |
| 12 ['alignment-baseline', 'middle'], | |
| 13 ['baseline-shift', '100px'], | |
| 14 ['buffered-rendering', 'dynamic'], | |
| 15 ['clip-path', 'url("#test")'], | |
| 16 ['clip-rule', 'evenodd'], | |
| 17 ['color', 'rgb(1, 2, 3)'], | |
| 18 ['color-interpolation', 'linearRGB'], | |
| 19 ['color-interpolation-filters', 'sRGB'], | |
| 20 ['color-rendering', 'optimizeSpeed'], | |
| 21 ['cursor', 'url("test://uri/"), auto'], | |
| 22 ['dominant-baseline', 'middle'], | |
| 23 ['fill', 'rgb(1, 2, 3)'], | |
| 24 ['fill-opacity', '0.25'], | |
| 25 ['fill-rule', 'evenodd'], | |
| 26 ['filter', 'url("#test")'], | |
| 27 ['flood-color', 'rgb(1, 2, 3)'], | |
| 28 ['flood-opacity', '0.25'], | |
| 29 ['font-family', "\"Test Font\""], | |
| 30 ['font-size', '123px'], | |
| 31 ['font-stretch', 'condensed'], | |
| 32 ['font-style', 'italic'], | |
| 33 ['font-variant', 'small-caps'], | |
| 34 ['font-weight', '900'], | |
| 35 ['image-rendering', 'pixelated'], | |
| 36 ['letter-spacing', '123px'], | |
| 37 ['lighting-color', 'rgb(1, 2, 3)'], | |
| 38 ['marker-end', 'url("#test")'], | |
| 39 ['marker-mid', 'url("#test")'], | |
| 40 ['marker-start', 'url("#test")'], | |
| 41 ['mask', 'url("#test")'], | |
| 42 ['mask-type', 'alpha'], | |
| 43 ['opacity', '0.25'], | |
| 44 ['overflow', 'hidden'], | |
| 45 ['paint-order', 'fill markers stroke'], | |
| 46 ['pointer-events', 'all'], | |
| 47 ['shape-rendering', 'geometricPrecision'], | |
| 48 ['stop-color', 'rgb(1, 2, 3)'], | |
| 49 ['stop-opacity', '0.25'], | |
| 50 ['stroke', 'rgb(1, 2, 3)'], | |
| 51 ['stroke-dasharray', '1px, 2px, 3px'], | |
| 52 ['stroke-dashoffset', '123px'], | |
| 53 ['stroke-linecap', 'square'], | |
| 54 ['stroke-linejoin', 'round'], | |
| 55 ['stroke-miterlimit', '123'], | |
| 56 ['stroke-opacity', '0.25'], | |
| 57 ['stroke-width', '123px'], | |
| 58 ['text-anchor', 'middle'], | |
| 59 ['text-decoration', 'underline solid rgb(1, 2, 3)'], | |
| 60 ['text-rendering', 'geometricPrecision'], | |
| 61 ['vector-effect', 'non-scaling-stroke'], | |
| 62 ['visibility', 'collapse'], | |
| 63 ['word-spacing', '123px'], | |
| 64 ]; | |
| 65 | |
| 66 function svgPrefix(property) { | |
| 67 return 'svg-' + property; | |
| 68 } | |
| 69 | |
| 70 test(() => { | |
| 71 for (var [property, value] of testCases) { | |
| 72 assert_not_equals(getComputedStyle(target)[property], value, 'Precheck that
this test is using a non-default value for ' + property); | |
| 73 } | |
| 74 }, 'Pretest assertions'); | |
| 75 | |
| 76 // Separate animate() and getComputedStyle() into different phases to avoid quad
ratic animated style recalc churn. | |
| 77 for (var [property, value] of testCases) { | |
| 78 target.animate({[svgPrefix(property)]: value}, {fill: 'forwards'}); | |
| 79 } | |
| 80 | |
| 81 for (var [property, value] of testCases) { | |
| 82 test(() => { | |
| 83 assert_equals(getComputedStyle(target)[property], value); | |
| 84 }, 'Web Animations can target ' + svgPrefix(property)); | |
| 85 } | |
| 86 </script> | |
| OLD | NEW |