wpt / css / css-transforms / animation / transform-matrix-composition.html

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

TestTest SourceSubtests (8/112)

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

SubtestStatusMessage
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(0, 1, -1, 0, 100, 50)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 50 ) " but got "matrix ( 1 , 0 , 0 , 1 , 50 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(0, 1, -1, 0, 100, 100)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(0, 1, -1, 0, 100, 125)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 125 ) " but got "matrix ( 1 , 0 , 0 , 1 , 125 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(0, 1, -1, 0, 100, 150)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 150 ) " but got "matrix ( 1 , 0 , 0 , 1 , 150 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(0, 1, -1, 0, 100, 175)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 175 ) " but got "matrix ( 1 , 0 , 0 , 1 , 175 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(0, 1, -1, 0, 100, 200)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 200 ) " but got "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(0, 1, -1, 0, 100, 250)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 250 ) " but got "matrix ( 1 , 0 , 0 , 1 , 250 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(0, 1, -1, 0, 100, 50)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 50 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(0, 1, -1, 0, 100, 100)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 100 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(0, 1, -1, 0, 100, 125)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 125 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(0, 1, -1, 0, 100, 150)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 150 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(0, 1, -1, 0, 100, 175)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 175 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(0, 1, -1, 0, 100, 200)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 200 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(0, 1, -1, 0, 100, 250)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 100 , 250 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (-0.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 142.68 , 7.32 , - 25 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 50 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 185.36 , 14.64 , - 50 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 100 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.25) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 206.69 , 18.31 , - 62.5 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 125 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 228.03 , 21.97 , - 75 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 150 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.75) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 249.37 , 25.63 , - 87.5 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 175 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 270.71 , 29.29 , - 100 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 200 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 313.39 , 36.61 , - 125 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 250 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (-0.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 142.68 , 7.32 , - 25 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 185.36 , 14.64 , - 50 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.25) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 206.69 , 18.31 , - 62.5 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 228.03 , 21.97 , - 75 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.75) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 249.37 , 25.63 , - 87.5 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 270.71 , 29.29 , - 100 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to add [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1.5) should be [translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 313.39 , 36.61 , - 125 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 0 , 0 , 1 , 50 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 0 , 0 , 1 , 125 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 0 , 0 , 1 , 150 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 0 , 0 , 1 , 175 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 0 , 0 , 1 , 250 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 100, 200)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 200 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from add [matrix(1, 0, 0, 1, 100, 0)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 1, 0, 0, 200, 300)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 200 , 300 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 1.28 , 0.84 , - 0.03 , 0.3 , - 100 , 150 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 0.95 , 0.86 , - 0.01 , 0.08 , 50 , 75 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.95 , 0.63 , - 0.03 , 0.3 , 100 , 50 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.97 , 0.32 , - 0.04 , 0.63 , 150 , 25 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.99 , - 0.56 , 0.37 , 1.59 , 300 , - 50 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 100, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 100 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from add [matrix(1, 1, 0, 0, 0, 100)] to add [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(0, 1, -1, 0, 150, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 150 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 50 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(0, 1, -1, 0, 200, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 200 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(0, 1, -1, 0, 225, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 225 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 125 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(0, 1, -1, 0, 250, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 250 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 150 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(0, 1, -1, 0, 275, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 275 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 175 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(0, 1, -1, 0, 300, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(0, 1, -1, 0, 350, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 350 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 250 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(0, 1, -1, 0, 150, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 150 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(0, 1, -1, 0, 200, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 200 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(0, 1, -1, 0, 225, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 225 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(0, 1, -1, 0, 250, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 250 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(0, 1, -1, 0, 275, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 275 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(0, 1, -1, 0, 300, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 300 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(0, 1, -1, 0, 100, 0)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(0, 1, -1, 0, 350, 0)]FAILassert_equals: expected "matrix ( 0 , 1 , - 1 , 0 , 350 , 0 ) " but got "matrix ( 0 , 1 , - 1 , 0 , 100 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (-0.5) should be [translateX(150px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 150 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 50 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0) should be [translateX(200px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 200 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 100 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.25) should be [translateX(225px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 225 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 125 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.5) should be [translateX(250px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 250 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 150 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.75) should be [translateX(275px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 275 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 175 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1) should be [translateX(300px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 300 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 200 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1.5) should be [translateX(350px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 350 , 0 , 0 , 1 ) " but got "matrix3d ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 1 , 0 , 250 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (-0.5) should be [translateX(150px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 150 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0) should be [translateX(200px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 200 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.25) should be [translateX(225px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 225 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.5) should be [translateX(250px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 250 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (0.75) should be [translateX(275px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 275 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1) should be [translateX(300px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 300 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing Web Animations: property <transform> underlying [matrix3d(0.8535533905932737,0.1464466094067262,-0.5,0,0.1464466094067262,0.8535533905932737,0.5,0,0.5,-0.5,0.7071067811865476,0,100,0,0,1)] from accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)] to accumulate [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)] at (1.5) should be [translateX(350px) rotate3d(1, 1, 0, 45deg)]FAILassert_equals: expected "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 350 , 0 , 0 , 1 ) " but got "matrix3d ( 0.85 , 0.15 , - 0.5 , 0 , 0.15 , 0.85 , 0.5 , 0 , 0.5 , - 0.5 , 0.71 , 0 , 100 , 0 , 0 , 1 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 0, 0, 1, 50, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 0, 0, 1, 100, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 0, 0, 1, 125, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 150, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 175, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 200, 0)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 250, 0)]PASS
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 0, 0, 1, 50, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 50 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 0, 0, 1, 100, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 0, 0, 1, 125, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 125 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 150, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 150 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 175, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 175 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 200, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 1, 0, 0, 0, 100)] from accumulate [matrix(1, 0, 0, 1, 100, 0)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 250, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 250 , 0 ) " but got "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 0, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) " but got "matrix ( 1.28 , 0.84 , - 0.03 , 0.3 , - 100 , 150 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 0, 100)]PASS
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 0, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) " but got "matrix ( 0.95 , 0.86 , - 0.01 , 0.08 , 50 , 75 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.95 , 0.63 , - 0.03 , 0.3 , 100 , 50 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.97 , 0.32 , - 0.04 , 0.63 , 150 , 25 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) "
Compositing CSS Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 0.99 , - 0.56 , 0.37 , 1.59 , 300 , - 50 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (-0.5) should be [matrix(1, 1, 0, 0, 0, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0) should be [matrix(1, 1, 0, 0, 0, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.25) should be [matrix(1, 1, 0, 0, 0, 100)]FAILassert_equals: expected "matrix ( 1 , 1 , 0 , 0 , 0 , 100 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (0.75) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "
Compositing Web Animations: property <transform> underlying [matrix(1, 0, 0, 1, 100, 0)] from accumulate [matrix(1, 1, 0, 0, 0, 100)] to accumulate [matrix(1, 0, 0, 1, 200, 0)] at (1.5) should be [matrix(1, 0, 0, 1, 300, 0)]FAILassert_equals: expected "matrix ( 1 , 0 , 0 , 1 , 300 , 0 ) " but got "matrix ( 1 , 0 , 0 , 1 , 100 , 0 ) "

/css/css-transforms/animation/transform-matrix-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-matrix composition</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="transform-matrix supports animation as a transform list">

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

<body>
<script>
// For matrix and matrix3d, addition is defined as concatenation whilst
// accumulation works by decomposing the matrix and then accumulating the
// decomposed functions. We can therefore test the difference between the
// two by mixing functions such that a naive multiplication would look
// different than the accumulation behavior.
//
// Note that due to the complexities of decomposition the test space here is
// huge; we cover some basic cases and hope that the tests for the individual
// functions provide a lot of the remaining coverage.

// Creates a matrix3d function, encoding the passed rotation and translation.
// Note that the translate will not be affected by the rotation.
function create3dMatrix(x, y, z, radians, translateX) {
  // Normalize the rotation axes.
  const length = Math.sqrt(x*x + y*y + z*z);
  x /= length;
  y /= length;
  z /= length;

  const sc = Math.sin(radians / 2) * Math.cos(radians / 2);
  const sq = Math.sin(radians / 2) * Math.sin(radians / 2);

  // https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined
  // https://drafts.csswg.org/css-transforms-2/#Translate3dDefined
  return 'matrix3d(' + [
      1 - 2 * (y*y + z*z) * sq,
      2 * (x * y * sq + z * sc),
      2 * (x * z * sq - y * sc),
      0,
      2 * (x * y * sq - z * sc),
      1 - 2 * (x*x + z*z) * sq,
      2 * (y * z * sq + x * sc),
      0,
      2 * (x * z * sq + y * sc),
      2 * (y * z * sq - x * sc),
      1 - 2 * (x*x + y*y) * sq,
      0,
      translateX, 0, 0, 1].join() + ')';
}

// ------------ Addition tests --------------

test_composition({
  property: 'transform',
  // translateX(100px) rotate(90deg)
  underlying: 'matrix(0, 1, -1, 0, 100, 0)',
  // translateX(100px)
  addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(0, 1, -1, 0, 100, 50)'},
  {at: 0, expect: 'matrix(0, 1, -1, 0, 100, 100)'},
  {at: 0.25, expect: 'matrix(0, 1, -1, 0, 100, 125)'},
  {at: 0.5, expect: 'matrix(0, 1, -1, 0, 100, 150)'},
  {at: 0.75, expect: 'matrix(0, 1, -1, 0, 100, 175)'},
  {at: 1, expect: 'matrix(0, 1, -1, 0, 100, 200)'},
  {at: 1.5, expect: 'matrix(0, 1, -1, 0, 100, 250)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px) rotate3d(1, 1, 0, 45deg)
  underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
  // translateX(100px)
  addFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
  // translateX(200px)
  addTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
}, [
  // matrix3ds are hard to read; these are the decomposed forms for clarity
  {at: -0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)'},
  {at: 0, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)'},
  {at: 0.25, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)'},
  {at: 0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)'},
  {at: 0.75, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)'},
  {at: 1, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)'},
  {at: 1.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)'},
]);

// Addition of non-invertible matrices is still defined as concatenation so
// includes the underlying value.

test_composition({
  property: 'transform',
  // Non-invertible.
  underlying: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(100px)
  addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 0.75, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 1, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 1.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px)
  underlying: 'matrix(1, 0, 0, 1, 100, 0)',
  // Non-invertible
  addFrom: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
]);

// ------------ Accumulation tests --------------

test_composition({
  property: 'transform',
  // translateX(100px) rotate(90deg)
  underlying: 'matrix(0, 1, -1, 0, 100, 0)',
  // translateX(100px)
  accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(0, 1, -1, 0, 150, 0)'},
  {at: 0, expect: 'matrix(0, 1, -1, 0, 200, 0)'},
  {at: 0.25, expect: 'matrix(0, 1, -1, 0, 225, 0)'},
  {at: 0.5, expect: 'matrix(0, 1, -1, 0, 250, 0)'},
  {at: 0.75, expect: 'matrix(0, 1, -1, 0, 275, 0)'},
  {at: 1, expect: 'matrix(0, 1, -1, 0, 300, 0)'},
  {at: 1.5, expect: 'matrix(0, 1, -1, 0, 350, 0)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px) rotate3d(1, 1, 0, 45deg)
  underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
  // translateX(100px)
  accumulateFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
  // translateX(200px)
  accumulateTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
}, [
  // matrix3ds are hard to read; these are the decomposed forms for clarity
  {at: -0.5, expect: 'translateX(150px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0, expect: 'translateX(200px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.25, expect: 'translateX(225px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.5, expect: 'translateX(250px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.75, expect: 'translateX(275px) rotate3d(1, 1, 0, 45deg)'},
  {at: 1, expect: 'translateX(300px) rotate3d(1, 1, 0, 45deg)'},
  {at: 1.5, expect: 'translateX(350px) rotate3d(1, 1, 0, 45deg)'},
]);

// Accumulation of non-invertible matrices falls back to replace behavior.

test_composition({
  property: 'transform',
  // Non-invertible.
  underlying: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(100px)
  accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 0, 0, 1, 50, 0)'},
  {at: 0, expect: 'matrix(1, 0, 0, 1, 100, 0)'},
  {at: 0.25, expect: 'matrix(1, 0, 0, 1, 125, 0)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 150, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 175, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 200, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 250, 0)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px)
  underlying: 'matrix(1, 0, 0, 1, 100, 0)',
  // Non-invertible
  accumulateFrom: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
]);
</script>
</body>