wpt / svg / painting / animations / stroke-dasharray-composition.html

Status: FAIL | Duration: 400ms | Subtests: 68/136 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (68/136)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.6) should be [ 0 0]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.4) should be [ 0 1]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.2) should be [ 0 3]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0) should be [ 0 5]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.2) should be [ 2 7]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.4) should be [ 4 9]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.6) should be [ 6 11]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.8) should be [ 8 13]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (1) should be [10 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (1.2) should be [12 17]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.6) should be [ 0 0]FAILassert_equals: expected "0px , 0px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.4) should be [ 0 1]FAILassert_equals: expected "0px , 1px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (-0.2) should be [ 0 3]FAILassert_equals: expected "0px , 3px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0) should be [ 0 5]FAILassert_equals: expected "0px , 5px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.2) should be [ 2 7]FAILassert_equals: expected "2px , 7px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.4) should be [ 4 9]FAILassert_equals: expected "4px , 9px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.6) should be [ 6 11]FAILassert_equals: expected "6px , 11px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (0.8) should be [ 8 13]FAILassert_equals: expected "8px , 13px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (1) should be [10 15]FAILassert_equals: expected "10px , 15px " but got "5px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5 5] from add [0 5] to add [10 15] at (1.2) should be [12 17]FAILassert_equals: expected "12px , 17px " but got "5px , 5px "
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.6) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.4) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.2) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.2) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.4) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.6) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.8) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (1) should be [5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (1.2) should be [5 10]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.6) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.4) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (-0.2) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.2) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.4) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.6) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (0.8) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (1) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 10] from replace [5 10] to add [5 10] at (1.2) should be [5 10]FAILassert_equals: expected "5px , 10px " but got "10px , 10px "
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (-1.5) should be [none]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (-0.5) should be [none]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0) should be [none]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.4) should be [none]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.5) should be [10 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.6) should be [10 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (1) should be [10 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (1.5) should be [10 10]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (-1.5) should be [none]FAILassert_equals: expected "none " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (-0.5) should be [none]FAILassert_equals: expected "none " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0) should be [none]FAILassert_equals: expected "none " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.4) should be [none]FAILassert_equals: expected "none " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.5) should be [10 10]FAILassert_equals: expected "10px , 10px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (0.6) should be [10 10]FAILassert_equals: expected "10px , 10px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (1) should be [10 10]FAILassert_equals: expected "10px , 10px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from add [none] to add [10 10] at (1.5) should be [10 10]FAILassert_equals: expected "10px , 10px " but got "10px , 30px "
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (-0.2) should be [3 2 1]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0) should be [5 5 5]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.2) should be [7 8 9]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.4) should be [9 11 13]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.6) should be [11 14 17]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.8) should be [13 17 21]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (1) should be [15 20 25]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (1.2) should be [17 23 29]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (-0.2) should be [3 2 1]FAILassert_equals: expected "3px , 2px , 1px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0) should be [5 5 5]FAILassert_equals: expected "5px , 5px , 5px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.2) should be [7 8 9]FAILassert_equals: expected "7px , 8px , 9px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.4) should be [9 11 13]FAILassert_equals: expected "9px , 11px , 13px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.6) should be [11 14 17]FAILassert_equals: expected "11px , 14px , 17px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (0.8) should be [13 17 21]FAILassert_equals: expected "13px , 17px , 21px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (1) should be [15 20 25]FAILassert_equals: expected "15px , 20px , 25px " but got "0px , 5px "
Compositing Web Animations: property <stroke-dasharray> underlying [0 5] from add [5] to replace [15 20 25] at (1.2) should be [17 23 29]FAILassert_equals: expected "17px , 23px , 29px " but got "0px , 5px "
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (-0.2) should be [ 3 12 13 22 0 8 15 24 1 10 11 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0) should be [ 5 10 15 20 5 10 15 20 5 10 15 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.2) should be [ 7 8 17 18 11 12 15 16 9 10 19 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.4) should be [ 9 6 19 16 17 14 15 12 13 10 23 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.6) should be [11 4 21 14 23 16 15 8 17 10 27 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.8) should be [13 2 23 12 29 18 15 4 21 10 31 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (1) should be [15 0 25 10 35 20 15 0 25 10 35 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (1.2) should be [17 0 27 8 41 22 15 0 29 10 39 20]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (-0.2) should be [ 3 12 13 22 0 8 15 24 1 10 11 20]FAILassert_equals: expected "3px , 12px , 13px , 22px , 0px , 8px , 15px , 24px , 1px , 10px , 11px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0) should be [ 5 10 15 20 5 10 15 20 5 10 15 20]FAILassert_equals: expected "5px , 10px , 15px , 20px , 5px , 10px , 15px , 20px , 5px , 10px , 15px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.2) should be [ 7 8 17 18 11 12 15 16 9 10 19 20]FAILassert_equals: expected "7px , 8px , 17px , 18px , 11px , 12px , 15px , 16px , 9px , 10px , 19px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.4) should be [ 9 6 19 16 17 14 15 12 13 10 23 20]FAILassert_equals: expected "9px , 6px , 19px , 16px , 17px , 14px , 15px , 12px , 13px , 10px , 23px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.6) should be [11 4 21 14 23 16 15 8 17 10 27 20]FAILassert_equals: expected "11px , 4px , 21px , 14px , 23px , 16px , 15px , 8px , 17px , 10px , 27px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (0.8) should be [13 2 23 12 29 18 15 4 21 10 31 20]FAILassert_equals: expected "13px , 2px , 23px , 12px , 29px , 18px , 15px , 4px , 21px , 10px , 31px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (1) should be [15 0 25 10 35 20 15 0 25 10 35 20]FAILassert_equals: expected "15px , 0px , 25px , 10px , 35px , 20px , 15px , 0px , 25px , 10px , 35px , 20px " but got "10px , 30px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 30] from replace [5 10 15 20] to add [15 0 25 10 35 20] at (1.2) should be [17 0 27 8 41 22 15 0 29 10 39 20]FAILassert_equals: expected "17px , 0px , 27px , 8px , 41px , 22px , 15px , 0px , 29px , 10px , 39px , 20px " but got "10px , 30px "
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (-0.2) should be [ 4 11 14 3 10 17 2 9 16 5 8 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0) should be [ 5 10 15 5 10 15 5 10 15 5 10 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.2) should be [ 6 9 16 7 10 13 8 11 14 5 12 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.4) should be [ 7 8 17 9 10 11 11 12 13 5 14 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.6) should be [ 8 7 18 11 10 9 14 13 12 5 16 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.8) should be [ 9 6 19 13 10 7 17 14 11 5 18 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (1) should be [10 5 20 15 10 5 20 15 10 5 20 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (1.2) should be [11 4 21 17 10 3 23 16 9 5 22 15]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (-0.2) should be [ 4 11 14 3 10 17 2 9 16 5 8 15]FAILassert_equals: expected "4px , 11px , 14px , 3px , 10px , 17px , 2px , 9px , 16px , 5px , 8px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0) should be [ 5 10 15 5 10 15 5 10 15 5 10 15]FAILassert_equals: expected "5px , 10px , 15px , 5px , 10px , 15px , 5px , 10px , 15px , 5px , 10px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.2) should be [ 6 9 16 7 10 13 8 11 14 5 12 15]FAILassert_equals: expected "6px , 9px , 16px , 7px , 10px , 13px , 8px , 11px , 14px , 5px , 12px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.4) should be [ 7 8 17 9 10 11 11 12 13 5 14 15]FAILassert_equals: expected "7px , 8px , 17px , 9px , 10px , 11px , 11px , 12px , 13px , 5px , 14px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.6) should be [ 8 7 18 11 10 9 14 13 12 5 16 15]FAILassert_equals: expected "8px , 7px , 18px , 11px , 10px , 9px , 14px , 13px , 12px , 5px , 16px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (0.8) should be [ 9 6 19 13 10 7 17 14 11 5 18 15]FAILassert_equals: expected "9px , 6px , 19px , 13px , 10px , 7px , 17px , 14px , 11px , 5px , 18px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (1) should be [10 5 20 15 10 5 20 15 10 5 20 15]FAILassert_equals: expected "10px , 5px , 20px , 15px , 10px , 5px , 20px , 15px , 10px , 5px , 20px , 15px " but got "10px , 20px "
Compositing Web Animations: property <stroke-dasharray> underlying [10 20] from replace [5 10 15] to add [10 5 20 15] at (1.2) should be [11 4 21 17 10 3 23 16 9 5 22 15]FAILassert_equals: expected "11px , 4px , 21px , 17px , 10px , 3px , 23px , 16px , 9px , 5px , 22px , 15px " but got "10px , 20px "
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (-0.2) should be [ 0 2 7 0 0 9 0 1 6 0 3 8 0 0 5]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0) should be [ 0 5 10 0 5 10 0 5 10 0 5 10 0 5 10]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.2) should be [ 3 8 13 6 11 11 4 9 14 7 7 12 5 10 15]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.4) should be [ 6 11 16 12 17 12 8 13 18 14 9 14 10 15 20]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.6) should be [ 9 14 19 18 23 13 12 17 22 21 11 16 15 20 25]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.8) should be [12 17 22 24 29 14 16 21 26 28 13 18 20 25 30]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (1) should be [15 20 25 30 35 15 20 25 30 35 15 20 25 30 35]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (1.2) should be [18 23 28 36 41 16 24 29 34 42 17 22 30 35 40]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (-0.2) should be [ 0 2 7 0 0 9 0 1 6 0 3 8 0 0 5]FAILassert_equals: expected "0px , 2px , 7px , 0px , 0px , 9px , 0px , 1px , 6px , 0px , 3px , 8px , 0px , 0px , 5px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0) should be [ 0 5 10 0 5 10 0 5 10 0 5 10 0 5 10]FAILassert_equals: expected "0px , 5px , 10px , 0px , 5px , 10px , 0px , 5px , 10px , 0px , 5px , 10px , 0px , 5px , 10px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.2) should be [ 3 8 13 6 11 11 4 9 14 7 7 12 5 10 15]FAILassert_equals: expected "3px , 8px , 13px , 6px , 11px , 11px , 4px , 9px , 14px , 7px , 7px , 12px , 5px , 10px , 15px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.4) should be [ 6 11 16 12 17 12 8 13 18 14 9 14 10 15 20]FAILassert_equals: expected "6px , 11px , 16px , 12px , 17px , 12px , 8px , 13px , 18px , 14px , 9px , 14px , 10px , 15px , 20px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.6) should be [ 9 14 19 18 23 13 12 17 22 21 11 16 15 20 25]FAILassert_equals: expected "9px , 14px , 19px , 18px , 23px , 13px , 12px , 17px , 22px , 21px , 11px , 16px , 15px , 20px , 25px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (0.8) should be [12 17 22 24 29 14 16 21 26 28 13 18 20 25 30]FAILassert_equals: expected "12px , 17px , 22px , 24px , 29px , 14px , 16px , 21px , 26px , 28px , 13px , 18px , 20px , 25px , 30px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (1) should be [15 20 25 30 35 15 20 25 30 35 15 20 25 30 35]FAILassert_equals: expected "15px , 20px , 25px , 30px , 35px , 15px , 20px , 25px , 30px , 35px , 15px , 20px , 25px , 30px , 35px " but got "5px "
Compositing Web Animations: property <stroke-dasharray> underlying [5] from add [0 5 10] to add [15 20 25 30 35] at (1.2) should be [18 23 28 36 41 16 24 29 34 42 17 22 30 35 40]FAILassert_equals: expected "18px , 23px , 28px , 36px , 41px , 16px , 24px , 29px , 34px , 42px , 17px , 22px , 30px , 35px , 40px " but got "5px "
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (-0.2) should be [7em 12px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0) should be [9em 14px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.2) should be [11em 16px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.4) should be [13em 18px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.6) should be [15em 20px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.8) should be [17em 22px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (1) should be [19em 24px]PASS
Compositing CSS Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (1.2) should be [21em 26px]PASS
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (-0.2) should be [7em 12px]FAILassert_equals: expected "112px , 12px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0) should be [9em 14px]FAILassert_equals: expected "144px , 14px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.2) should be [11em 16px]FAILassert_equals: expected "176px , 16px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.4) should be [13em 18px]FAILassert_equals: expected "208px , 18px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.6) should be [15em 20px]FAILassert_equals: expected "240px , 20px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (0.8) should be [17em 22px]FAILassert_equals: expected "272px , 22px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (1) should be [19em 24px]FAILassert_equals: expected "304px , 24px " but got "16px "
Compositing Web Animations: property <stroke-dasharray> underlying [1em] from add [9em 14px] to add [304px 1.5em] at (1.2) should be [21em 26px]FAILassert_equals: expected "336px , 26px " but got "16px "

