wpt / css / css-transforms / animation / transform-origin-interpolation.html

Status: FAIL | Duration: 681ms | Subtests: 54/168 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (54/168)

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

SubtestStatusMessage
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (-0.3) should be [7px 33px]PASS
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (0) should be [10px 30px]PASS
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (0.3) should be [13px 27px]PASS
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (0.6) should be [16px 24px]PASS
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (1) should be [20px 20px]PASS
CSS Transitions: property <transform-origin> from neutral to [20px 20px] at (1.5) should be [25px 15px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (-0.3) should be [7px 33px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (0) should be [10px 30px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (0.3) should be [13px 27px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (0.6) should be [16px 24px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (1) should be [20px 20px]PASS
CSS Transitions with transition: all: property <transform-origin> from neutral to [20px 20px] at (1.5) should be [25px 15px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (-0.3) should be [7px 33px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (0) should be [10px 30px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (0.3) should be [13px 27px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (0.6) should be [16px 24px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (1) should be [20px 20px]PASS
CSS Animations: property <transform-origin> from neutral to [20px 20px] at (1.5) should be [25px 15px]PASS
Web Animations: property <transform-origin> from neutral to [20px 20px] at (-0.3) should be [7px 33px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from neutral to [20px 20px] at (0) should be [10px 30px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from neutral to [20px 20px] at (0.3) should be [13px 27px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from neutral to [20px 20px] at (0.6) should be [16px 24px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from neutral to [20px 20px] at (1) should be [20px 20px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from neutral to [20px 20px] at (1.5) should be [25px 15px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Transitions: property <transform-origin> from [initial] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [initial] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Animations: property <transform-origin> from [initial] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (0) should be [25px 25px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (1) should be [20px 20px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [initial] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (-0.3) should be [33px 7px]PASS
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (0) should be [30px 10px]PASS
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (0.3) should be [27px 13px]PASS
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (0.6) should be [24px 16px]PASS
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (1) should be [20px 20px]PASS
CSS Transitions: property <transform-origin> from [inherit] to [20px 20px] at (1.5) should be [15px 25px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (-0.3) should be [33px 7px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (0) should be [30px 10px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (0.3) should be [27px 13px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (0.6) should be [24px 16px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (1) should be [20px 20px]PASS
CSS Transitions with transition: all: property <transform-origin> from [inherit] to [20px 20px] at (1.5) should be [15px 25px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (-0.3) should be [33px 7px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (0) should be [30px 10px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (0.3) should be [27px 13px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (0.6) should be [24px 16px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (1) should be [20px 20px]PASS
CSS Animations: property <transform-origin> from [inherit] to [20px 20px] at (1.5) should be [15px 25px]PASS
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (-0.3) should be [33px 7px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (0) should be [30px 10px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (0.3) should be [27px 13px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (0.6) should be [24px 16px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (1) should be [20px 20px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [inherit] to [20px 20px] at (1.5) should be [15px 25px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Transitions: property <transform-origin> from [unset] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [unset] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_equals: expected "26.5px 26.5px 0px " but got "calc ( 65 % - 6px ) calc ( 65 % - 6px ) 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_equals: expected "23.5px 23.5px 0px " but got "calc ( 35 % + 6px ) calc ( 35 % + 6px ) 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_equals: expected "22px 22px 0px " but got "calc ( 20 % + 12px ) calc ( 20 % + 12px ) 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (1) should be [20px 20px]FAILassert_equals: expected "20px 20px 0px " but got "calc ( 0 % + 20px ) calc ( 0 % + 20px ) 0px "
CSS Animations: property <transform-origin> from [unset] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_equals: expected "17.5px 17.5px 0px " but got "calc ( - 25 % + 30px ) calc ( - 25 % + 30px ) 0px "
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (-0.3) should be [26.5px 26.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (0) should be [25px 25px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (0.3) should be [23.5px 23.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (0.6) should be [22px 22px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (1) should be [20px 20px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [unset] to [20px 20px] at (1.5) should be [17.5px 17.5px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (-0.3) should be [-15px -15px]FAILassert_equals: expected "- 15px - 15px 0px " but got "- 30 % - 30 % 0px "
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (0) should be [0px 0px]FAILassert_equals: expected "0px 0px 0px " but got "0 % 0 % 0px "
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (0.3) should be [15px 15px]FAILassert_equals: expected "15px 15px 0px " but got "30 % 30 % 0px "
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (0.6) should be [30px 30px]FAILassert_equals: expected "30px 30px 0px " but got "60 % 60 % 0px "
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (1) should be [50px 50px]FAILassert_equals: expected "50px 50px 0px " but got "100 % 100 % 0px "
CSS Transitions: property <transform-origin> from [top left] to [bottom right] at (1.5) should be [75px 75px]FAILassert_equals: expected "75px 75px 0px " but got "150 % 150 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (-0.3) should be [-15px -15px]FAILassert_equals: expected "- 15px - 15px 0px " but got "- 30 % - 30 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (0) should be [0px 0px]FAILassert_equals: expected "0px 0px 0px " but got "0 % 0 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (0.3) should be [15px 15px]FAILassert_equals: expected "15px 15px 0px " but got "30 % 30 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (0.6) should be [30px 30px]FAILassert_equals: expected "30px 30px 0px " but got "60 % 60 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (1) should be [50px 50px]FAILassert_equals: expected "50px 50px 0px " but got "100 % 100 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [top left] to [bottom right] at (1.5) should be [75px 75px]FAILassert_equals: expected "75px 75px 0px " but got "150 % 150 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (-0.3) should be [-15px -15px]FAILassert_equals: expected "- 15px - 15px 0px " but got "- 30 % - 30 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (0) should be [0px 0px]FAILassert_equals: expected "0px 0px 0px " but got "0 % 0 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (0.3) should be [15px 15px]FAILassert_equals: expected "15px 15px 0px " but got "30 % 30 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (0.6) should be [30px 30px]FAILassert_equals: expected "30px 30px 0px " but got "60 % 60 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (1) should be [50px 50px]FAILassert_equals: expected "50px 50px 0px " but got "100 % 100 % 0px "
CSS Animations: property <transform-origin> from [top left] to [bottom right] at (1.5) should be [75px 75px]FAILassert_equals: expected "75px 75px 0px " but got "150 % 150 % 0px "
Web Animations: property <transform-origin> from [top left] to [bottom right] at (-0.3) should be [-15px -15px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [top left] to [bottom right] at (0) should be [0px 0px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [top left] to [bottom right] at (0.3) should be [15px 15px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [top left] to [bottom right] at (0.6) should be [30px 30px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [top left] to [bottom right] at (1) should be [50px 50px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [top left] to [bottom right] at (1.5) should be [75px 75px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (-0.3) should be [32.5px 2.5px]FAILassert_equals: expected "32.5px 2.5px 0px " but got "65 % calc ( 65 % - 30px ) 0px "
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (0.3) should be [17.5px 47.5px]FAILassert_equals: expected "17.5px 47.5px 0px " but got "35 % calc ( 35 % + 30px ) 0px "
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (0.6) should be [10px 70px]FAILassert_equals: expected "10px 70px 0px " but got "20 % calc ( 20 % + 60px ) 0px "
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (1) should be [0px 100px]FAILassert_equals: expected "0px 100px 0px " but got "0 % calc ( 0 % + 100px ) 0px "
CSS Transitions: property <transform-origin> from [center center] to [0% 100px] at (1.5) should be [-12.5px 137.5px]FAILassert_equals: expected "- 12.5px 137.5px 0px " but got "- 25 % calc ( - 25 % + 150px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (-0.3) should be [32.5px 2.5px]FAILassert_equals: expected "32.5px 2.5px 0px " but got "65 % calc ( 65 % - 30px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (0.3) should be [17.5px 47.5px]FAILassert_equals: expected "17.5px 47.5px 0px " but got "35 % calc ( 35 % + 30px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (0.6) should be [10px 70px]FAILassert_equals: expected "10px 70px 0px " but got "20 % calc ( 20 % + 60px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (1) should be [0px 100px]FAILassert_equals: expected "0px 100px 0px " but got "0 % calc ( 0 % + 100px ) 0px "
CSS Transitions with transition: all: property <transform-origin> from [center center] to [0% 100px] at (1.5) should be [-12.5px 137.5px]FAILassert_equals: expected "- 12.5px 137.5px 0px " but got "- 25 % calc ( - 25 % + 150px ) 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (-0.3) should be [32.5px 2.5px]FAILassert_equals: expected "32.5px 2.5px 0px " but got "65 % calc ( 65 % - 30px ) 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (0) should be [25px 25px]FAILassert_equals: expected "25px 25px 0px " but got "50 % 50 % 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (0.3) should be [17.5px 47.5px]FAILassert_equals: expected "17.5px 47.5px 0px " but got "35 % calc ( 35 % + 30px ) 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (0.6) should be [10px 70px]FAILassert_equals: expected "10px 70px 0px " but got "20 % calc ( 20 % + 60px ) 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (1) should be [0px 100px]FAILassert_equals: expected "0px 100px 0px " but got "0 % calc ( 0 % + 100px ) 0px "
CSS Animations: property <transform-origin> from [center center] to [0% 100px] at (1.5) should be [-12.5px 137.5px]FAILassert_equals: expected "- 12.5px 137.5px 0px " but got "- 25 % calc ( - 25 % + 150px ) 0px "
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (-0.3) should be [32.5px 2.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (0) should be [25px 25px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (0.3) should be [17.5px 47.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (0.6) should be [10px 70px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (1) should be [0px 100px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [center center] to [0% 100px] at (1.5) should be [-12.5px 137.5px]FAILassert_true: Web Animations should be supported expected true got false
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (-0.3) should be [-30% 20% 6.5px]PASS
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0) should be [0% 50% 5px]PASS
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.3) should be [30% 80% 3.5px]PASS
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.6) should be [60% 110% 2px]PASS
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1) should be [100% 150% 0px]PASS
CSS Transitions: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1.5) should be [150% 200% -2.5px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (-0.3) should be [-30% 20% 6.5px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0) should be [0% 50% 5px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.3) should be [30% 80% 3.5px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.6) should be [60% 110% 2px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1) should be [100% 150% 0px]PASS
CSS Transitions with transition: all: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1.5) should be [150% 200% -2.5px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (-0.3) should be [-30% 20% 6.5px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0) should be [0% 50% 5px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.3) should be [30% 80% 3.5px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.6) should be [60% 110% 2px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1) should be [100% 150% 0px]PASS
CSS Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1.5) should be [150% 200% -2.5px]PASS
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (-0.3) should be [-30% 20% 6.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0) should be [0% 50% 5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.3) should be [30% 80% 3.5px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (0.6) should be [60% 110% 2px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1) should be [100% 150% 0px]FAILassert_true: Web Animations should be supported expected true got false
Web Animations: property <transform-origin> from [0% 50% 5px] to [100% 150% 0px] at (1.5) should be [150% 200% -2.5px]FAILassert_true: Web Animations should be supported expected true got false

/css/css-transforms/animation/transform-origin-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-origin interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property">
<meta name="assert" content="transform supports animation by computed value">

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

<style>
.parent {
  transform-origin: 30px 10px;
}
.target {
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 25px;
  width: 50px;
  height: 50px;
  background: red;
  transform: scale(1.5);
  transform-origin: 10px 30px;
}
.expected {
  background: green;
  position: relative;
  left: -50px;
}
</style>

<body></body>

<script>
test_interpolation({
  property: 'transform-origin',
  from: neutralKeyframe,
  to: '20px 20px',
}, [
  {at: -0.3, expect: '7px 33px'},
  {at: 0, expect: '10px 30px'},
  {at: 0.3, expect: '13px 27px'},
  {at: 0.6, expect: '16px 24px'},
  {at: 1, expect: '20px 20px'},
  {at: 1.5, expect: '25px 15px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: 'initial',
  to: '20px 20px',
}, [
  {at: -0.3, expect: '26.5px 26.5px'},
  {at: 0, expect: '25px 25px'},
  {at: 0.3, expect: '23.5px 23.5px'},
  {at: 0.6, expect: '22px 22px'},
  {at: 1, expect: '20px 20px'},
  {at: 1.5, expect: '17.5px 17.5px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: 'inherit',
  to: '20px 20px',
}, [
  {at: -0.3, expect: '33px 7px'},
  {at: 0, expect: '30px 10px'},
  {at: 0.3, expect: '27px 13px'},
  {at: 0.6, expect: '24px 16px'},
  {at: 1, expect: '20px 20px'},
  {at: 1.5, expect: '15px 25px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: 'unset',
  to: '20px 20px',
}, [
  {at: -0.3, expect: '26.5px 26.5px'},
  {at: 0, expect: '25px 25px'},
  {at: 0.3, expect: '23.5px 23.5px'},
  {at: 0.6, expect: '22px 22px'},
  {at: 1, expect: '20px 20px'},
  {at: 1.5, expect: '17.5px 17.5px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: 'top left',
  to: 'bottom right',
}, [
  {at: -0.3, expect: '-15px -15px'},
  {at: 0, expect: '0px 0px'},
  {at: 0.3, expect: '15px 15px'},
  {at: 0.6, expect: '30px 30px'},
  {at: 1, expect: '50px 50px'},
  {at: 1.5, expect: '75px 75px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: 'center center',
  to: '0% 100px',
}, [
  {at: -0.3, expect: '32.5px 2.5px'},
  {at: 0, expect: '25px 25px'},
  {at: 0.3, expect: '17.5px 47.5px'},
  {at: 0.6, expect: '10px 70px'},
  {at: 1, expect: '0px 100px'},
  {at: 1.5, expect: '-12.5px 137.5px'},
]);

test_interpolation({
  property: 'transform-origin',
  from: '0% 50% 5px',
  to: '100% 150% 0px'
}, [
  {at: -0.3, expect: '-30% 20% 6.5px'},
  {at: 0, expect: '0% 50% 5px'},
  {at: 0.3, expect: '30% 80% 3.5px'},
  {at: 0.6, expect: '60% 110% 2px'},
  {at: 1, expect: '100% 150% 0px'},
  {at: 1.5, expect: '150% 200% -2.5px'},
]);
</script>