wpt / css / css-backgrounds / animations / border-image-slice-composition.html

Status: FAIL | Duration: 350ms | Subtests: 19/112 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (19/112)

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

SubtestStatusMessage
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (-0.25) should be [0]PASS
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0) should be [2 4 6 8]FAILassert_equals: expected "2 4 6 8 " but got "1 2 3 4 "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.25) should be [27 29 31 33]FAILassert_equals: expected "27 29 31 33 " but got "26 27 28 29 "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.5) should be [52 54 56 58]FAILassert_equals: expected "52 54 56 58 " but got "51 52 53 54 "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.75) should be [77 79 81 83]FAILassert_equals: expected "77 79 81 83 " but got "76 77 78 79 "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (1) should be [102 104 106 108]FAILassert_equals: expected "102 104 106 108 " but got "101 102 103 104 "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (1.25) should be [127 129 131 133]FAILassert_equals: expected "127 129 131 133 " but got "126 127 128 129 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (-0.25) should be [0]FAILassert_equals: expected "0 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0) should be [2 4 6 8]FAILassert_equals: expected "2 4 6 8 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.25) should be [27 29 31 33]FAILassert_equals: expected "27 29 31 33 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.5) should be [52 54 56 58]FAILassert_equals: expected "52 54 56 58 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (0.75) should be [77 79 81 83]FAILassert_equals: expected "77 79 81 83 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (1) should be [102 104 106 108]FAILassert_equals: expected "102 104 106 108 " but got "1 2 3 4 "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3 4] from add [1 2 3 4] to add [101 102 103 104] at (1.25) should be [127 129 131 133]FAILassert_equals: expected "127 129 131 133 " but got "1 2 3 4 "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (-0.25) should be [175 250 300 450 fill]FAILassert_equals: expected "175 250 300 450 fill " but got "75 50 0 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0) should be [200 300 400 500 fill]FAILassert_equals: expected "200 300 400 500 fill " but got "100 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.25) should be [225 350 500 550 fill]FAILassert_equals: expected "225 350 500 550 fill " but got "125 150 200 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.5) should be [250 400 600 600 fill]FAILassert_equals: expected "250 400 600 600 fill " but got "150 200 300 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.75) should be [275 450 700 650 fill]FAILassert_equals: expected "275 450 700 650 fill " but got "175 250 400 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (1) should be [300 500 800 700 fill]FAILassert_equals: expected "300 500 800 700 fill " but got "200 300 500 fill "
Compositing CSS Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (1.25) should be [325 550 900 750 fill]FAILassert_equals: expected "325 550 900 750 fill " but got "225 350 600 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (-0.25) should be [175 250 300 450 fill]FAILassert_equals: expected "175 250 300 450 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0) should be [200 300 400 500 fill]FAILassert_equals: expected "200 300 400 500 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.25) should be [225 350 500 550 fill]FAILassert_equals: expected "225 350 500 550 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.5) should be [250 400 600 600 fill]FAILassert_equals: expected "250 400 600 600 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (0.75) should be [275 450 700 650 fill]FAILassert_equals: expected "275 450 700 650 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (1) should be [300 500 800 700 fill]FAILassert_equals: expected "300 500 800 700 fill " but got "100 200 300 400 fill "
Compositing Web Animations: property <border-image-slice> underlying [100 200 300 400 fill] from add [100 fill] to add [200 300 500 fill] at (1.25) should be [325 550 900 750 fill]FAILassert_equals: expected "325 550 900 750 fill " but got "100 200 300 400 fill "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (-0.25) should be [0 0 0% 0%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0) should be [2 4 6% 8%]FAILassert_equals: expected "2 4 6 % 8 % " but got "1 2 3 % 4 % "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.25) should be [27 29 31% 33%]FAILassert_equals: expected "27 29 31 % 33 % " but got "26 27 28 % 29 % "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.5) should be [52 54 56% 58%]FAILassert_equals: expected "52 54 56 % 58 % " but got "51 52 53 % 54 % "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.75) should be [77 79 81% 83%]FAILassert_equals: expected "77 79 81 % 83 % " but got "76 77 78 % 79 % "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (1) should be [102 104 106% 108%]FAILassert_equals: expected "102 104 106 % 108 % " but got "101 102 103 % 104 % "
Compositing CSS Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (1.25) should be [127 129 131% 133%]FAILassert_equals: expected "127 129 131 % 133 % " but got "126 127 128 % 129 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (-0.25) should be [0 0 0% 0%]FAILassert_equals: expected "0 0 0 % 0 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0) should be [2 4 6% 8%]FAILassert_equals: expected "2 4 6 % 8 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.25) should be [27 29 31% 33%]FAILassert_equals: expected "27 29 31 % 33 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.5) should be [52 54 56% 58%]FAILassert_equals: expected "52 54 56 % 58 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (0.75) should be [77 79 81% 83%]FAILassert_equals: expected "77 79 81 % 83 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (1) should be [102 104 106% 108%]FAILassert_equals: expected "102 104 106 % 108 % " but got "1 2 3 % 4 % "
Compositing Web Animations: property <border-image-slice> underlying [1 2 3% 4%] from add [1 2 3% 4%] to add [101 102 103% 104%] at (1.25) should be [127 129 131% 133%]FAILassert_equals: expected "127 129 131 % 133 % " but got "1 2 3 % 4 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (-0.25) should be [225% 225% 350% 350%]FAILassert_equals: expected "225 % 225 % 350 % 350 % " but got "215 % 205 % 340 % 330 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0) should be [200% 200% 300% 300%]FAILassert_equals: expected "200 % 200 % 300 % 300 % " but got "190 % 180 % 290 % 280 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.25) should be [175% 175% 250% 250%]FAILassert_equals: expected "175 % 175 % 250 % 250 % " but got "165 % 155 % 240 % 230 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.5) should be [150% 150% 200% 200%]FAILassert_equals: expected "150 % 150 % 200 % 200 % " but got "140 % 130 % 190 % 180 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.75) should be [125% 125% 150% 150%]FAILassert_equals: expected "125 % 125 % 150 % 150 % " but got "115 % 105 % 140 % 130 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (1) should be [100%]FAILassert_equals: expected "100 % " but got "90 % 80 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (1.25) should be [75% 75% 50% 50%]FAILassert_equals: expected "75 % 75 % 50 % 50 % " but got "65 % 55 % 40 % 30 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (-0.25) should be [225% 225% 350% 350%]FAILassert_equals: expected "225 % 225 % 350 % 350 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0) should be [200% 200% 300% 300%]FAILassert_equals: expected "200 % 200 % 300 % 300 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.25) should be [175% 175% 250% 250%]FAILassert_equals: expected "175 % 175 % 250 % 250 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.5) should be [150% 150% 200% 200%]FAILassert_equals: expected "150 % 150 % 200 % 200 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (0.75) should be [125% 125% 150% 150%]FAILassert_equals: expected "125 % 125 % 150 % 150 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (1) should be [100%]FAILassert_equals: expected "100 % " but got "10 % 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10% 20%] from add [190% 180% 290% 280%] to add [90% 80%] at (1.25) should be [75% 75% 50% 50%]FAILassert_equals: expected "75 % 75 % 50 % 50 % " but got "10 % 20 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (-0.25) should be [75 75%]FAILassert_equals: expected "75 75 % " but got "77.5 80 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0) should be [100 100%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.25) should be [125 125%]FAILassert_equals: expected "125 125 % " but got "122.5 120 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.5) should be [150 150%]FAILassert_equals: expected "150 150 % " but got "145 140 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.75) should be [175 175%]FAILassert_equals: expected "175 175 % " but got "167.5 160 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (1) should be [200 200%]FAILassert_equals: expected "200 200 % " but got "190 180 % "
Compositing CSS Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (1.25) should be [225 225%]FAILassert_equals: expected "225 225 % " but got "212.5 200 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (-0.25) should be [75 75%]FAILassert_equals: expected "75 75 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0) should be [100 100%]FAILassert_equals: expected "100 100 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.25) should be [125 125%]FAILassert_equals: expected "125 125 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.5) should be [150 150%]FAILassert_equals: expected "150 150 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (0.75) should be [175 175%]FAILassert_equals: expected "175 175 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (1) should be [200 200%]FAILassert_equals: expected "200 200 % " but got "10 20 % "
Compositing Web Animations: property <border-image-slice> underlying [10 20%] from replace [100 100%] to add [190 180%] at (1.25) should be [225 225%]FAILassert_equals: expected "225 225 % " but got "10 20 % "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (-0.25) should be [125% 125]FAILassert_equals: expected "125 % 125 " but got "112.5 % 100 "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0) should be [100% 100]FAILassert_equals: expected "100 % 100 " but got "90 % 80 "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.25) should be [75% 75]FAILassert_equals: expected "75 % 75 " but got "67.5 % 60 "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.5) should be [50% 50]FAILassert_equals: expected "50 % 50 " but got "45 % 40 "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.75) should be [25% 25]FAILassert_equals: expected "25 % 25 " but got "22.5 % 20 "
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1) should be [0% 0]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1.25) should be [0% 0]PASS
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (-0.25) should be [125% 125]FAILassert_equals: expected "125 % 125 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0) should be [100% 100]FAILassert_equals: expected "100 % 100 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.25) should be [75% 75]FAILassert_equals: expected "75 % 75 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.5) should be [50% 50]FAILassert_equals: expected "50 % 50 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.75) should be [25% 25]FAILassert_equals: expected "25 % 25 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1) should be [0% 0]FAILassert_equals: expected "0 % 0 " but got "10 % 20 "
Compositing Web Animations: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1.25) should be [0% 0]FAILassert_equals: expected "0 % 0 " but got "10 % 20 "
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (-0.25) should be [100% 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0) should be [100% 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.25) should be [100% 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.5) should be [200% 250% fill]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.75) should be [200% 250% fill]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1) should be [200% 250% fill]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1.25) should be [200% 250% fill]PASS
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (-0.25) should be [100% 150%]FAILassert_equals: expected "100 % 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0) should be [100% 150%]FAILassert_equals: expected "100 % 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.25) should be [100% 150%]FAILassert_equals: expected "100 % 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.5) should be [200% 250% fill]FAILassert_equals: expected "200 % 250 % fill " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.75) should be [200% 250% fill]FAILassert_equals: expected "200 % 250 % fill " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1) should be [200% 250% fill]FAILassert_equals: expected "200 % 250 % fill " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1.25) should be [200% 250% fill]FAILassert_equals: expected "200 % 250 % fill " but got "10 20 "
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (-0.25) should be [100 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0) should be [100 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.25) should be [100 150%]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.5) should be [200% 250]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.75) should be [200% 250]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (1) should be [200% 250]PASS
Compositing CSS Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (1.25) should be [200% 250]PASS
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (-0.25) should be [100 150%]FAILassert_equals: expected "100 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0) should be [100 150%]FAILassert_equals: expected "100 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.25) should be [100 150%]FAILassert_equals: expected "100 150 % " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.5) should be [200% 250]FAILassert_equals: expected "200 % 250 " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.75) should be [200% 250]FAILassert_equals: expected "200 % 250 " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (1) should be [200% 250]FAILassert_equals: expected "200 % 250 " but got "10 20 "
Compositing Web Animations: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (1.25) should be [200% 250]FAILassert_equals: expected "200 % 250 " but got "10 20 "