/svg/painting/animations/stroke-dasharray-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>stroke-dasharray composition</title>
<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/painting.html#StrokeDashing">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
  stroke-dasharray: 30 10;
}
.target {
  font-size: 16px;
}
</style>
<body>
<template id="target-template">
  <svg height="400" width="5">
    <path d="M0,0 l0,400" class="target">
  </svg>
</template>
<script>
// stroke-dasharray values are not additive per spec:
// https://w3c.github.io/svgwg/svg2-draft/painting.html#StrokeDashing
// "add" composite falls back to "replace".

// Basic case: both keyframes use add (treated as replace).
test_composition({
  property: 'stroke-dasharray',
  underlying: '5 5',
  addFrom: '0 5',
  addTo: '10 15',
}, [
  {at: -0.6, expect: ' 0  0'}, // Values must be non-negative.
  {at: -0.4, expect: ' 0  1'},
  {at: -0.2, expect: ' 0  3'},
  {at:  0,   expect: ' 0  5'},
  {at:  0.2, expect: ' 2  7'},
  {at:  0.4, expect: ' 4  9'},
  {at:  0.6, expect: ' 6 11'},
  {at:  0.8, expect: ' 8 13'},
  {at:  1,   expect: '10 15'},
  {at:  1.2, expect: '12 17'},
]);

