Status: FAIL | Duration: 380ms | Subtests: 11/140 | Open test on wpt.live | wpt.fyi
Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)
| Subtest | Status | Message |
|---|---|---|
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (-0.3) should be [circle(98px at 42.5px 107.5%)] | FAIL | assert_equals: expected "circle ( 98px at 42.5px 107.5 % ) " but got "circle ( 0px at 17.5px 82.5 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0) should be [circle(110px at 50px 100%)] | FAIL | assert_equals: expected "circle ( 110px at 50px 100 % ) " but got "circle ( 10px at 25px 75 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0.3) should be [circle(122px at 57.5px 92.5%)] | FAIL | assert_equals: expected "circle ( 122px at 57.5px 92.5 % ) " but got "circle ( 22px at 32.5px 67.5 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0.6) should be [circle(134px at 65px 85%)] | FAIL | assert_equals: expected "circle ( 134px at 65px 85 % ) " but got "circle ( 34px at 40px 60 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (1) should be [circle(150px at 75px 75%)] | FAIL | assert_equals: expected "circle ( 150px at 75px 75 % ) " but got "circle ( 50px at 50px 50 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (1.5) should be [circle(170px at 87.5px 62.5%)] | FAIL | assert_equals: expected "circle ( 170px at 87.5px 62.5 % ) " but got "circle ( 70px at 62.5px 37.5 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (-0.3) should be [circle(98px at 42.5px 107.5%)] | FAIL | assert_equals: expected "circle ( 98px at 42.5px 107.5 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0) should be [circle(110px at 50px 100%)] | FAIL | assert_equals: expected "circle ( 110px at 50px 100 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0.3) should be [circle(122px at 57.5px 92.5%)] | FAIL | assert_equals: expected "circle ( 122px at 57.5px 92.5 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (0.6) should be [circle(134px at 65px 85%)] | FAIL | assert_equals: expected "circle ( 134px at 65px 85 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (1) should be [circle(150px at 75px 75%)] | FAIL | assert_equals: expected "circle ( 150px at 75px 75 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 25px 25%)] from add [circle(10px at 25px 75%)] to add [circle(50px at 50px center)] at (1.5) should be [circle(170px at 87.5px 62.5%)] | FAIL | assert_equals: expected "circle ( 170px at 87.5px 62.5 % ) " but got "circle ( 100px at 25px 25 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (-0.3) should be [circle(calc(195px + -15%) at 46px 46%)] | FAIL | assert_equals: expected "circle ( calc ( - 15 % + 195px ) at 46px 46 % ) " but got "circle ( calc ( - 15 % + 65px ) at 20px 20 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0) should be [circle(calc(150px + 0%) at 70px 70%)] | FAIL | assert_equals: expected "circle ( calc ( 0 % + 150px ) at 70px 70 % ) " but got "circle ( calc ( 0 % + 50px ) at 50px 50 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0.3) should be [circle(calc(105px + 15%) at 94px 94%)] | FAIL | assert_equals: expected "circle ( calc ( 15 % + 105px ) at 94px 94 % ) " but got "circle ( calc ( 15 % + 35px ) at 80px 80 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0.6) should be [circle(calc(60px + 30%) at 118px 118%)] | FAIL | assert_equals: expected "circle ( calc ( 30 % + 60px ) at 118px 118 % ) " but got "circle ( calc ( 30 % + 20px ) at 110px 110 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1) should be [circle(50% at 150px 150%)] | PASS | |
| Compositing CSS Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1.5) should be [circle(calc(-75px + 75%) at 190px 190%)] | FAIL | assert_equals: expected "circle ( calc ( 75 % - 75px ) at 190px 190 % ) " but got "circle ( calc ( 75 % - 25px ) at 200px 200 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (-0.3) should be [circle(calc(195px + -15%) at 46px 46%)] | FAIL | assert_equals: expected "circle ( calc ( - 15 % + 195px ) at 46px 46 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0) should be [circle(calc(150px + 0%) at 70px 70%)] | FAIL | assert_equals: expected "circle ( calc ( 0 % + 150px ) at 70px 70 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0.3) should be [circle(calc(105px + 15%) at 94px 94%)] | FAIL | assert_equals: expected "circle ( calc ( 15 % + 105px ) at 94px 94 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0.6) should be [circle(calc(60px + 30%) at 118px 118%)] | FAIL | assert_equals: expected "circle ( calc ( 30 % + 60px ) at 118px 118 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1) should be [circle(50% at 150px 150%)] | FAIL | assert_equals: expected "circle ( 50 % at 150px 150 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1.5) should be [circle(calc(-75px + 75%) at 190px 190%)] | FAIL | assert_equals: expected "circle ( calc ( 75 % - 75px ) at 190px 190 % ) " but got "circle ( 100px at 20px 20 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)] | PASS | |
| Compositing CSS Animations: property <clip-path> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.75) should be [circle(farthest-side at 50px 50%)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.75) should be [circle(farthest-side at 50px 50%)] | FAIL | assert_equals: expected "circle ( farthest - side at 50px 50 % ) " but got "circle ( farthest - side at 25px 75 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] | FAIL | assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( 50px at 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.75) should be [circle(farthest-side at 30px 40px)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] | FAIL | assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( 50px at 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.75) should be [circle(farthest-side at 30px 40px)] | FAIL | assert_equals: expected "circle ( farthest - side at 30px 40px ) " but got "circle ( 50px at 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (-0.3) should be [ellipse(20px 20px at 20px 20px)] | FAIL | assert_equals: expected "ellipse ( 20px 20px at 20px 20px ) " but got "ellipse ( 10px 0px at - 10px - 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0) should be [ellipse(50px 50px at 50px 50px)] | FAIL | assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0.3) should be [ellipse(80px 80px at 80px 80px)] | FAIL | assert_equals: expected "ellipse ( 80px 80px at 80px 80px ) " but got "ellipse ( 70px 60px at 50px 40px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0.6) should be [ellipse(110px 110px at 110px 110px)] | FAIL | assert_equals: expected "ellipse ( 110px 110px at 110px 110px ) " but got "ellipse ( 100px 90px at 80px 70px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (1) should be [ellipse(150px 150px at 150px 150px)] | FAIL | assert_equals: expected "ellipse ( 150px 150px at 150px 150px ) " but got "ellipse ( 140px 130px at 120px 110px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (1.5) should be [ellipse(200px 200px at 200px 200px)] | FAIL | assert_equals: expected "ellipse ( 200px 200px at 200px 200px ) " but got "ellipse ( 190px 180px at 170px 160px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (-0.3) should be [ellipse(20px 20px at 20px 20px)] | FAIL | assert_equals: expected "ellipse ( 20px 20px at 20px 20px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0) should be [ellipse(50px 50px at 50px 50px)] | FAIL | assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0.3) should be [ellipse(80px 80px at 80px 80px)] | FAIL | assert_equals: expected "ellipse ( 80px 80px at 80px 80px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0.6) should be [ellipse(110px 110px at 110px 110px)] | FAIL | assert_equals: expected "ellipse ( 110px 110px at 110px 110px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (1) should be [ellipse(150px 150px at 150px 150px)] | FAIL | assert_equals: expected "ellipse ( 150px 150px at 150px 150px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (1.5) should be [ellipse(200px 200px at 200px 200px)] | FAIL | assert_equals: expected "ellipse ( 200px 200px at 200px 200px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (-0.3) should be [ellipse(37px 24px at 11px -2px)] | FAIL | assert_equals: expected "ellipse ( 37px 24px at 11px - 2px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0) should be [ellipse(40px 30px at 20px 10px)] | PASS | |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0.3) should be [ellipse(43px 36px at 29px 22px)] | FAIL | assert_equals: expected "ellipse ( 43px 36px at 29px 22px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0.6) should be [ellipse(46px 42px at 38px 34px)] | FAIL | assert_equals: expected "ellipse ( 46px 42px at 38px 34px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1) should be [ellipse(50px 50px at 50px 50px)] | FAIL | assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1.5) should be [ellipse(55px 60px at 65px 70px)] | FAIL | assert_equals: expected "ellipse ( 55px 60px at 65px 70px ) " but got "ellipse ( 40px 30px at 20px 10px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (-0.3) should be [ellipse(37px 24px at 11px -2px)] | FAIL | assert_equals: expected "ellipse ( 37px 24px at 11px - 2px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0) should be [ellipse(40px 30px at 20px 10px)] | FAIL | assert_equals: expected "ellipse ( 40px 30px at 20px 10px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0.3) should be [ellipse(43px 36px at 29px 22px)] | FAIL | assert_equals: expected "ellipse ( 43px 36px at 29px 22px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0.6) should be [ellipse(46px 42px at 38px 34px)] | FAIL | assert_equals: expected "ellipse ( 46px 42px at 38px 34px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1) should be [ellipse(50px 50px at 50px 50px)] | FAIL | assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1.5) should be [ellipse(55px 60px at 65px 70px)] | FAIL | assert_equals: expected "ellipse ( 55px 60px at 65px 70px ) " but got "ellipse ( 10px 20px at 30px 40px ) " |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse()] | PASS | |
| Compositing CSS Animations: property <clip-path> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.75) should be [ellipse(closest-side farthest-side)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse()] | FAIL | assert_equals: expected "ellipse ( ) " but got "ellipse ( 25px 75 % ) " |
| Compositing Web Animations: property <clip-path> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.75) should be [ellipse(closest-side farthest-side)] | FAIL | assert_equals: expected "ellipse ( closest - side farthest - side ) " but got "ellipse ( 25px 75 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (-0.3) should be [inset(calc(46px + -12%))] | FAIL | assert_equals: expected "inset ( calc ( - 12 % + 46px ) ) " but got "inset ( calc ( - 12 % + 26px ) ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0) should be [inset(calc(40px + 0%))] | FAIL | assert_equals: expected "inset ( calc ( 0 % + 40px ) ) " but got "inset ( calc ( 0 % + 20px ) ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0.3) should be [inset(calc(34px + 12%))] | FAIL | assert_equals: expected "inset ( calc ( 12 % + 34px ) ) " but got "inset ( calc ( 12 % + 14px ) ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0.6) should be [inset(calc(28px + 24%))] | FAIL | assert_equals: expected "inset ( calc ( 24 % + 28px ) ) " but got "inset ( calc ( 24 % + 8px ) ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (1) should be [inset(calc(20px + 40%))] | FAIL | assert_equals: expected "inset ( calc ( 40 % + 20px ) ) " but got "inset ( 40 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (1.5) should be [inset(calc(10px + 60%))] | FAIL | assert_equals: expected "inset ( calc ( 60 % + 10px ) ) " but got "inset ( calc ( 60 % - 10px ) ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (-0.3) should be [inset(calc(46px + -12%))] | FAIL | assert_equals: expected "inset ( calc ( - 12 % + 46px ) ) " but got "inset ( 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0) should be [inset(calc(40px + 0%))] | FAIL | assert_equals: expected "inset ( calc ( 0 % + 40px ) ) " but got "inset ( 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0.3) should be [inset(calc(34px + 12%))] | FAIL | assert_equals: expected "inset ( calc ( 12 % + 34px ) ) " but got "inset ( 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0.6) should be [inset(calc(28px + 24%))] | FAIL | assert_equals: expected "inset ( calc ( 24 % + 28px ) ) " but got "inset ( 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (1) should be [inset(calc(20px + 40%))] | FAIL | assert_equals: expected "inset ( calc ( 40 % + 20px ) ) " but got "inset ( 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (1.5) should be [inset(calc(10px + 60%))] | FAIL | assert_equals: expected "inset ( calc ( 60 % + 10px ) ) " but got "inset ( 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (-0.3) should be [inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)] | FAIL | assert_equals: expected "inset ( - 28px - 26px - 24px - 22px round 0px 10px 30px 50px / 70px 90px 110px 130px ) " but got "inset ( - 29.3px - 28.6px - 27.9px - 27.2px round 0px / 5px 12px 19px 26px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0) should be [inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)] | FAIL | assert_equals: expected "inset ( 2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0.25) should be [inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)] | FAIL | assert_equals: expected "inset ( 27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px ) " but got "inset ( 26.25px 27.5px 28.75px 30px round 37.5px 50px 62.5px 75px / 87.5px 100px 112.5px 125px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0.75) should be [inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)] | FAIL | assert_equals: expected "inset ( 77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px ) " but got "inset ( 76.75px 78.5px 80.25px 82px round 92.5px 110px 127.5px 145px / 162.5px 180px 197.5px 215px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (1) should be [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] | PASS | |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (1.5) should be [inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)] | FAIL | assert_equals: expected "inset ( 152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px ) " but got "inset ( 152.5px 155px 157.5px 160px round 175px 200px 225px 250px / 275px 300px 325px 350px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (-0.3) should be [inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)] | FAIL | assert_equals: expected "inset ( - 28px - 26px - 24px - 22px round 0px 10px 30px 50px / 70px 90px 110px 130px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0) should be [inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)] | FAIL | assert_equals: expected "inset ( 2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0.25) should be [inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)] | FAIL | assert_equals: expected "inset ( 27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (0.75) should be [inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)] | FAIL | assert_equals: expected "inset ( 77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (1) should be [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] | FAIL | assert_equals: expected "inset ( 102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] from add [inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)] to replace [inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)] at (1.5) should be [inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)] | FAIL | assert_equals: expected "inset ( 152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px ) " but got "inset ( 1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (-0.3) should be [inset(-28px -26px round 230px 460px)] | FAIL | assert_equals: expected "inset ( - 28px - 26px round 230px 460px ) " but got "inset ( - 29px - 28px round 130px 260px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0) should be [inset(2px 4px round 200px 400px)] | FAIL | assert_equals: expected "inset ( 2px 4px round 200px 400px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0.3) should be [inset(32px 34px round 170px 340px)] | FAIL | assert_equals: expected "inset ( 32px 34px round 170px 340px ) " but got "inset ( 31px 32px round 70px 140px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0.6) should be [inset(62px 64px round 140px 280px)] | FAIL | assert_equals: expected "inset ( 62px 64px round 140px 280px ) " but got "inset ( 61px 62px round 40px 80px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (1) should be [inset(102px 104px round 100px 200px)] | FAIL | assert_equals: expected "inset ( 102px 104px round 100px 200px ) " but got "inset ( 101px 102px ) " |
| Compositing CSS Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (1.5) should be [inset(152px 154px round 50px 100px)] | FAIL | assert_equals: expected "inset ( 152px 154px round 50px 100px ) " but got "inset ( 151px 152px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (-0.3) should be [inset(-28px -26px round 230px 460px)] | FAIL | assert_equals: expected "inset ( - 28px - 26px round 230px 460px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0) should be [inset(2px 4px round 200px 400px)] | FAIL | assert_equals: expected "inset ( 2px 4px round 200px 400px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0.3) should be [inset(32px 34px round 170px 340px)] | FAIL | assert_equals: expected "inset ( 32px 34px round 170px 340px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (0.6) should be [inset(62px 64px round 140px 280px)] | FAIL | assert_equals: expected "inset ( 62px 64px round 140px 280px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (1) should be [inset(102px 104px round 100px 200px)] | FAIL | assert_equals: expected "inset ( 102px 104px round 100px 200px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing Web Animations: property <clip-path> underlying [inset(1px 2px round 100px 200px)] from add [inset(1px 2px round 100px 200px)] to add [inset(101px 102px 101px 102px)] at (1.5) should be [inset(152px 154px round 50px 100px)] | FAIL | assert_equals: expected "inset ( 152px 154px round 50px 100px ) " but got "inset ( 1px 2px round 100px 200px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (-0.3) should be [polygon(-10px 10%, 30px 50%)] | FAIL | assert_equals: expected "polygon ( - 10px 10 % , 30px 50 % ) " but got "polygon ( - 20px - 10 % , 0px 10 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0) should be [polygon(20px 40%, 60px 80%)] | FAIL | assert_equals: expected "polygon ( 20px 40 % , 60px 80 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0.3) should be [polygon(50px 70%, 90px 110%)] | FAIL | assert_equals: expected "polygon ( 50px 70 % , 90px 110 % ) " but got "polygon ( 40px 50 % , 60px 70 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0.6) should be [polygon(80px 100%, 120px 140%)] | FAIL | assert_equals: expected "polygon ( 80px 100 % , 120px 140 % ) " but got "polygon ( 70px 80 % , 90px 100 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (1) should be [polygon(120px 140%, 160px 180%)] | FAIL | assert_equals: expected "polygon ( 120px 140 % , 160px 180 % ) " but got "polygon ( 110px 120 % , 130px 140 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (1.5) should be [polygon(170px 190%, 210px 230%)] | FAIL | assert_equals: expected "polygon ( 170px 190 % , 210px 230 % ) " but got "polygon ( 160px 170 % , 180px 190 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (-0.3) should be [polygon(-10px 10%, 30px 50%)] | FAIL | assert_equals: expected "polygon ( - 10px 10 % , 30px 50 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0) should be [polygon(20px 40%, 60px 80%)] | FAIL | assert_equals: expected "polygon ( 20px 40 % , 60px 80 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0.3) should be [polygon(50px 70%, 90px 110%)] | FAIL | assert_equals: expected "polygon ( 50px 70 % , 90px 110 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (0.6) should be [polygon(80px 100%, 120px 140%)] | FAIL | assert_equals: expected "polygon ( 80px 100 % , 120px 140 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (1) should be [polygon(120px 140%, 160px 180%)] | FAIL | assert_equals: expected "polygon ( 120px 140 % , 160px 180 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20%, 30px 40%)] from add [polygon(10px 20%, 30px 40%)] to add [polygon(110px 120%, 130px 140%)] at (1.5) should be [polygon(170px 190%, 210px 230%)] | FAIL | assert_equals: expected "polygon ( 170px 190 % , 210px 230 % ) " but got "polygon ( 10px 20 % , 30px 40 % ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (-0.3) should be [polygon(evenodd, -10px 10px)] | FAIL | assert_equals: expected "polygon ( evenodd , - 10px 10px ) " but got "polygon ( evenodd , - 20px - 10px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0) should be [polygon(evenodd, 20px 40px)] | FAIL | assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0.3) should be [polygon(evenodd, 50px 70px)] | FAIL | assert_equals: expected "polygon ( evenodd , 50px 70px ) " but got "polygon ( evenodd , 40px 50px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0.6) should be [polygon(evenodd, 80px 100px)] | FAIL | assert_equals: expected "polygon ( evenodd , 80px 100px ) " but got "polygon ( evenodd , 70px 80px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1) should be [polygon(evenodd, 120px 140px)] | FAIL | assert_equals: expected "polygon ( evenodd , 120px 140px ) " but got "polygon ( evenodd , 110px 120px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1.5) should be [polygon(evenodd, 170px 190px)] | FAIL | assert_equals: expected "polygon ( evenodd , 170px 190px ) " but got "polygon ( evenodd , 160px 170px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (-0.3) should be [polygon(evenodd, -10px 10px)] | FAIL | assert_equals: expected "polygon ( evenodd , - 10px 10px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0) should be [polygon(evenodd, 20px 40px)] | FAIL | assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0.3) should be [polygon(evenodd, 50px 70px)] | FAIL | assert_equals: expected "polygon ( evenodd , 50px 70px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0.6) should be [polygon(evenodd, 80px 100px)] | FAIL | assert_equals: expected "polygon ( evenodd , 80px 100px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1) should be [polygon(evenodd, 120px 140px)] | FAIL | assert_equals: expected "polygon ( evenodd , 120px 140px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1.5) should be [polygon(evenodd, 170px 190px)] | FAIL | assert_equals: expected "polygon ( evenodd , 170px 190px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (-0.3) should be [polygon(round 14px, -10px 10px, 30px 50px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0) should be [polygon(round 20px, 20px 40px, 60px 80px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0.3) should be [polygon(round 26px, 50px 70px, 90px 110px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0.6) should be [polygon(round 32px, 80px 100px, 120px 140px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (1) should be [polygon(round 40px, 120px 140px, 160px 180px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (1.5) should be [polygon(round 50px, 170px 190px, 210px 230px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (-0.3) should be [polygon(round 14px, -10px 10px, 30px 50px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0) should be [polygon(round 20px, 20px 40px, 60px 80px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0.3) should be [polygon(round 26px, 50px 70px, 90px 110px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (0.6) should be [polygon(round 32px, 80px 100px, 120px 140px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (1) should be [polygon(round 40px, 120px 140px, 160px 180px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing Web Animations: property <clip-path> underlying [polygon(round 10px, 10px 20px, 30px 40px)] from add [polygon(round 10px, 10px 20px, 30px 40px)] to add [polygon(round 30px, 110px 120px, 130px 140px)] at (1.5) should be [polygon(round 50px, 170px 190px, 210px 230px)] | FAIL | assert_true: 'from' value should be supported expected true got false |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] | FAIL | assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.75) should be [polygon(30px 40px)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] | FAIL | assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.75) should be [polygon(30px 40px)] | FAIL | assert_equals: expected "polygon ( 30px 40px ) " but got "polygon ( evenodd , 10px 20px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] | FAIL | assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 10px 20px , 30px 40px ) " |
| Compositing CSS Animations: property <clip-path> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.75) should be [polygon(30px 40px)] | PASS | |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] | FAIL | assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 10px 20px , 30px 40px ) " |
| Compositing Web Animations: property <clip-path> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.75) should be [polygon(30px 40px)] | FAIL | assert_equals: expected "polygon ( 30px 40px ) " but got "polygon ( 10px 20px , 30px 40px ) " |
/css/css-masking/animations/clip-path-composition.html
<!DOCTYPE html> <meta charset="UTF-8"> <title>clip-path composition</title> <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> <meta name="assert" content="clip-path supports animation"> <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: 'clip-path', underlying: 'circle(100px at 25px 25%)', addFrom: 'circle(10px at 25px 75%)', addTo: 'circle(50px at 50px center)', }, [ {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'}, {at: 0, expect: 'circle(110px at 50px 100%)'}, {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'}, {at: 0.6, expect: 'circle(134px at 65px 85%)'}, {at: 1, expect: 'circle(150px at 75px 75%)'}, {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'}, ]); test_composition({ property: 'clip-path', underlying: 'circle(100px at 20px 20%)', addFrom: 'circle(50px at 50px 50%)', replaceTo: 'circle(50% at 150px 150%)', }, [ {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'}, {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'}, {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'}, {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'}, {at: 1, expect: 'circle(50% at 150px 150%)'}, {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'}, ]); test_composition({ property: 'clip-path', underlying: 'circle(farthest-side at 25px 75%)', addFrom: 'circle(farthest-side at 25px 75%)', addTo: 'circle(farthest-side at 50px center)', }, [ {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'}, {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'}, ]); test_composition({ property: 'clip-path', underlying: 'circle(50px at 10px 20px)', addFrom: 'circle(50px at 10px 20px)', addTo: 'circle(farthest-side at 30px 40px)', }, [ {at: 0.25, expect: 'circle(100px at 20px 40px)'}, {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'}, ]); test_composition({ property: 'clip-path', underlying: 'ellipse(10px 20px at 30px 40px)', addFrom: 'ellipse(40px 30px at 20px 10px)', addTo: 'ellipse(140px 130px at 120px 110px)', }, [ {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'}, {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'}, {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'}, {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'}, {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'}, {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'}, ]); test_composition({ property: 'clip-path', underlying: 'ellipse(10px 20px at 30px 40px)', replaceFrom: 'ellipse(40px 30px at 20px 10px)', addTo: 'ellipse(40px 30px at 20px 10px)', }, [ {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'}, {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'}, {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'}, {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'}, {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'}, {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'}, ]); test_composition({ property: 'clip-path', underlying: 'ellipse(25px 75%)', addFrom: 'ellipse()', addTo: 'ellipse(closest-side farthest-side)', }, [ {at: 0.25, expect: 'ellipse()'}, {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, ]); test_composition({ property: 'clip-path', underlying: 'inset(20px)', addFrom: 'inset(20px)', addTo: 'inset(40%)', }, [ {at: -0.3, expect: 'inset(calc(46px + -12%))'}, {at: 0, expect: 'inset(calc(40px + 0%))'}, {at: 0.3, expect: 'inset(calc(34px + 12%))'}, {at: 0.6, expect: 'inset(calc(28px + 24%))'}, {at: 1, expect: 'inset(calc(20px + 40%))'}, {at: 1.5, expect: 'inset(calc(10px + 60%))'}, ]); test_composition({ property: 'clip-path', underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)', }, [ {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'}, {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'}, {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'}, {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'}, {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'}, {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'}, ]); test_composition({ property: 'clip-path', underlying: 'inset(1px 2px round 100px 200px)', addFrom: 'inset(1px 2px round 100px 200px)', addTo: 'inset(101px 102px 101px 102px)', }, [ {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'}, {at: 0, expect: 'inset(2px 4px round 200px 400px)'}, {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'}, {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'}, {at: 1, expect: 'inset(102px 104px round 100px 200px)'}, {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'}, ]); test_composition({ property: 'clip-path', underlying: 'polygon(10px 20%, 30px 40%)', addFrom: 'polygon(10px 20%, 30px 40%)', addTo: 'polygon(110px 120%, 130px 140%)', }, [ {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'}, {at: 0, expect: 'polygon(20px 40%, 60px 80%)'}, {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'}, {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'}, {at: 1, expect: 'polygon(120px 140%, 160px 180%)'}, {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'}, ]); test_composition({ property: 'clip-path', underlying: 'polygon(evenodd, 10px 20px)', addFrom: 'polygon(evenodd, 10px 20px)', addTo: 'polygon(evenodd, 110px 120px)', }, [ {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'}, {at: 0, expect: 'polygon(evenodd, 20px 40px)'}, {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'}, {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'}, {at: 1, expect: 'polygon(evenodd, 120px 140px)'}, {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'}, ]); test_composition({ property: 'clip-path', underlying: 'polygon(round 10px, 10px 20px, 30px 40px)', addFrom: 'polygon(round 10px, 10px 20px, 30px 40px)', addTo: 'polygon(round 30px, 110px 120px, 130px 140px)', }, [ {at: -0.3, expect: 'polygon(round 14px, -10px 10px, 30px 50px)'}, {at: 0, expect: 'polygon(round 20px, 20px 40px, 60px 80px)'}, {at: 0.3, expect: 'polygon(round 26px, 50px 70px, 90px 110px)'}, {at: 0.6, expect: 'polygon(round 32px, 80px 100px, 120px 140px)'}, {at: 1, expect: 'polygon(round 40px, 120px 140px, 160px 180px)'}, {at: 1.5, expect: 'polygon(round 50px, 170px 190px, 210px 230px)'}, ]); test_composition({ property: 'clip-path', underlying: 'polygon(evenodd, 10px 20px)', addFrom: 'polygon(evenodd, 10px 20px)', addTo: 'polygon(nonzero, 30px 40px)', }, [ {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'}, {at: 0.75, expect: 'polygon(30px 40px)'}, ]); test_composition({ property: 'clip-path', underlying: 'polygon(10px 20px, 30px 40px)', addFrom: 'polygon(10px 20px, 30px 40px)', addTo: 'polygon(30px 40px)', }, [ {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'}, {at: 0.75, expect: 'polygon(30px 40px)'}, ]); </script> </body>