/css/css-backgrounds/animations/border-image-slice-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>border-image-slice composition</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">
<meta name="assert" content="border-image-slice supports animation by computed value">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>

<body>
<script>
test_composition({
  property: 'border-image-slice',
  underlying: '1 2 3 4',
  addFrom: '1 2 3 4',
  addTo: '101 102 103 104',
}, [
  {at: -0.25, expect: '0'}, // Non-negative.
  {at: 0, expect: '2 4 6 8'},
  {at: 0.25, expect: '27 29 31 33'},
  {at: 0.5, expect: '52 54 56 58'},
  {at: 0.75, expect: '77 79 81 83'},
  {at: 1, expect: '102 104 106 108'},
  {at: 1.25, expect: '127 129 131 133'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '100 200 300 400 fill',
  addFrom: '100 fill',
  addTo: '200 300 500 fill',
}, [
  {at: -0.25, expect: '175 250 300 450 fill'},
  {at: 0, expect: '200 300 400 500 fill'},
  {at: 0.25, expect: '225 350 500 550 fill'},
  {at: 0.5, expect: '250 400 600 600 fill'},
  {at: 0.75, expect: '275 450 700 650 fill'},
  {at: 1, expect: '300 500 800 700 fill'},
  {at: 1.25, expect: '325 550 900 750 fill'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '1 2 3% 4%',
  addFrom: '1 2 3% 4%',
  addTo: '101 102 103% 104%',
}, [
  {at: -0.25, expect: '0 0 0% 0%'}, // Non-negative.
  {at: 0, expect: '2 4 6% 8%'},
  {at: 0.25, expect: '27 29 31% 33%'},
  {at: 0.5, expect: '52 54 56% 58%'},
  {at: 0.75, expect: '77 79 81% 83%'},
  {at: 1, expect: '102 104 106% 108%'},
  {at: 1.25, expect: '127 129 131% 133%'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '10% 20%',
  addFrom: '190% 180% 290% 280%',
  addTo: '90% 80%',
}, [
  {at: -0.25, expect: '225% 225% 350% 350%'},
  {at: 0, expect: '200% 200% 300% 300%'},
  {at: 0.25, expect: '175% 175% 250% 250%'},
  {at: 0.5, expect: '150% 150% 200% 200%'},
  {at: 0.75, expect: '125% 125% 150% 150%'},
  {at: 1, expect: '100%'},
  {at: 1.25, expect: '75% 75% 50% 50%'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '10 20%',
  replaceFrom: '100 100%',
  addTo: '190 180%',
}, [
  {at: -0.25, expect: '75 75%'},
  {at: 0, expect: '100 100%'},
  {at: 0.25, expect: '125 125%'},
  {at: 0.5, expect: '150 150%'},
  {at: 0.75, expect: '175 175%'},
  {at: 1, expect: '200 200%'},
  {at: 1.25, expect: '225 225%'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '10% 20',
  addFrom: '90% 80',
  replaceTo: '0% 0 0% 0',
}, [
  {at: -0.25, expect: '125% 125'},
  {at: 0, expect: '100% 100'},
  {at: 0.25, expect: '75% 75'},
  {at: 0.5, expect: '50% 50'},
  {at: 0.75, expect: '25% 25'},
  {at: 1, expect: '0% 0'},
  {at: 1.25, expect: '0% 0'}, // Non-negative.
]);

test_composition({
  property: 'border-image-slice',
  underlying: '10 20',
  addFrom: '100% 150%',
  addTo: '200% 250% fill',
}, [
  {at: -0.25, expect: '100% 150%'},
  {at: 0, expect: '100% 150%'},
  {at: 0.25, expect: '100% 150%'},
  {at: 0.5, expect: '200% 250% fill'},
  {at: 0.75, expect: '200% 250% fill'},
  {at: 1, expect: '200% 250% fill'},
  {at: 1.25, expect: '200% 250% fill'},
]);

test_composition({
  property: 'border-image-slice',
  underlying: '10 20',
  addFrom: '100 150%',
  addTo: '200% 250',
}, [
  {at: -0.25, expect: '100 150%'},
  {at: 0, expect: '100 150%'},
  {at: 0.25, expect: '100 150%'},
  {at: 0.5, expect: '200% 250'},
  {at: 0.75, expect: '200% 250'},
  {at: 1, expect: '200% 250'},
  {at: 1.25, expect: '200% 250'},
]);
</script>
</body>