test_composition({
  property: 'stroke-dasharray',
  underlying: '10 10',
  replaceFrom: '5 10',
  addTo: '5 10',
}, [
  {at: -0.6, expect: '5 10'},
  {at: -0.4, expect: '5 10'},
  {at: -0.2, expect: '5 10'},
  {at:  0,   expect: '5 10'},
  {at:  0.2, expect: '5 10'},
  {at:  0.4, expect: '5 10'},
  {at:  0.6, expect: '5 10'},
  {at:  0.8, expect: '5 10'},
  {at:  1,   expect: '5 10'},
  {at:  1.2, expect: '5 10'},
]);

test_composition({
  property: 'stroke-dasharray',
  underlying: '10 30',
  addFrom: 'none',
  addTo: '10 10',
}, [
  {at: -1.5, expect: 'none'},
  {at: -0.5, expect: 'none'},
  {at:  0,   expect: 'none'},
  {at:  0.4, expect: 'none'},
  {at:  0.5, expect: '10 10'},
  {at:  0.6, expect: '10 10'},
  {at:  1,   expect: '10 10'},
  {at:  1.5, expect: '10 10'},
]);

// Differing list lengths
// Lists are repeated until length is equal to lowest common multiple of lengths.
test_composition({
  property: 'stroke-dasharray',
  underlying: '0 5',
  addFrom: '5',
  replaceTo: '15 20 25',
}, [
  {at: -0.2, expect: '3 2 1'},
  {at:  0,   expect: '5 5 5'},
  {at:  0.2, expect: '7 8 9'},
  {at:  0.4, expect: '9 11 13'},
  {at:  0.6, expect: '11 14 17'},
  {at:  0.8, expect: '13 17 21'},
  {at:  1,   expect: '15 20 25'},
  {at:  1.2, expect: '17 23 29'},
]);

// Lowest common multiple of list lengths not equal to multiple of list lengths
test_composition({
  property: 'stroke-dasharray',
  underlying: '10 30',
  replaceFrom: '5 10 15 20',
  addTo: '15 0 25 10 35 20',
}, [
  {at: -0.2, expect: ' 3 12 13 22  0  8 15 24  1 10 11 20'},  // Values must be non-negative.
  {at:  0,   expect: ' 5 10 15 20  5 10 15 20  5 10 15 20'},
  {at:  0.2, expect: ' 7  8 17 18 11 12 15 16  9 10 19 20'},
  {at:  0.4, expect: ' 9  6 19 16 17 14 15 12 13 10 23 20'},
  {at:  0.6, expect: '11  4 21 14 23 16 15  8 17 10 27 20'},
  {at:  0.8, expect: '13  2 23 12 29 18 15  4 21 10 31 20'},
  {at:  1,   expect: '15  0 25 10 35 20 15  0 25 10 35 20'},
  {at:  1.2, expect: '17  0 27  8 41 22 15  0 29 10 39 20'},
]);

// One list has odd length
test_composition({
  property: 'stroke-dasharray',
  underlying: '10 20',
  replaceFrom: '5 10 15',
  addTo: '10 5 20 15',
}, [
  {at: -0.2, expect: ' 4 11 14  3 10 17  2  9 16  5  8 15'},
  {at:  0,   expect: ' 5 10 15  5 10 15  5 10 15  5 10 15'},
  {at:  0.2, expect: ' 6  9 16  7 10 13  8 11 14  5 12 15'},
  {at:  0.4, expect: ' 7  8 17  9 10 11 11 12 13  5 14 15'},
  {at:  0.6, expect: ' 8  7 18 11 10  9 14 13 12  5 16 15'},
  {at:  0.8, expect: ' 9  6 19 13 10  7 17 14 11  5 18 15'},
  {at:  1,   expect: '10  5 20 15 10  5 20 15 10  5 20 15'},
  {at:  1.2, expect: '11  4 21 17 10  3 23 16  9  5 22 15'},
]);

// Both lists have odd length
test_composition({
  property: 'stroke-dasharray',
  underlying: '5',
  addFrom: '0 5 10',
  addTo: '15 20 25 30 35',
}, [
  {at: -0.2, expect: ' 0  2  7  0  0  9  0  1  6  0  3  8  0  0  5'},  // Values must be non-negative.
  {at:  0,   expect: ' 0  5 10  0  5 10  0  5 10  0  5 10  0  5 10'},
  {at:  0.2, expect: ' 3  8 13  6 11 11  4  9 14  7  7 12  5 10 15'},
  {at:  0.4, expect: ' 6 11 16 12 17 12  8 13 18 14  9 14 10 15 20'},
  {at:  0.6, expect: ' 9 14 19 18 23 13 12 17 22 21 11 16 15 20 25'},
  {at:  0.8, expect: '12 17 22 24 29 14 16 21 26 28 13 18 20 25 30'},
  {at:  1,   expect: '15 20 25 30 35 15 20 25 30 35 15 20 25 30 35'},
  {at:  1.2, expect: '18 23 28 36 41 16 24 29 34 42 17 22 30 35 40'},
]);

// Mixed units
test_composition({
  property: 'stroke-dasharray',
  underlying: '1em',
  addFrom: '9em 14px',
  addTo: '304px 1.5em',
}, [
  {at: -0.2, expect: '7em 12px'},
  {at:  0,   expect: '9em 14px'},
  {at:  0.2, expect: '11em 16px'},
  {at:  0.4, expect: '13em 18px'},
  {at:  0.6, expect: '15em 20px'},
  {at:  0.8, expect: '17em 22px'},
  {at:  1,   expect: '19em 24px'},
  {at:  1.2, expect: '21em 26px'},
]);
</script>
</body>