Update web-platform-tests to revision 422b440e0b587317e4539378b18c362a4ea7afee

tests/wpt/metadata/FileAPI/url/url-in-tags-revoke.window.js.ini

@@ -7,7 +7,7 @@
     expected: FAIL
 
   [Opening a blob URL in a new window immediately before revoking it works.]
-    expected: TIMEOUT
+    expected: FAIL
 
   [Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
     expected: FAIL

tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini

@@ -2,9 +2,6 @@
   [Revoke blob URL after creating Request, will fetch]
     expected: FAIL
 
-  [Revoke blob URL after calling fetch, fetch should succeed]
-    expected: FAIL
-
 
 [url-with-fetch.any.html]
   [Revoke blob URL after creating Request, will fetch]

tests/wpt/metadata/css/css-color/animation/color-composition.html.ini

@@ -0,0 +1,28 @@
+[color-composition.html]
+  [Compositing: property <color> underlying [rgb(60, 60, 60)\] from add [rgb(0, 0, 0)\] to replace [rgb(50, 50, 50)\] at (1.2) should be [rgb(48, 48, 48)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(50, 50, 50)\] from add [rgb(10, 10, 10)\] to replace [rgb(30, 30, 30)\] at (1.2) should be [rgb(24, 24, 24)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(50, 50, 50)\] from add [rgb(10, 10, 10)\] to replace [rgb(30, 30, 30)\] at (1) should be [rgb(30, 30, 30)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(60, 60, 60)\] from add [rgb(0, 0, 0)\] to replace [rgb(50, 50, 50)\] at (1) should be [rgb(50, 50, 50)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(60, 60, 60)\] from add [rgb(0, 0, 0)\] to replace [rgb(50, 50, 50)\] at (0.5) should be [rgb(55, 55, 55)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(50, 50, 50)\] from add [rgb(10, 10, 10)\] to replace [rgb(30, 30, 30)\] at (0) should be [rgb(60, 60, 60)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(50, 50, 50)\] from add [rgb(10, 10, 10)\] to replace [rgb(30, 30, 30)\] at (0.2) should be [rgb(54, 54, 54)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(60, 60, 60)\] from add [rgb(0, 0, 0)\] to replace [rgb(50, 50, 50)\] at (1.5) should be [rgb(45, 45, 45)\]]
+    expected: FAIL
+
+  [Compositing: property <color> underlying [rgb(50, 50, 50)\] from add [rgb(10, 10, 10)\] to replace [rgb(30, 30, 30)\] at (1.5) should be [rgb(15, 15, 15)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-flexbox/animation/flex-basis-composition.html.ini

@@ -0,0 +1,76 @@
+[flex-basis-composition.html]
+  [Compositing: property <flex-basis> underlying [100px\] from add [100px\] to add [auto\] at (1.5) should be [auto\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [10%\] from add [100px\] to add [20%\] at (1.5) should be [calc(-50px + 40%)\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [10%\] from add [100px\] to add [20%\] at (0) should be [calc(100px + 10%)\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [10%\] from add [100px\] to add [20%\] at (-0.3) should be [calc(130px + 4%)\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [100px\] to add [auto\] at (-0.3) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [100px\] to add [auto\] at (1) should be [auto\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [10%\] from add [100px\] to add [20%\] at (0.5) should be [calc(50px + 20%)\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [100px\] to add [auto\] at (0.5) should be [auto\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [100px\] to add [auto\] at (0) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [10%\] from add [100px\] to add [20%\] at (1) should be [30%\]]
+    expected: FAIL
+
+  [Compositing: property <flex-basis> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-images/animations/object-position-interpolation.html.ini

@@ -1,640 +0,0 @@
-[object-position-interpolation.html]
-  [object-position-interpolation]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (0.5) should be [50px 100px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (0.5) should be [calc(25% + 25px) calc(50% + 50px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (1) should be [100% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [initial\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [unset\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from neutral to [20px 20px\] at (1.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [inherit\] to [20px 20px\] at (0) should be [30px 10px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [top right\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (0.5) should be [50px 100px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from neutral to [20px 20px\] at (0) should be [10px 30px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [50px 100px\] at (0.5) should be [calc(25% + 25px) calc(50% + 50px)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 50%\] to [100% 100%\] at (-0.3) should be [35% 35%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (1.5) should be [125% 125%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [initial\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (-0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [50px 100px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [100px 200px\] to [0px 0px\] at (0.5) should be [50px 100px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [top right\] at (1) should be [100% 0%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from neutral to [20px 20px\] at (1.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [unset\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [50px 100px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from neutral to [20px 20px\] at (-0.3) should be [7px 33px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [0px 0px\] at (-0.3) should be [65% 130%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (-0.3) should be [calc(65% + -15px) calc(130% + -30px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from neutral to [20px 20px\] at (-0.3) should be [7px 33px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from neutral to [20px 20px\] at (-0.3) should be [7px 33px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [0px 0px\] at (0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.5) should be [75% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [initial\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [100px 200px\] to [0px 0px\] at (1.5) should be [-50px -100px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [top right\] at (1.5) should be [125% -25%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 50%\] to [100% 100%\] at (0.5) should be [75% 75%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [inherit\] to [20px 20px\] at (1.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (1.5) should be [calc(-25% + 75px) calc(-50% + 150px)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.3) should be [65% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [50px 100px\] at (-0.3) should be [calc(65% + -15px) calc(130% + -30px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (1.5) should be [-50px -100px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [100px 200px\] to [0px 0px\] at (-0.3) should be [130px 260px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [initial\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [50px 100px\] at (1) should be [calc(0% + 50px) calc(0% + 100px)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [initial\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [50px 100px\] at (1.5) should be [calc(-25% + 75px) calc(-50% + 150px)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.9) should be [95% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from neutral to [20px 20px\] at (0.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [0px 0px\] at (0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [inherit\] to [20px 20px\] at (0.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [initial\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [initial\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [inherit\] to [20px 20px\] at (0) should be [30px 10px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [unset\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [unset\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (1) should be [calc(0% + 50px) calc(0% + 100px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [inherit\] to [20px 20px\] at (0.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [100px 200px\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from neutral to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [unset\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (1.5) should be [125% 125%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [unset\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [initial\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.5) should be [75% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (1.5) should be [125% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [100px 200px\] to [0px 0px\] at (0) should be [100px 200px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 50%\] to [100% 100%\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (1) should be [100% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [top right\] at (1.5) should be [125% -25%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [top right\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [unset\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (0.5) should be [75% 75%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from neutral to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [inherit\] to [20px 20px\] at (-0.3) should be [33px 7px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (2) should be [150% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (1) should be [100% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [initial\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [top right\] at (1) should be [100% 0%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [unset\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [top right\] at (1.5) should be [125% -25%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [top right\] at (0.5) should be [75% 25%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (2) should be [150% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (1.5) should be [-50px -100px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [initial\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (2) should be [150% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (1) should be [100% 100%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.3) should be [65% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [inherit\] to [20px 20px\] at (0.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from neutral to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [100px 200px\] to [0px 0px\] at (1.5) should be [-50px -100px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0) should be [center\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (-0.3) should be [35% 35%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [unset\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [inherit\] to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [inherit\] to [20px 20px\] at (1.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [top right\] at (0.5) should be [75% 25%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from neutral to [20px 20px\] at (0.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (-0.3) should be [35% 35%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 50%\] to [100% 100%\] at (1) should be [100% 100%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [top right\] at (-0.3) should be [35% 65%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (-0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [0px 0px\] at (-0.3) should be [65% 130%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [unset\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (0.5) should be [75% 75%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0) should be [center\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [inherit\] to [20px 20px\] at (-0.3) should be [33px 7px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [top right\] at (1) should be [100% 0%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [top right\] at (-0.3) should be [35% 65%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 50%\] to [100% 100%\] at (1) should be [100% 100%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [initial\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from neutral to [20px 20px\] at (0.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [unset\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from neutral to [20px 20px\] at (0) should be [10px 30px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [initial\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.5) should be [75% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [inherit\] to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [initial\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [initial\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (1.5) should be [calc(-25% + 75px) calc(-50% + 150px)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (1.5) should be [-25% -50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [top right\] at (-0.3) should be [35% 65%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [50px 100px\] at (-0.3) should be [calc(65% + -15px) calc(130% + -30px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [unset\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (-0.3) should be [130px 260px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [inherit\] to [20px 20px\] at (-0.3) should be [33px 7px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (0.5) should be [calc(25% + 25px) calc(50% + 50px)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [inherit\] to [20px 20px\] at (1.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.9) should be [95% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.3) should be [65% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (0) should be [center\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.3) should be [65% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [0px 0px\] at (1.5) should be [-25% -50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [unset\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 50%\] to [100% 100%\] at (1.5) should be [125% 125%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [100px 200px\] to [0px 0px\] at (-0.3) should be [130px 260px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [50px 100px\] at (0.5) should be [calc(25% + 25px) calc(50% + 50px)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.5) should be [75% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (0) should be [100px 200px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [top right\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [initial\] to [20px 20px\] at (0.5) should be [calc(10px + 25%) calc(10px + 25%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (1) should be [calc(0% + 50px) calc(0% + 100px)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [100px 200px\] to [0px 0px\] at (0.5) should be [50px 100px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [top right\] at (1) should be [100% 0%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (-0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (1.5) should be [125% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 50%\] to [100% 100%\] at (1.5) should be [125% 125%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [100px 200px\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (1.5) should be [125% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.9) should be [95% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [unset\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (0.9) should be [95% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 50%\] to [100% 100%\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from neutral to [20px 20px\] at (1.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [top right\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from neutral to [20px 20px\] at (0) should be [10px 30px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [initial\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [initial\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from neutral to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 50%\] to [100% 100%\] at (1) should be [100% 100%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [initial\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (-0.3) should be [65% 130%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [50px 100px\] at (-0.3) should be [calc(65% + -15px) calc(130% + -30px)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (1) should be [0px 0px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [top right\] at (0.5) should be [75% 25%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (0) should be [center\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [50px 100px\] at (1.5) should be [calc(-25% + 75px) calc(-50% + 150px)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [inherit\] to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [inherit\] to [20px 20px\] at (0) should be [30px 10px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [inherit\] to [20px 20px\] at (1) should be [20px 20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [0px 0px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [initial\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 100%\] to [50px 100px\] at (1) should be [calc(0% + 50px) calc(0% + 100px)\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (-0.3) should be [65% 130%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (0) should be [100px 200px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [initial\] to [20px 20px\] at (1) should be [calc(20px + 0%) calc(20px + 0%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [unset\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [0px 0px\] at (1.5) should be [-25% -50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [unset\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [inherit\] to [20px 20px\] at (0.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [top right\] at (1.5) should be [125% -25%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from neutral to [20px 20px\] at (0) should be [10px 30px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [top right\] at (-0.3) should be [35% 65%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [100px 200px\] to [0px 0px\] at (-0.3) should be [130px 260px\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [right 0% bottom 50%\] at (2) should be [150% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [center\] to [right 0% bottom 50%\] at (-0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from neutral to [20px 20px\] at (1.5) should be [25px 15px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [inherit\] to [20px 20px\] at (1.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [unset\] to [20px 20px\] at (0) should be [50% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 50%\] to [100% 100%\] at (-0.3) should be [35% 35%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (1.5) should be [-25% -50%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (1) should be [100% 50%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from neutral to [20px 20px\] at (0.5) should be [15px 25px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [unset\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [unset\] to [20px 20px\] at (1.5) should be [calc(30px + -25%) calc(30px + -25%)\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [50% 50%\] to [100% 100%\] at (0.5) should be [75% 75%\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [100px 200px\] to [0px 0px\] at (0) should be [100px 200px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [inherit\] to [20px 20px\] at (-0.3) should be [33px 7px\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [50% 100%\] to [0px 0px\] at (0.5) should be [25% 50%\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from neutral to [20px 20px\] at (-0.3) should be [7px 33px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [50% 100%\] to [0px 0px\] at (0) should be [50% 100%\]]
-    expected: FAIL
-
-  [Web Animations: property <object-position> from [inherit\] to [20px 20px\] at (0) should be [30px 10px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <object-position> from [unset\] to [20px 20px\] at (-0.3) should be [calc(-6px + 65%) calc(-6px + 65%)\]]
-    expected: FAIL
-
-  [CSS Transitions: property <object-position> from [center\] to [right 0% bottom 50%\] at (1.5) should be [125% 50%\]]
-    expected: FAIL
-
-  [CSS Animations: property <object-position> from [center\] to [top right\] at (0.5) should be [75% 25%\]]
-    expected: FAIL
-

tests/wpt/metadata/css/css-transforms/animation/perspective-composition.html.ini

@@ -0,0 +1,61 @@
+[perspective-composition.html]
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [100px\] to add [none\] at (1.5) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [100px\] to add [none\] at (1) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [100px\] to add [none\] at (-0.3) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [100px\] to add [none\] at (0.5) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [100px\] to add [none\] at (0) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <perspective> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/rotate-composition.html.ini

@@ -0,0 +1,187 @@
+[rotate-composition.html]
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [none\] to replace [0 1 0 100deg\] at (-1) should be [0.31 -0.22 0.92 131.66deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (0.75) should be [-1.51909e-17 1 -4.55726e-17 75deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [none\] to replace [0 1 0 100deg\] at (-1) should be [0 1 0 -100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [none\] to replace [0 1 0 100deg\] at (1) should be [0 1 0 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (-1) should be [1 0 0 160deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [none\] at (0.25) should be [1 2 3 270deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (0.25) should be [-1.48952e-16 -0.894427 -0.447214 131.81deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [none\] to replace [0 1 0 100deg\] at (1) should be [0 1 0 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (0.25) should be [-1.20172e-16 1 -3.60516e-16 25deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (0.75) should be [-1.51909e-17 1 -4.55726e-17 75deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (-1) should be [-6.12323e-17 -1 1.57009e-16 90deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [none\] to replace [0 1 0 100deg\] at (2) should be [-0.2 0.79 -0.59 151.11deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [none\] at (2) should be [1 2 3 -360deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (-1) should be [0 1 0 130deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [none\] to replace [0 1 0 100deg\] at (0.75) should be [0 1 0 75deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (0) should be [1 0 0 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (0.25) should be [-1.20172e-16 1 -3.60516e-16 25deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (2) should be [-3.3235e-17 -1 -9.97049e-17 160deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (0) should be [1 2 3 50deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (2) should be [0 1 0 -110deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (1) should be [90deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (2) should be [-3.3235e-17 -1 -9.97049e-17 160deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (1) should be [130deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [2 4 6 270deg\] to replace [none\] at (0) should be [2 4 6 270deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [2 4 6 270deg\] to replace [none\] at (-1) should be [2 4 6 540deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (1) should be [0 1 0 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (0.75) should be [1 2 3 80deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (0) should be [1 2 3 360deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (-1) should be [-5.49276e-17 -1 -1.64783e-16 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (-1) should be [1 2 3 10deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 270deg\] from add [1 2 3 90deg\] to replace [0 1 0 100deg\] at (1) should be [0 1 0 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (1) should be [1 2 3 90deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [none\] at (1) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (2) should be [1 0 0 -20deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (2) should be [150deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [none\] to replace [0 1 0 100deg\] at (0.25) should be [0.21 0.73 0.64 86.72deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (-1) should be [90deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (1) should be [1 0 0 40deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [none\] at (-1) should be [1 2 3 720deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (0.25) should be [1 2 3 60deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (0) should be [110deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (0.75) should be [1 0 0 55deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 200deg\] from add [1 0 0 -100deg\] to replace [1 0 0 40deg\] at (0.25) should be [1 0 0 85deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (2) should be [-6.12323e-17 -1 -4.71028e-16 90deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (-1) should be [-5.49276e-17 -1 -1.64783e-16 100deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (0.25) should be [0 1 0 30deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [2 4 6 270deg\] to replace [none\] at (0.75) should be [2 4 6 67.5deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [0 1 0 100deg\] at (0) should be [1 2 3 360deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [none\] to replace [0 1 0 100deg\] at (2) should be [0 1 0 200deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [none\] to replace [0 1 0 100deg\] at (0.75) should be [0.07 0.97 0.21 92.05deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (0.75) should be [125deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [2 4 6 270deg\] to replace [none\] at (0.25) should be [2 4 6 202.5deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [2 4 6 270deg\] to replace [none\] at (2) should be [2 4 6 -270deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (0.75) should be [0 1 0 -10deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (1) should be [0 1 0 -30deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [100deg\] from add [10deg\] to add [30deg\] at (0.25) should be [115deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 40deg\] from add [2 4 6 10deg\] to add [3 6 9 50deg\] at (2) should be [1 2 3 130deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [none\] from add [none\] to replace [0 1 0 100deg\] at (0.25) should be [0 1 0 25deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 2 3 90deg\] from add [2 4 6 270deg\] to replace [none\] at (0) should be [1 2 3 360deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [0 1 0 -40deg\] from replace [0 1 0 50deg\] to add [0 1 0 10deg\] at (0) should be [0 1 0 50deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (0.75) should be [-2.94392e-17 -0.707107 0.707107 70.5288deg\]]
+    expected: FAIL
+
+  [Compositing: property <rotate> underlying [1 0 0 90deg\] from add [0 1 0 180deg\] to replace [0 0 1 90deg\] at (0) should be [-4.32978e-17 -0.707107 -0.707107 180deg\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/scale-composition.html.ini

@@ -0,0 +1,115 @@
+[scale-composition.html]
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (-0.5) should be [-2 -1 0\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (1.5) should be [-0.5 -3.5 -7.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (-0.5) should be [2.5 11 22.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (2) should be [2 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (0) should be [1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (-0.5) should be [5.5 14.5 26.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (-1) should be [0.5 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (0.25) should be [6.5 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (1) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (0.75) should be [7.5 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (0.75) should be [5.5 6.5 7.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (0.75) should be [6.25 8.5 11.25\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (1) should be [1.5 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (1.5) should be [8.5 7 4.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (0) should be [4 10 18\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [4 5 6\] to replace [none\] at (0.75) should be [1.75 2 2.25\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (1) should be [8 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (1) should be [7 8 9\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (0.25) should be [3.25 7.75 13.75\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (0.25) should be [1.125 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (1) should be [7 8 9\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (1.5) should be [9 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [4 5 6\] to replace [none\] at (0.25) should be [3.25 4 4.75\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (0.25) should be [4.75 9.5 15.75\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (0) should be [4 10 18\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (0.5) should be [2.5 5.5 9.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (0.25) should be [2.5 3.5 4.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (0) should be [6 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [7 8 9\] at (0.5) should be [5.5 9 13.5\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [4 5 6\] to replace [none\] at (0.75) should be [1.75 3.25 5.25\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [4 5 6\] to replace [none\] at (0) should be [4 5 6\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [4 5 6\] to replace [none\] at (2) should be [-2 -3 -4\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (-0.5) should be [5 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (0.5) should be [4 5 6\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [2 1\] from add [3 1\] to add [4 1\] at (0.5) should be [7 1\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [4 5 6\] to replace [none\] at (-1) should be [7 9 11\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [1 2 3\] from add [none\] to replace [7 8 9\] at (1.5) should be [10 11 12\]]
+    expected: FAIL
+
+  [Compositing: property <scale> underlying [none\] from add [none\] to replace [1.5 1\] at (0.75) should be [1.375 1\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-composition.html.ini

@@ -0,0 +1,64 @@
+[transform-composition.html]
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (1) should be [matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (0) should be [matrix3d(1, 0, 0, 0, 0, 6.12323e-17, 1, 0, 0, -1, 6.12323e-17, 0, 100, 6.12323e-15, 100, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (0.5) should be [rotateX(150deg) rotateY(150deg) translate(60px, 120px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (1) should be [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (0.75) should be [matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.22045e-16, 0, 25, 1.53081e-15, 25, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (1.5) should be [rotateX(250deg) rotateY(250deg) translate(160px, 320px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (-0.5) should be [rotateX(50deg) rotateY(50deg) translate(-40px, -80px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (0.5) should be [rotateX(45deg) rotateY(180deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (0) should be [rotateX(100deg) rotateY(100deg) translate(10px, 20px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (0.5) should be [matrix3d(1.5, 0, 0, 0, 0, 3.33067e-16, 1.5, 0, 0, -1, 2.22045e-16, 0, 50, 3.06162e-15, 50, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (0.25) should be [matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.22045e-16, 0, 75, 4.59243e-15, 75, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (0) should be [rotateX(45deg) rotateY(0deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (-0.5) should be [matrix3d(0.5, 0, 0, 0, 0, 1.11022e-16, 0.5, 0, 0, -1, 2.22045e-16, 0, 150, 9.18485e-15, 150, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (0.75) should be [rotateX(175deg) rotateY(175deg) translate(85px, 170px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (1) should be [rotateX(45deg) rotateY(360deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(90deg)\] from add [translate(100px, 100px)\] to add [scale(2)\] at (1.5) should be [matrix3d(2.5, 0, 0, 0, 0, 5.55112e-16, 2.5, 0, 0, -1, 2.22045e-16, 0, -50, -3.06162e-15, -50, 1)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (1.5) should be [rotateX(45deg) rotateY(540deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (0.75) should be [rotateX(45deg) rotateY(270deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(100deg) rotateY(100deg)\] from add [translate(10px, 20px)\] to replace [rotateX(200deg) rotateY(200deg) translate(110px, 220px)\] at (0.25) should be [rotateX(125deg) rotateY(125deg) translate(35px, 70px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (-0.5) should be [rotateX(45deg) rotateY(-180deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from add [none\] to add [rotateY(360deg)\] at (0.25) should be [rotateX(45deg) rotateY(90deg)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-matrix-composition.html.ini

@@ -0,0 +1,169 @@
+[transform-matrix-composition.html]
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+
+  [Compositing: 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)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-perspective-composition.html.ini

@@ -0,0 +1,40 @@
+[transform-perspective-composition.html]
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (1.5) should be [perspective(12.5px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (0) should be [perspective(5px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (-0.5) should be [perspective(4.12px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (1) should be [perspective(8.33px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (0.75) should be [perspective(7.06px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (-0.5) should be [perspective(4.12px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (0.25) should be [perspective(5.45px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (1) should be [perspective(8.33px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (0.75) should be [perspective(7.06px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (0.25) should be [perspective(5.45px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from accumulate [perspective(10px)\] to accumulate [perspective(50px)\] at (0.5) should be [perspective(6.15px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (0) should be [perspective(5px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [perspective(10px)\] from add [perspective(10px)\] to add [perspective(50px)\] at (0.5) should be [perspective(6.15px)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-rotate-composition.html.ini

@@ -0,0 +1,190 @@
+[transform-rotate-composition.html]
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (1.5) should be [rotateY(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (-0.5) should be [rotateZ(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (1.5) should be [rotate(45deg) skew(10deg, 20deg) rotate(315deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (0) should be [rotate(90deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (-0.5) should be [rotateX(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (-0.5) should be [rotate(0deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (0) should be [rotateZ(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (0.75) should be [rotateX(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (-0.5) should be [rotateX(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (1) should be [rotateY(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (1.5) should be [rotateX(45deg) rotateY(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (1) should be [rotate(45deg) skew(10deg, 20deg) rotate(225deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (1) should be [rotateX(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (1) should be [rotateZ(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (0.5) should be [rotateY(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (0.75) should be [rotate(225deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (0) should be [rotateX(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (0) should be [rotateY(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (1) should be [rotateZ(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (-0.5) should be [rotate(45deg) skew(10deg, 20deg) rotate(-45deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (1.5) should be [rotateX(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (0.5) should be [rotateZ(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (0.75) should be [rotateY(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (1) should be [rotateX(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (0) should be [rotate(45deg) skew(10deg, 20deg) rotate(45deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (1.5) should be [rotateZ(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (0) should be [rotateY(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (0.5) should be [rotate(45deg) skew(10deg, 20deg) rotate(135deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (0.5) should be [rotateY(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (0.75) should be [rotateZ(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (0.75) should be [rotate(45deg) skew(10deg, 20deg) rotate(180deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (0.75) should be [rotateY(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (0.75) should be [rotateX(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (0.25) should be [rotateZ(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (0.25) should be [rotateY(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (0.25) should be [rotateX(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (0.5) should be [rotateZ(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (-0.5) should be [rotateY(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (0.25) should be [rotateX(45deg) rotateY(40deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (0.5) should be [rotate(180deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (-0.5) should be [rotateZ(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (1.5) should be [rotateX(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from accumulate [rotateX(40deg)\] to accumulate [rotateX(60deg)\] at (0.5) should be [rotateX(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (0) should be [rotateX(45deg) rotateY(30deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from add [rotate(45deg)\] to add [rotate(225deg)\] at (0.25) should be [rotate(45deg) skew(10deg, 20deg) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (1.5) should be [rotateY(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from add [rotateY(40deg)\] to add [rotateY(60deg)\] at (-0.5) should be [rotateY(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (1) should be [rotateY(80deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (0.75) should be [rotateX(45deg) rotateY(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (1.5) should be [rotate(360deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (0.25) should be [rotate(135deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateY(20deg)\] from accumulate [rotateY(40deg)\] to accumulate [rotateY(60deg)\] at (0.25) should be [rotateY(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (0.25) should be [rotateX(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (1.5) should be [rotateZ(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (0) should be [rotateZ(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotate(45deg) skew(10deg, 20deg)\] from accumulate [rotate(45deg)\] to accumulate [rotate(225deg)\] at (1) should be [rotate(270deg) skew(10deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (0.5) should be [rotateX(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from accumulate [rotateZ(40deg)\] to accumulate [rotateZ(60deg)\] at (0.25) should be [rotateZ(65deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(20deg)\] from add [rotateX(40deg)\] to add [rotateX(60deg)\] at (0) should be [rotateX(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateZ(20deg)\] from add [rotateZ(40deg)\] to add [rotateZ(60deg)\] at (0.75) should be [rotateZ(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (0.5) should be [rotateX(45deg) rotateY(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (1) should be [rotateX(45deg) rotateY(70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [rotateX(45deg)\] from accumulate [rotateY(30deg)\] to accumulate [rotateY(70deg)\] at (-0.5) should be [rotateX(45deg) rotateY(10deg)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-scale-composition.html.ini

@@ -0,0 +1,148 @@
+[transform-scale-composition.html]
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (-0.5) should be [scaleZ(3.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (0.5) should be [scaleY(4.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (1.5) should be [scaleX(9)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (-0.5) should be [scaleZ(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (0) should be [scaleX(4)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (0.25) should be [scaleZ(6.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (1) should be [scaleZ(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.5) should be [scale3d(2, 4, 3.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (-0.5) should be [scaleX(3.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.75) should be [scale3d(2, 4, 3.75)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0) should be [scaleZ(4)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.5) should be [scaleZ(4.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (1) should be [scaleX(8)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (0) should be [scaleY(4)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (0.25) should be [scaleX(6.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (1) should be [scaleY(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (1.5) should be [scaleZ(9)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (1) should be [scale3d(2, 4, 4)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (1.5) should be [scaleZ(5.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (-0.5) should be [scaleY(3.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (0.25) should be [scaleX(4.25)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (1) should be [scaleX(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (1.5) should be [scale3d(2, 4, 4.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (0.75) should be [scaleY(7.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (0.75) should be [scaleX(4.75)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (0.5) should be [scaleY(7)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (0.25) should be [scaleY(6.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0) should be [scale3d(2, 4, 3)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (-0.5) should be [scale3d(2, 4, 2.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (0.75) should be [scaleZ(7.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.75) should be [scaleZ(4.75)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (-0.5) should be [scaleY(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (0.5) should be [scaleX(4.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scale(2, 4)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.25) should be [scale3d(2, 4, 3.25)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (1.5) should be [scaleY(5.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (0) should be [scaleX(6)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (0.75) should be [scaleY(4.75)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (0) should be [scaleY(6)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (1) should be [scaleZ(8)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (0) should be [scaleZ(6)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (0.75) should be [scaleX(7.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (-0.5) should be [scaleX(5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (1) should be [scaleY(8)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from accumulate [scaleY(3)\] to accumulate [scaleY(4)\] at (0.25) should be [scaleY(4.25)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from accumulate [scaleX(3)\] to accumulate [scaleX(4)\] at (1.5) should be [scaleX(5.5)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleY(2)\] from add [scaleY(3)\] to add [scaleY(4)\] at (1.5) should be [scaleY(9)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from accumulate [scaleZ(3)\] to accumulate [scaleZ(4)\] at (0.25) should be [scaleZ(4.25)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleZ(2)\] from add [scaleZ(3)\] to add [scaleZ(4)\] at (0.5) should be [scaleZ(7)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [scaleX(2)\] from add [scaleX(3)\] to add [scaleX(4)\] at (0.5) should be [scaleX(7)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-skew-composition.html.ini

@@ -0,0 +1,130 @@
+[transform-skew-composition.html]
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (0.25) should be [skew(10deg, 20deg) skew(35deg, 20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (0) should be [skewY(10deg) skewY(30deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (0.5) should be [skewX(10deg) skewX(40deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (0.75) should be [skew(10deg, 20deg) skew(45deg, 40deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (-0.5) should be [skew(10deg, 20deg) skew(20deg, -10deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (1.5) should be [skew(60deg, 135deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (0) should be [skewY(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (0) should be [skewX(10deg) skewX(30deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (0.5) should be [skewX(95deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (-0.5) should be [skewY(55deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (0) should be [skewX(75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (0.75) should be [skewX(105deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (1.5) should be [skewY(10deg) skewY(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (1) should be [skew(10deg, 20deg) skew(50deg, 50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (1) should be [skew(50deg, 115deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (0.5) should be [skewY(10deg) skewY(40deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (1) should be [skewY(115deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (1) should be [skewX(115deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (1.5) should be [skewY(135deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (1.5) should be [skewX(10deg) skewX(60deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (-0.5) should be [skew(20deg, 55deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (0.5) should be [skew(10deg, 20deg) skew(40deg, 30deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (1.5) should be [skew(10deg, 20deg) skew(60deg, 70deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (1) should be [skewY(10deg) skewY(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (-0.5) should be [skewX(10deg) skewX(20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (1) should be [skewX(10deg) skewX(50deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (0.75) should be [skew(45deg, 105deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (0.25) should be [skew(35deg, 85deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (0.5) should be [skewY(95deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (0.75) should be [skewY(105deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (1.5) should be [skewX(135deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (0.25) should be [skewX(10deg) skewX(35deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (-0.5) should be [skewX(55deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (0.75) should be [skewY(10deg) skewY(45deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewY(45deg)\] to accumulate [skewY(45deg)\] at (0.5) should be [matrix(1, 1, 0.5, 1.5, 0, 0)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(45deg)\] from accumulate [skewX(30deg)\] to accumulate [skewX(70deg)\] at (0.25) should be [skewX(85deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (0) should be [skew(30deg, 75deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewX(10deg)\] from add [skewX(30deg)\] to add [skewX(50deg)\] at (0.75) should be [skewX(10deg) skewX(45deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(45deg)\] from accumulate [skewY(30deg)\] to accumulate [skewY(70deg)\] at (0.25) should be [skewY(85deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 45deg)\] from accumulate [skew(20deg, 30deg)\] to accumulate [skew(40deg, 70deg)\] at (0.5) should be [skew(40deg, 95deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skew(10deg, 20deg)\] from add [skew(30deg, 10deg)\] to add [skew(50deg, 50deg)\] at (0) should be [skew(10deg, 20deg) skew(30deg, 10deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (-0.5) should be [skewY(10deg) skewY(20deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [skewY(10deg)\] from add [skewY(30deg)\] to add [skewY(50deg)\] at (0.25) should be [skewY(10deg) skewY(35deg)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/transform-translate-composition.html.ini

@@ -0,0 +1,169 @@
+[transform-translate-composition.html]
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (0.25) should be [translateX(225px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (-0.5) should be [translate3d(100px, 50px, -50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (1.5) should be [translate3d(100px, 50px, 350px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (0.5) should be [translateX(250px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (1) should be [translateX(350px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.75) should be [translate3d(100px, 50px, 200px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (0.5) should be [translate(160px, 320px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (0.25) should be [translateX(100px) rotate(90deg) translateX(125px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.5) should be [translate3d(100px, 50px, 150px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (1.5) should be [translateZ(450px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (0.25) should be [translateX(200px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (1) should be [translate(210px, 420px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (-0.5) should be [translate(60px, 120px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (0.75) should be [translateX(300px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.5) should be [translateZ(250px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (-0.5) should be [translateX(150px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (0) should be [translate(110px, 220px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (0) should be [translate(110px, 220px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (0.25) should be [translate(135px, 270px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (0.75) should be [translateY(300px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (-0.5) should be [translateX(100px) rotate(90deg) translateX(50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (1) should be [translateX(300px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (-0.5) should be [translate(60px, 120px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (0.5) should be [translateY(250px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (1.5) should be [translateX(350px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (0.75) should be [translateX(275px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (1.5) should be [translate(260px, 520px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0) should be [translate3d(100px, 50px, 50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (0) should be [translateX(150px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (1) should be [translateX(100px) rotate(90deg) translateX(200px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (1.5) should be [translate(260px, 520px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (1) should be [translate(210px, 420px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (0) should be [translateX(100px) rotate(90deg) translateX(100px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (0.75) should be [translateX(100px) rotate(90deg) translateX(175px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (-0.5) should be [translateY(50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.75) should be [translateZ(300px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (1.5) should be [translateX(450px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from accumulate [translateX(100px)\] to accumulate [translateX(200px)\] at (0) should be [translateX(200px) rotate(90deg)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (0.5) should be [translateX(100px) rotate(90deg) translateX(150px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (-0.5) should be [translateX(50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.25) should be [translateZ(200px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0.25) should be [translate3d(100px, 50px, 100px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (-0.5) should be [translateZ(50px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px)\] from accumulate [translateX(50px)\] to accumulate [translateX(250px)\] at (0.5) should be [translateX(250px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (1) should be [translateY(350px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (1) should be [translateZ(350px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (0.25) should be [translate(135px, 270px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (0.5) should be [translate(160px, 320px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateZ(100px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (0) should be [translateZ(150px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (0) should be [translateY(150px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (1.5) should be [translateY(450px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateX(100px) rotate(90deg)\] from add [translateX(100px)\] to add [translateX(200px)\] at (1.5) should be [translateX(100px) rotate(90deg) translateX(250px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to add [translate(200px, 400px)\] at (0.75) should be [translate(185px, 370px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translateY(100px)\] from accumulate [translateY(50px)\] to accumulate [translateY(250px)\] at (0.25) should be [translateY(200px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(100px, 50px)\] from accumulate [translateZ(50px)\] to accumulate [translateZ(250px)\] at (1) should be [translate3d(100px, 50px, 250px)\]]
+    expected: FAIL
+
+  [Compositing: property <transform> underlying [translate(10px, 20px)\] from add [translate(100px, 200px)\] to replace [translate(210px, 420px)\] at (0.75) should be [translate(185px, 370px)\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/animation/translate-composition.html.ini

@@ -0,0 +1,154 @@
+[translate-composition.html]
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (0.75) should be [calc(225px + 12.5%) calc(175px + 37.5%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (1) should be [none\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (0) should be [calc(50px + 0%) calc(200px + 50%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to add [none\] at (0) should be [0px 40px 60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (0) should be [80px 60px 60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (0.75) should be [20px 15px 15px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to replace [none\] at (2) should be [0px -40px -60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (0.25) should be [60px 45px 45px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (2) should be [-80px 60px 120px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to replace [none\] at (0.75) should be [0px 10px 15px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to add [none\] at (-1) should be [0px 80px 120px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from add [none\] to add [100px\] at (0.75) should be [75px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (-1) should be [160px 120px 120px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [none\] to add [100px\] at (1) should be [100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [none\] to add [100px\] at (0.75) should be [75px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (0) should be [50%  calc(100px + 0%)\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to add [none\] at (2) should be [0px -40px -60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (0.25) should be [calc(62.5px + 25%) calc(200px + 37.5%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (0.25) should be [calc(75px + 37.5%) calc(125px + 12.5%) 100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to replace [none\] at (-1) should be [0px 80px 120px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (0.25) should be [calc(125px + 37.5%) calc(225px + 12.5%) 250px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to replace [none\] at (0) should be [0px 40px 60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (0.5) should be [40px 30px 30px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to add [none\] at (0.25) should be [0px 30px 45px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (2) should be [calc(150px + 200%) calc(200px - 50%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (1) should be [calc(200px + 0%) 50% 100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (-1) should be [160px 0px -60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from add [none\] to add [100px\] at (0.25) should be [25px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from add [none\] to add [100px\] at (-1) should be [-100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to add [none\] at (0.75) should be [0px 10px 15px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [none\] to add [100px\] at (0.25) should be [25px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (0.25) should be [60px 25px 15px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (0.5) should be [40px 30px 30px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (2) should be [calc(600px - 50%) calc(300px + 100%) 800px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (0.75) should be [calc(87.5px + 75%) calc(200px + 12.5%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [0px 40px 60px\] to replace [none\] at (2) should be [-80px -60px -60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (0.75) should be [calc(175px + 12.5%) calc(75px + 37.5%) 150px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (2) should be [calc(300px - 50%) calc(-300px + 100%) -100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (0.75) should be [20px 35px 45px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (1) should be [calc(300px + 0%) calc(200px + 50%) 400px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from add [none\] to add [100px\] at (1) should be [100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [0px 40px 60px\] to replace [none\] at (0.25) should be [0px 30px 45px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (-1) should be [-100% calc(200px + 100%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [80px 20px\] from add [none\] to replace [0px 40px 60px\] at (1) should be [0px 40px 60px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from replace [50% 100px\] to add [200px 50% 100px\] at (-1) should be [calc(-300px + 100%) -50% -400px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from add [none\] to add [100px\] at (2) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [none\] to add [100px\] at (-1) should be [-100px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [-50px 50%\] to add [100%\] at (1) should be [calc(100px + 100%) calc(200px + 0%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (0) should be [calc(100px + 50%) calc(300px + 0%) 300px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [100px 200px 300px\] from add [50% 100px\] to replace [200px 50% 100px\] at (-1) should be [100% calc(600px - 50%) 500px\]]
+    expected: FAIL
+
+  [Compositing: property <translate> underlying [none\] from replace [none\] to add [100px\] at (2) should be [200px\]]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transitions/animations/vertical-align-composition.html.ini

@@ -0,0 +1,61 @@
+[vertical-align-composition.html]
+  [Compositing: property <vertical-align> underlying [10%\] from add [100px\] to add [20%\] at (0) should be [calc(100px + 10%)\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [10%\] from add [100px\] to add [20%\] at (-0.3) should be [calc(130px + 4%)\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [10%\] from add [100px\] to add [20%\] at (0.5) should be [calc(50px + 20%)\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [10%\] from add [100px\] to add [20%\] at (1) should be [30%\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <vertical-align> underlying [10%\] from add [100px\] to add [20%\] at (1.5) should be [calc(-50px + 40%)\]]
+    expected: FAIL
+

tests/wpt/metadata/fetch/content-type/response.window.js.ini

@@ -309,30 +309,18 @@
   [<iframe>: separate response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html */*;charset=gbk]
-    expected: FAIL
-
-  [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
-    expected: FAIL
-
   [fetch(): separate response Content-Type: text/plain ]
     expected: NOTRUN
 
-  [<iframe>: separate response Content-Type: text/html */*]
-    expected: FAIL
-
-  [<iframe>: separate response Content-Type: text/html;" \\" text/plain]
-    expected: FAIL
-
   [<iframe>: separate response Content-Type: text/html;" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/plain */*]
-    expected: FAIL
-
-  [<iframe>: separate response Content-Type: text/html;x=" text/plain]
-    expected: FAIL
-
   [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
     expected: FAIL
 
+  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html;x=" text/plain]
+    expected: FAIL
+

tests/wpt/metadata/fetch/metadata/appcache.tentative.https.sub.html.ini

@@ -1,4 +0,0 @@
-[appcache.tentative.https.sub.html]
-  [Appcache!]
-    expected: FAIL
-

tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini

@@ -5,7 +5,7 @@
     expected: FAIL
 
   [Embedded credentials are treated as network errors in frames.]
-    expected: FAIL
+    expected: TIMEOUT
 
   [Embedded credentials are treated as network errors in new windows.]
     expected: FAIL

tests/wpt/metadata/html/cross-origin-opener-policy/popup-none.https.html.ini

@@ -1,55 +0,0 @@
-[popup-none.https.html]
-  [none document opening popup to https://web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [none document opening popup to https://web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [none document opening popup to https://web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [none document opening popup to https://web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [none document opening popup to https://web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [none document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [none document opening popup to https://not-web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-

tests/wpt/metadata/html/cross-origin-opener-policy/popup-same-origin-unsafe-allow-outgoing.https.html.ini

@@ -1,55 +0,0 @@
-[popup-same-origin-unsafe-allow-outgoing.https.html]
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-origin_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-

tests/wpt/metadata/html/cross-origin-opener-policy/popup-same-origin.https.html.ini

@@ -1,55 +0,0 @@
-[popup-same-origin.https.html]
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-origin document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-

tests/wpt/metadata/html/cross-origin-opener-policy/popup-same-site-unsafe-allow-outgoing.https.html.ini

@@ -1,55 +0,0 @@
-[popup-same-site-unsafe-allow-outgoing.https.html]
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://not-web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-site_unsafe-allow-outgoing document opening popup to https://www1.web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-

tests/wpt/metadata/html/cross-origin-opener-policy/popup-same-site.https.html.ini

@@ -1,55 +0,0 @@
-[popup-same-site.https.html]
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: ""]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: "jibberish"]
-    expected: FAIL
-
-  [same-site document opening popup to https://www1.web-platform.test:8443 with COOP: "same-origin"]
-    expected: FAIL
-
-  [same-site document opening popup to https://not-web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: "same-site"]
-    expected: FAIL
-
-  [same-site document opening popup to https://web-platform.test:8443 with COOP: "same-site unsafe-allow-outgoing"]
-    expected: FAIL
-

tests/wpt/metadata/html/dom/idlharness.worker.js.ini

@@ -554,6 +554,3 @@
   [OffscreenCanvasRenderingContext2D interface: operation clip(CanvasFillRule)]
     expected: FAIL
 
-  [MessageEvent interface: new MessageEvent("message", { data: 5 }) must inherit property "source" with the proper type]
-    expected: FAIL
-

tests/wpt/metadata/html/interaction/focus/the-autofocus-attribute/skip-document-with-fragment.html.ini

@@ -1,4 +1,8 @@
 [skip-document-with-fragment.html]
+  expected: TIMEOUT
   [Autofocus elements in iframed documents with URL fragments should be skipped.]
     expected: FAIL
 
+  [Autofocus elements in top-level browsing context's documents with URI fragments should be skipped.]
+    expected: TIMEOUT
+

tests/wpt/metadata/html/interaction/focus/the-autofocus-attribute/supported-elements.html.ini

@@ -1,16 +1,20 @@
 [supported-elements.html]
+  expected: TIMEOUT
   [Contenteditable element should support autofocus]
     expected: FAIL
 
   [Element with tabindex should support autofocus]
-    expected: FAIL
+    expected: TIMEOUT
 
   [Host element with delegatesFocus including no focusable descendants should be skipped]
-    expected: FAIL
+    expected: NOTRUN
 
   [Area element should support autofocus]
-    expected: FAIL
+    expected: NOTRUN
 
   [Host element with delegatesFocus should support autofocus]
-    expected: FAIL
+    expected: NOTRUN
+
+  [Non-HTMLElement should not support autofocus]
+    expected: NOTRUN
 

tests/wpt/metadata/html/semantics/forms/constraints/form-validation-validity-rangeOverflow.html.ini

@@ -228,3 +228,15 @@
   [[INPUT in NUMBER status\] The value is greater than max(special floating number)]
     expected: FAIL
 
+  [[INPUT in TIME status\] The time is inside the accepted range for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is outside the accepted range for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is min for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is max for reversed range]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/forms/constraints/form-validation-validity-rangeUnderflow.html.ini

@@ -222,3 +222,15 @@
   [[INPUT in NUMBER status\] The value is less than min(special floating number)]
     expected: FAIL
 
+  [[INPUT in TIME status\] The time is max for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is outside the accepted range for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is min for reversed range]
+    expected: FAIL
+
+  [[INPUT in TIME status\] The time is inside the accepted range for reversed range]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/forms/constraints/form-validation-validity-valueMissing.html.ini

@@ -315,3 +315,6 @@
   [[select\]  Selected the option with value equals to empty]
     expected: FAIL
 
+  [[INPUT in RADIO status\] The checked attribute is false and the name attribute is empty]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/forms/the-input-element/input-valueasdate.html.ini

@@ -0,0 +1,79 @@
+[input-valueasdate.html]
+  [valueAsDate getter on type date (actual value: 2019-00-12, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 2016-02-29, expected valueAsDate: Mon Feb 29 2016 00:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: , expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type week (actual value: 2019-W00, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate setter on type date (actual valueAsDate: Tue Dec 10 2019 00:00:00 GMT+0000 (Coordinated Universal Time), expected value: 2019-12-10)]
+    expected: FAIL
+
+  [valueAsDate getter on type month (actual value: 2019-12, expected valueAsDate: Sun Dec 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type week (actual value: 2019-W50, expected valueAsDate: Mon Dec 09 2019 00:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type week (actual value: 2019-W60, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 2019-12-10, expected valueAsDate: Tue Dec 10 2019 00:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 2019-13-10, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: 00:60, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate setter on type time (actual valueAsDate: Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time), expected value: 00:00)]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 2019-12-00, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type month (actual value: 2019-00, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type week (actual value: , expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: , expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type month (actual value: , expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: 12:00, expected valueAsDate: Thu Jan 01 1970 12:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: 23:59, expected valueAsDate: Thu Jan 01 1970 23:59:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 2019-02-29, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type month (actual value: 0000-12, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type week (actual value: 0000-W50, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate getter on type date (actual value: 0000-12-10, expected valueAsDate: null)]
+    expected: FAIL
+
+  [valueAsDate setter on type time (actual valueAsDate: Thu Jan 01 1970 12:00:00 GMT+0000 (Coordinated Universal Time), expected value: 12:00)]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: 00:00, expected valueAsDate: Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time))]
+    expected: FAIL
+
+  [valueAsDate getter on type time (actual value: 24:00, expected valueAsDate: null)]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/forms/the-input-element/input-valueasnumber.html.ini

@@ -0,0 +1,136 @@
+[input-valueasnumber.html]
+  [valueAsNumber getter on type month (actual value: 0000-12, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type datetime-local (actual value: 2019-12-10T12:00, expected valueAsNumber: 1575979200000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type month (actual value: 2019-00, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2016-02-29, expected valueAsNumber: 1456704000000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber setter on type range (actual valueAsNumber: 0, expected value: 0)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: 110, expected valueAsNumber: 100)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: -10, expected valueAsNumber: 0)]
+    expected: FAIL
+
+  [valueAsNumber setter on type date (actual valueAsNumber: 0, expected value: 1970-01-01)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2019-00-12, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2019-12-00, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber setter on type date (actual valueAsNumber: 1575936000000, expected value: 2019-12-10)]
+    expected: FAIL
+
+  [valueAsNumber setter on type time (actual valueAsNumber: 43200000, expected value: 12:00)]
+    expected: FAIL
+
+  [valueAsNumber setter on type time (actual valueAsNumber: 0, expected value: 00:00)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: 24:00, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber setter on type number (actual valueAsNumber: 123, expected value: 123)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: 00:60, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type week (actual value: 2019-W60, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type number (actual value: 123, expected valueAsNumber: 123)]
+    expected: FAIL
+
+  [valueAsNumber setter on type range (actual valueAsNumber: 50, expected value: 50)]
+    expected: FAIL
+
+  [valueAsNumber setter on type week (actual valueAsNumber: 0, expected value: 1970-W01)]
+    expected: FAIL
+
+  [valueAsNumber getter on type week (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: 100, expected valueAsNumber: 100)]
+    expected: FAIL
+
+  [valueAsNumber getter on type datetime-local (actual value: 2019-12-10T00:00, expected valueAsNumber: 1575936000000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: 12:00, expected valueAsNumber: 43200000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type datetime-local (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type number (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type number (actual value: 123.456, expected valueAsNumber: 123.456)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: 23:59, expected valueAsNumber: 86340000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type week (actual value: 0000-W50, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type month (actual value: 2019-12, expected valueAsNumber: 599)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: 0, expected valueAsNumber: 0)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: 50, expected valueAsNumber: 50)]
+    expected: FAIL
+
+  [valueAsNumber getter on type week (actual value: 2019-W50, expected valueAsNumber: 1575849600000)]
+    expected: FAIL
+
+  [valueAsNumber setter on type datetime-local (actual valueAsNumber: 1575936000000, expected value: 2019-12-10T00:00)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 0000-12-10, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2019-13-10, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type time (actual value: 00:00, expected valueAsNumber: 0)]
+    expected: FAIL
+
+  [valueAsNumber getter on type range (actual value: , expected valueAsNumber: 50)]
+    expected: FAIL
+
+  [valueAsNumber setter on type range (actual valueAsNumber: 100, expected value: 100)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2019-02-29, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type date (actual value: 2019-12-10, expected valueAsNumber: 1575936000000)]
+    expected: FAIL
+
+  [valueAsNumber getter on type week (actual value: 2019-W00, expected valueAsNumber: NaN)]
+    expected: FAIL
+
+  [valueAsNumber getter on type month (actual value: , expected valueAsNumber: NaN)]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/forms/the-input-element/radio.html.ini

@@ -0,0 +1,4 @@
+[radio.html]
+  [Radio buttons in an orphan tree should make a group]
+    expected: FAIL
+

tests/wpt/metadata/webmessaging/with-ports/018.html.ini

@@ -0,0 +1,5 @@
+[018.html]
+  expected: TIMEOUT
+  [origin of the script that invoked the method, javascript:]
+    expected: TIMEOUT
+

tests/wpt/metadata/webxr/xrSession_input_events_end.https.html.ini

@@ -1,4 +1,5 @@
 [xrSession_input_events_end.https.html]
+  expected: TIMEOUT
   [Calling end during an input callback stops processing at the right time]
-    expected: FAIL
+    expected: TIMEOUT
 

tests/wpt/metadata/workers/semantics/multiple-workers/005.html.ini

@@ -1,5 +1,4 @@
 [005.html]
-  expected: ERROR
   [dedicated worker in shared worker in dedicated worker]
     expected: FAIL
 

tests/wpt/web-platform-tests/clipboard-apis/async-interfaces.https.html

@@ -9,12 +9,13 @@
 <script>
 'use strict';
 
-function doTest(idl, dom) {
+function doTest(idl, dom, html) {
   const idl_array = new IdlArray();
   idl_array.add_untested_idls('interface Navigator {};');
   idl_array.add_untested_idls('interface EventTarget {};');
   idl_array.add_untested_idls('dictionary PermissionDescriptor {};');
   idl_array.add_untested_idls(dom, { only: ['Event', 'EventInit'] });
+  idl_array.add_untested_idls(html, { only: ['DataTransfer', 'DataTransferItemList'] });
   idl_array.add_idls(idl);
   idl_array.add_objects({
     Navigator: ['navigator'],
@@ -33,7 +34,8 @@ promise_test(() => {
     [
       '/interfaces/clipboard-apis.idl',
       '/interfaces/dom.idl',
+      '/interfaces/html.idl',
     ].map(fetchText))
-    .then(([idl, dom]) => doTest(idl, dom));
+    .then(([idl, dom, html]) => doTest(idl, dom, html));
 }, 'Test driver');
 </script>

tests/wpt/web-platform-tests/conformance-checkers/messages.json

@@ -28,22 +28,16 @@
     "html-rdfa/0226-novalid.html": "Element \u201cp\u201d not allowed as child of element \u201cspan\u201d in this context. (Suppressing further errors from this subtree.)",
     "html-rdfa/0227-novalid.html": "Element \u201cp\u201d not allowed as child of element \u201cspan\u201d in this context. (Suppressing further errors from this subtree.)",
     "html-rdfa/0230-novalid.html": "Attribute \u201chref\u201d not allowed on element \u201cimg\u201d at this point.",
-    "html-rdfa/0234-novalid.html": "Bad value \u201cdescribedby\u201d for attribute \u201crel\u201d on element \u201ca\u201d: Bad list of link-type keywords: The string \u201cdescribedby\u201d is not a registered keyword.",
     "html-rdfa/0237-novalid.html": "Bad value \u201c$malformed http://example.com\u201d for attribute \u201cprefix\u201d on element \u201cbody\u201d.",
     "html-rdfa/0258-novalid.html": "Attribute \u201cxmlns:_\u201d not allowed here.",
     "html-rdfa/0280-novalid.html": "Bad value \u201cP2011Y06M28DT00H00M00S\u201d for attribute \u201cdatetime\u201d on element \u201ctime\u201d: Bad time-datetime: The literal did not satisfy the time-datetime format.",
     "html-rdfa/0285-novalid.html": "Bad value \u201cD-Day\u201d for attribute \u201cdatetime\u201d on element \u201ctime\u201d: Bad time-datetime: The literal did not satisfy the time-datetime format.",
-    "html-rdfa/0303-novalid.html": "Bad value \u201chomepage foaf:homepage\u201d for attribute \u201crel\u201d on element \u201ca\u201d: Bad list of link-type keywords: The string \u201chomepage\u201d is not a registered keyword.",
     "html-rdfa/0308-novalid.html": "Bad value \u201chttp://www.example.com/roles/somerole\u201d for attribute \u201crole\u201d on element \u201cdiv\u201d.",
     "html-rdfa/0309-novalid.html": "Bad value \u201cex:somerole\u201d for attribute \u201crole\u201d on element \u201cdiv\u201d.",
     "html-rdfa/0310-novalid.html": "Bad value \u201cex:somerole someOtherRole http://www.example.com/alternate/role\u201d for attribute \u201crole\u201d on element \u201cdiv\u201d.",
     "html-rdfa/0314-novalid.html": "Bad value \u201csection\u201d for attribute \u201crole\u201d on element \u201cdiv\u201d.",
     "html-rdfa/0319-novalid.html": "Attribute \u201cxmlns:xpr\u201d not allowed here.",
     "html-rdfa/0320-novalid.html": "Attribute \u201csrc\u201d not allowed on element \u201ca\u201d at this point.",
-    "html-rdfalite/0015-novalid.html": "Bad value \u201cdc:source\u201d for attribute \u201crel\u201d on element \u201clink\u201d: Bad list of link-type keywords: The string \u201cdc:source\u201d is not a registered keyword.",
-    "html-rdfalite/0030-novalid.html": "Bad value \u201ccc:license\u201d for attribute \u201crel\u201d on element \u201ca\u201d: Bad list of link-type keywords: The string \u201ccc:license\u201d is not a registered keyword.",
-    "html-rdfalite/0071-novalid.html": "Bad value \u201ccc:license\u201d for attribute \u201crel\u201d on element \u201ca\u201d: Bad list of link-type keywords: The string \u201ccc:license\u201d is not a registered keyword.",
-    "html-rdfalite/0074-novalid.html": "Bad value \u201cdc:creator\u201d for attribute \u201crel\u201d on element \u201ca\u201d: Bad list of link-type keywords: The string \u201cdc:creator\u201d is not a registered keyword.",
     "html-rdfalite/0147.novalid.html": "Attribute \u201cxmlns:xmlzzz\u201d not allowed here.",
     "html-rdfalite/0319-novalid.html": "Attribute \u201cxmlns:xpr\u201d not allowed here.",
     "html-svg/animate-elem-24-t-novalid.html": "Duplicate ID \u201cMyFont\u201d.",

tests/wpt/web-platform-tests/cookies/http-state/general-tests.html

@@ -49,8 +49,7 @@
         {file: "0025", name: "Ignore cookies with ';' in all 'Set-Cookie'."},
         {file: "0026", name: "Ignore malformed cookies in all 'Set-Cookie' v2."},
         {file: "0027", name: "Ignore malformed cookies in all 'Set-Cookie' v3."},
-        // TODO(fhorschig): Ask about 0028's expectations ... should be empty?
+        {file: "0028", name: "Ignore malformed cookies in all 'Set-Cookie' v4."},
-        {file: "0028", name: "[INVALID EXPECTATION] Ignore malformed cookies in all 'Set-Cookie' v4."},
       ];
 
       for (const i in TEST_CASES) {

tests/wpt/web-platform-tests/cookies/http-state/resources/cookie-http-state-template.js

@@ -39,7 +39,7 @@ function expireCookie(name, expiry_date, path) {
   name = name || "";
   expiry_date = expiry_date || "Thu, 01 Jan 1970 00:00:00 UTC";
   path = path || getLocalResourcesPath();
-  document.cookie = name + "=; expires=" + expiry_date + "; path=" + path + ";";
+  document.cookie = name + "=value; expires=" + expiry_date + "; path=" + path + ";";
 }
 
 /* Captures a snapshot of cookies with |parse| and allows to diff it with a

tests/wpt/web-platform-tests/cookies/http-state/resources/test-files/0028-expected

@@ -1,2 +0,0 @@
-Set-Cookie: foo
-Set-Cookie:

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-ref.html

@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<iframe width="600" height="400" src="support/dark-frame-ref.html"></iframe>

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<title>CSS Color Adjustment Test: Frames with a dark color-scheme should still be transparent</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing">
+<link rel="match" href="color-scheme-iframe-background-ref.html">
+<link rel="stylesheet" href="support/assert-preferred-dark.css">
+<iframe width="600" height="400" src="support/dark-frame.html"></iframe>

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-root-background.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<title>CSS Color Adjustment Test: color-scheme does not affect :root background</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing">
+<link rel="stylesheet" href="support/assert-preferred-dark.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  :root { color-scheme: dark }
+</style>
+<body></body>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "Root element background should be transparent for dark color-scheme.");
+</script>

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/support/assert-preferred-dark.css

@@ -0,0 +1,9 @@
+@media not all and (prefers-color-scheme: dark) {
+  :root {
+    background-color: red !important;
+  }
+  body::before {
+    font-size: 64px;
+    content: "Test must be run with preferred dark color scheme.";
+  }
+}

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-ref.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<style>
+  p { color: green }
+</style>
+<p>This text should be green and the background should be the same as the top document.</p>

tests/wpt/web-platform-tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<style>
+  :root { color-scheme: dark }
+  p { color: green }
+</style>
+<p>This text should be green and the background should be the same as the top document.</p>

tests/wpt/web-platform-tests/css/css-color/animation/color-composition.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>color composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-color/#the-color-property">
+<meta name="assert" content="color supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  width: 40px;
+  height: 40px;
+  background-color: black;
+}
+.expected {
+  background-color: green;
+}
+</style>
+
+<body>
+<script>
+test_composition({
+  property: 'color',
+  underlying: 'rgb(50, 50, 50)',
+  addFrom: 'rgb(10, 10, 10)',
+  replaceTo: 'rgb(30, 30, 30)',
+}, [
+  {at: 0, expect: 'rgb(60, 60, 60)'},
+  {at: 0.2, expect: 'rgb(54, 54, 54)'},
+  {at: 1, expect: 'rgb(30, 30, 30)'},
+  {at: 1.2, expect: 'rgb(24, 24, 24)'},
+  {at: 1.5, expect: 'rgb(15, 15, 15)'},
+]);
+
+test_composition({
+  property: 'color',
+  underlying: 'rgb(60, 60, 60)',
+  addFrom: 'rgb(0, 0, 0)',
+  replaceTo: 'rgb(50, 50, 50)',
+}, [
+  {at: 0, expect: 'rgb(60, 60, 60)'},
+  {at: 0.5, expect: 'rgb(55, 55, 55)'},
+  {at: 1, expect: 'rgb(50, 50, 50)'},
+  {at: 1.2, expect: 'rgb(48, 48, 48)'},
+  {at: 1.5, expect: 'rgb(45, 45, 45)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-flexbox/animation/flex-basis-composition.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>flex-basis composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property">
+<meta name="assert" content="flex-basis supports animation by computed value type">
+
+<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: 'flex-basis',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'flex-basis',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'flex-basis',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'flex-basis',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'flex-basis',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html

@@ -1,358 +0,0 @@
-<meta charset="utf-8">
-<title>CSS Grid Layout Test: aligned content distribution for vertical lr</title>
-<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
-<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-lr writing mode.">
-<meta name="flags" content="ahem">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
-<link rel="stylesheet" href="/css/support/grid.css">
-
-<style>
-
-.grid {
-    grid-auto-columns: 20px;
-    grid-auto-rows: 40px;
-    position: relative;
-    width: 400px;
-    height: 300px;
-}
-
-.stretchedGrid {
-    grid-auto-rows: auto;
-}
-
-.thirdRowFirstColumn {
-  background-color: green;
-  grid-column: 1;
-  grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-  background-color: deepskyblue;
-  grid-column: 1;
-  grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-  background-color: maroon;
-  grid-column: 2;
-  grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-  	grid-row: 4;
-}
-
-</style>
-
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-
-<body onload="checkLayout('.grid')">
-
-<p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-    </div>
-</div>
-
-<!-- RTL direction. -->
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-    </div>
-</div>
-</body>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html

@@ -1,358 +0,0 @@
-<meta charset="utf-8">
-<title>CSS Grid Layout Test: aligned content distribution for vertical rl</title>
-<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
-<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-rl writing mode.">
-<meta name="flags" content="ahem">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
-<link rel="stylesheet" href="/css/support/grid.css">
-
-<style>
-
-.grid {
-    grid-auto-columns: 20px;
-    grid-auto-rows: 40px;
-    position: relative;
-    width: 400px;
-    height: 300px;
-}
-
-.stretchedGrid {
-    grid-auto-rows: auto;
-}
-
-.thirdRowFirstColumn {
-  background-color: green;
-  grid-column: 1;
-  grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-  background-color: deepskyblue;
-  grid-column: 1;
-  grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-  background-color: maroon;
-  grid-column: 2;
-  grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-  	grid-row: 4;
-}
-
-</style>
-
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-
-<body onload="checkLayout('.grid')">
-
-<p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
-    </div>
-</div>
-
-<!-- RTL direction. -->
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
-    </div>
-</div>
-</body>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution.html

@@ -1,358 +0,0 @@
-<meta charset="utf-8">
-<title>CSS Grid Layout Test: aligned content distribution</title>
-<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
-<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values.">
-<meta name="flags" content="ahem">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
-<link rel="stylesheet" href="/css/support/grid.css">
-
-<style>
-
-.grid {
-    grid-auto-columns: 20px;
-    grid-auto-rows: 40px;
-    position: relative;
-    width: 200px;
-    height: 300px;
-}
-
-.stretchedGrid {
-    grid-auto-rows: auto;
-}
-
-.thirdRowFirstColumn {
-  background-color: green;
-  grid-column: 1;
-  grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-  background-color: deepskyblue;
-  grid-column: 1;
-  grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-  background-color: maroon;
-  grid-column: 2;
-  grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-  	grid-row: 4;
-}
-
-</style>
-
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-
-<body onload="checkLayout('.grid')">
-
-<p>This test checks that the align-content property is applied correctly when using content-distribution values.</p>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: LTR | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
-        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
-        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
-        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
-    </div>
-</div>
-
-<!-- RTL direction. -->
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-between'</p>
-    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-around'</p>
-    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'space-evenly'</p>
-    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <p>direction: RTL | align-content: 'stretch'</p>
-    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
-        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
-        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
-        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
-        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
-        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
-        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
-        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
-        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
-    </div>
-</div>
-</body>

tests/wpt/web-platform-tests/css/css-images/animations/object-position-interpolation.html

@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<title>object-position-interpolation</title>
-<link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position">
-<meta name="assert" content="object-position supports animation by computation">
-
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/interpolation-testcommon.js"></script>
-
-<style>
-.parent {
-  object-position: 30px 10px;
-}
-
-.target {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  background-color: black;
-  display: inline-block;
-  margin: 20px 0px 20px 0px;
-  object-fit: fill;
-  object-position: 10px 30px;
-}
-
-.expected {
-  background-color: green;
-}
-</style>
-<body>
-</body>
-<script>
-test_interpolation({
-  property: 'object-position',
-  from: neutralKeyframe,
-  to: '20px 20px',
-}, [
-  {at: -0.3, expect: '7px 33px'},
-  {at: 0, expect: '10px 30px'},
-  {at: 0.5, expect: '15px 25px'},
-  {at: 1, expect: '20px 20px'},
-  {at: 1.5, expect: '25px 15px'},
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: 'initial',
-  to: '20px 20px',
-}, [
-  {at: -0.3, expect: 'calc(-6px + 65%) calc(-6px + 65%)'},
-  {at: 0, expect: '50% 50%'},
-  {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'},
-  {at: 1, expect: 'calc(20px + 0%) calc(20px + 0%)'},
-  {at: 1.5, expect: 'calc(30px + -25%) calc(30px + -25%)'},
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: 'inherit',
-  to: '20px 20px',
-}, [
-  {at: -0.3, expect: '33px 7px'},
-  {at: 0, expect: '30px 10px'},
-  {at: 0.5, expect: '25px 15px'},
-  {at: 1, expect: '20px 20px'},
-  {at: 1.5, expect: '15px 25px'},
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: 'unset',
-  to: '20px 20px',
-}, [
-  {at: -0.3, expect: 'calc(-6px + 65%) calc(-6px + 65%)'},
-  {at: 0, expect: '50% 50%'},
-  {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'},
-  {at: 1, expect: 'calc(20px + 0%) calc(20px + 0%)'},
-  {at: 1.5, expect: 'calc(30px + -25%) calc(30px + -25%)'},
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: '50% 50%',
-  to: '100% 100%'
-}, [
-  {at: -0.3, expect: '35% 35%'},
-  {at: 0, expect: '50% 50%'},
-  {at: 0.5, expect: '75% 75%'},
-  {at: 1, expect: '100% 100%'},
-  {at: 1.5, expect: '125% 125%'}
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: '100px 200px',
-  to: '0px 0px'
-}, [
-  {at: -0.3, expect: '130px 260px'},
-  {at: 0, expect: '100px 200px'},
-  {at: 0.5, expect: '50px 100px'},
-  {at: 1, expect: '0px 0px'},
-  {at: 1.5, expect: '-50px -100px'}
-]);
-
-// Zero seem to be a special case in the old implementation
-test_interpolation({
-  property: 'object-position',
-  from: '50% 100%',
-  to: '0px 0px'
-}, [
-  {at: -0.3, expect: '65% 130%'},
-  {at: 0, expect: '50% 100%'},
-  {at: 0.5, expect: '25% 50%'},
-  {at: 1, expect: '0px 0px'},
-  {at: 1.5, expect: '-25% -50%'}
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: '50% 100%',
-  to: '50px 100px'
-}, [
-  {at: -0.3, expect: 'calc(65% + -15px) calc(130% + -30px)'},
-  {at: 0, expect: '50% 100%'},
-  {at: 0.5, expect: 'calc(25% + 25px) calc(50% + 50px)'},
-  {at: 1, expect: 'calc(0% + 50px) calc(0% + 100px)'},
-  {at: 1.5, expect: 'calc(-25% + 75px) calc(-50% + 150px)'}
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: 'center',
-  to: 'top right'
-}, [
-  {at: -0.3, expect: '35% 65%'},
-  {at: 0, expect: '50% 50%'},
-  {at: 0.5, expect: '75% 25%'},
-  {at: 1, expect: '100% 0%'},
-  {at: 1.5, expect: '125% -25%'}
-]);
-
-test_interpolation({
-  property: 'object-position',
-  from: 'center',
-  to: 'right 0% bottom 50%',
-}, [
-  {at: -0.5, expect: '25% 50%'},
-  {at: 0, expect: 'center'},
-  {at: 0.3, expect: '65% 50%'},
-  {at: 0.5, expect: '75% 50%'},
-  {at: 0.9, expect: '95% 50%'},
-  {at: 1, expect: '100% 50%'},
-  {at: 1.5, expect: '125% 50%'},
-  {at: 2, expect: '150% 50%'},
-]);
-</script>
-

tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-composition.html

@@ -0,0 +1,189 @@
+<!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 50% 50%)'},
+  {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'},
+]);
+
+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(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>

tests/wpt/web-platform-tests/css/css-position/animations/bottom-composition.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>bottom composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-bottom">
+<meta name="assert" content="bottom support 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: 'bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'bottom',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'bottom',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'bottom',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-position/animations/left-composition.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>left composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-left">
+<meta name="assert" content="left support 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: 'left',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'left',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'left',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'left',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '-10%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 13%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 5%)'},
+  {at: 1, expect: '0%'},
+  {at: 1.5, expect: 'calc(-50px - 5%)'},
+]);
+
+test_composition({
+  property: 'left',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'left',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-position/animations/right-composition.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>right composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-right">
+<meta name="assert" content="right support 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: 'right',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'right',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'right',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'right',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'right',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-position/animations/top-composition.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>top composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-top">
+<meta name="assert" content="top support 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: 'top',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'top',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'top',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'top',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'top',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<title>
+  Updating the snap alignment of a snap container's content should make the snap
+  container resnap accordingly.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  position: absolute;
+  margin: 0;
+}
+
+#scroller {
+  height: 200px;
+  width: 200px;
+  overflow: hidden;
+  scroll-snap-type: both mandatory;
+}
+
+#initial-target {
+  width: 300px;
+  height: 300px;
+  top: 100px;
+  left: 100px;
+  background-color: green;
+  scroll-snap-align: start;
+}
+
+#other-target {
+  width: 300px;
+  height: 300px;
+  top: 300px;
+  left: 300px;
+  background-color: red;
+  scroll-snap-align: start;
+}
+
+.area {
+  width: 2000px;
+  height: 2000px;
+}
+
+.snap-area {
+  scroll-snap-align: start !important;
+}
+</style>
+
+<div id="scroller">
+  <div class="area"></div>
+  <div id="initial-target"></div>
+  <div id="other-target"></div>
+</div>
+
+<script>
+const initial_target = document.getElementById("initial-target");
+const other_target = document.getElementById("other-target");
+const scroller = document.getElementById("scroller");
+
+function cleanup() {
+  initial_target.style.setProperty("scroll-snap-align", "start");
+  other_target.style.setProperty("scroll-snap-align", "start");
+  initial_target.removeAttribute("class");
+}
+
+test(t => {
+  t.add_cleanup(cleanup);
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 100);
+  assert_equals(scroller.scrollLeft, 100);
+
+  initial_target.style.setProperty("scroll-snap-align", "end");
+  // target.top + target.height - scroller.height
+  assert_equals(scroller.scrollTop, 200);
+  assert_equals(scroller.scrollLeft, 200);
+}, "Changing the current target's snap alignment should make the scroller"
++ " resnap to it even if another snap position is closer to the current offset");
+
+test(t => {
+  t.add_cleanup(cleanup);
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 100);
+  assert_equals(scroller.scrollLeft, 100);
+
+  initial_target.style.setProperty("scroll-snap-align", "none");
+  assert_equals(scroller.scrollTop, 300);
+  assert_equals(scroller.scrollLeft, 300);
+}, "Removing the current target's snap alignment should make the scroller"
++ " resnap to a new snap area.");
+
+test(t => {
+  t.add_cleanup(cleanup);
+  initial_target.style.setProperty("scroll-snap-align", "none");
+  other_target.style.setProperty("scroll-snap-align", "none");
+
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 0);
+  assert_equals(scroller.scrollLeft, 0);
+
+  initial_target.style.setProperty("scroll-snap-align", "start");
+  assert_equals(scroller.scrollTop, 100);
+  assert_equals(scroller.scrollLeft, 100);
+}, "Changing an element snap alignment from none to start should make the"
++ "scroller resnap.");
+
+test(t => {
+  t.add_cleanup(cleanup);
+  initial_target.style.setProperty("scroll-snap-align", "none");
+  other_target.style.setProperty("scroll-snap-align", "none");
+
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 0);
+  assert_equals(scroller.scrollLeft, 0);
+
+  initial_target.classList.add("snap-area");
+  assert_equals(scroller.scrollTop, 100);
+  assert_equals(scroller.scrollLeft, 100);
+}, "Changing an element snap alignment from none to start by adding a class"
++ " should make the scroller resnap.");
+</script>

tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<title>
+  Updating the scroll-snap-type of a snap container should make it resnap accordingly.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  position: absolute;
+  margin: 0;
+}
+
+#scroller {
+  height: 500px;
+  width: 500px;
+  overflow: hidden;
+  scroll-snap-type: none;
+}
+
+#y-target {
+  width: 300px;
+  height: 300px;
+  top: 100px;
+  left: 0;
+  background-color: green;
+  scroll-snap-align: start none;
+}
+
+#x-target {
+  width: 300px;
+  height: 300px;
+  top: 0;
+  left: 100px;
+  background-color: red;
+  scroll-snap-align: none start;
+}
+
+.area {
+  width: 2000px;
+  height: 2000px;
+}
+</style>
+
+<div id="scroller">
+  <div class="area"></div>
+  <div id="x-target"></div>
+  <div id="y-target"></div>
+</div>
+
+<script>
+const x_target = document.getElementById("x_target");
+const y_target = document.getElementById("y_target");
+const scroller = document.getElementById("scroller");
+
+function cleanup() {
+  scroller.style.setProperty("scroll-snap-type", "none");
+}
+
+test(t => {
+  t.add_cleanup(cleanup);
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 0);
+  assert_equals(scroller.scrollLeft, 0);
+
+  scroller.style.setProperty("scroll-snap-type", "y mandatory");
+  assert_equals(scroller.scrollTop, 100);
+  assert_equals(scroller.scrollLeft, 0);
+}, "Changing the scroller's snap type to y should make it resnap on the y-axis.");
+
+test(t => {
+  t.add_cleanup(cleanup);
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 0);
+  assert_equals(scroller.scrollLeft, 0);
+
+  scroller.style.setProperty("scroll-snap-type", "x mandatory");
+  assert_equals(scroller.scrollLeft, 100);
+  assert_equals(scroller.scrollTop, 0);
+}, "Changing the scroller's snap type to x should make it resnap on the x-axis.");
+
+
+test(t => {
+  t.add_cleanup(cleanup);
+  scroller.scrollTo(0,0);
+  assert_equals(scroller.scrollTop, 0);
+  assert_equals(scroller.scrollLeft, 0);
+
+  scroller.style.setProperty("scroll-snap-type", "x mandatory");
+  assert_equals(scroller.scrollLeft, 100);
+  assert_equals(scroller.scrollTop, 0);
+
+  scroller.style.setProperty("scroll-snap-type", "y mandatory");
+  assert_equals(scroller.scrollTop, 100);
+}, "Changing the scroller's snap type axis should make it resnap.");
+</script>

tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-composition.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title> perspective composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
+<meta name="assert" content="perspective 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: 'perspective',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'perspective',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'perspective',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'perspective',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'none',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'none'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: 'none'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title> rotate composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
+<meta name="assert" content="rotate 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: 'rotate',
+  underlying: '100deg',
+  addFrom: '10deg',
+  addTo: '30deg',
+}, [
+  {at: -1, expect: '90deg'},
+  {at: 0, expect: '110deg'},
+  {at: 0.25, expect: '115deg'},
+  {at: 0.75, expect: '125deg'},
+  {at: 1, expect: '130deg'},
+  {at: 2, expect: '150deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 0 0 200deg',
+  addFrom: '1 0 0 -100deg',
+  replaceTo: '1 0 0 40deg',
+}, [
+  {at: -1, expect: '1 0 0 160deg'},
+  {at: 0, expect: '1 0 0 100deg'},
+  {at: 0.25, expect: '1 0 0 85deg'},
+  {at: 0.75, expect: '1 0 0 55deg'},
+  {at: 1, expect: '1 0 0 40deg'},
+  {at: 2, expect: '1 0 0 -20deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '0 1 0 -40deg',
+  replaceFrom: '0 1 0 50deg',
+  addTo: '0 1 0 10deg',
+}, [
+  {at: -1, expect: '0 1 0 130deg'},
+  {at: 0, expect: '0 1 0 50deg'},
+  {at: 0.25, expect: '0 1 0 30deg'},
+  {at: 0.75, expect: '0 1 0 -10deg'},
+  {at: 1, expect: '0 1 0 -30deg'},
+  {at: 2, expect: '0 1 0 -110deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 2 3 40deg',
+  addFrom: '2 4 6 10deg',
+  addTo: '3 6 9 50deg',
+}, [
+  {at: -1, expect: '1 2 3 10deg'},
+  {at: 0, expect: '1 2 3 50deg'},
+  {at: 0.25, expect: '1 2 3 60deg'},
+  {at: 0.75, expect: '1 2 3 80deg'},
+  {at: 1, expect: '1 2 3 90deg'},
+  {at: 2, expect: '1 2 3 130deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 2 3 270deg',
+  addFrom: '1 2 3 90deg',
+  replaceTo: '0 1 0 100deg',
+}, [
+  {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
+  {at: 0, expect: '1 2 3 360deg'},
+  {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
+  {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
+  {at: 1, expect: '0 1 0 100deg'},
+  {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 2 3 90deg',
+  addFrom: '2 4 6 270deg',
+  replaceTo: '0 1 0 100deg',
+}, [
+  {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
+  {at: 0, expect: '1 2 3 360deg'},
+  {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
+  {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
+  {at: 1, expect: '0 1 0 100deg'},
+  {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 0 0 90deg',
+  addFrom: '0 1 0 180deg',
+  replaceTo: '0 0 1 90deg',
+}, [
+  {at: -1, expect: '-6.12323e-17 -1 1.57009e-16 90deg'},
+  {at: 0, expect: '-4.32978e-17 -0.707107 -0.707107 180deg'},
+  {at: 0.25, expect: '-1.48952e-16 -0.894427 -0.447214 131.81deg'},
+  {at: 0.75, expect: '-2.94392e-17 -0.707107 0.707107 70.5288deg'},
+  {at: 1, expect: '90deg'},
+  {at: 2, expect: '-6.12323e-17 -1 -4.71028e-16 90deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: 'none',
+  addFrom: 'none',
+  replaceTo: '0 1 0 100deg',
+}, [
+  {at: -1, expect: '0 1 0 -100deg'},
+  {at: 0, expect: 'none'},
+  {at: 0.25, expect: '0 1 0 25deg'},
+  {at: 0.75, expect: '0 1 0 75deg'},
+  {at: 1, expect: '0 1 0 100deg'},
+  {at: 2, expect: '0 1 0 200deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: 'none',
+  addFrom: '2 4 6 270deg',
+  replaceTo: 'none',
+}, [
+  {at: -1, expect: '2 4 6 540deg'},
+  {at: 0, expect: '2 4 6 270deg'},
+  {at: 0.25, expect: '2 4 6 202.5deg'},
+  {at: 0.75, expect: '2 4 6 67.5deg'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '2 4 6 -270deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 2 3 90deg',
+  addFrom: 'none',
+  replaceTo: '0 1 0 100deg',
+}, [
+  {at: -1, expect: '0.31 -0.22 0.92 131.66deg'},
+  {at: 0, expect: '1 2 3 90deg'},
+  {at: 0.25, expect: '0.21 0.73 0.64 86.72deg'},
+  {at: 0.75, expect: '0.07 0.97 0.21 92.05deg'},
+  {at: 1, expect: '0 1 0 100deg'},
+  {at: 2, expect: '-0.2 0.79 -0.59 151.11deg'},
+]);
+
+test_composition({
+  property: 'rotate',
+  underlying: '1 2 3 90deg',
+  addFrom: '2 4 6 270deg',
+  replaceTo: 'none',
+}, [
+  {at: -1, expect: '1 2 3 720deg'},
+  {at: 0, expect: '1 2 3 360deg'},
+  {at: 0.25, expect: '1 2 3 270deg'},
+  {at: 0.75, expect: '1 2 3 90deg'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '1 2 3 -360deg'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/scale-composition.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>scale composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
+<meta name="assert" content="scale 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: 'scale',
+  underlying: '2 1',
+  addFrom: '3 1',
+  addTo: '4 1',
+}, [
+  {at: -0.5, expect: '5 1'},
+  {at: 0, expect: '6 1'},
+  {at: 0.25, expect: '6.5 1'},
+  {at: 0.5, expect: '7 1'},
+  {at: 0.75, expect: '7.5 1'},
+  {at: 1, expect: '8 1'},
+  {at: 1.5, expect: '9 1'},
+]);
+
+test_composition({
+  property: 'scale',
+  underlying: '1 2 3',
+  addFrom: '4 5 6',
+  replaceTo: '7 8 9',
+}, [
+  {at: -0.5, expect: '2.5 11 22.5'},
+  {at: 0, expect: '4 10 18'},
+  {at: 0.25, expect: '4.75 9.5 15.75'},
+  {at: 0.5, expect: '5.5 9 13.5'},
+  {at: 0.75, expect: '6.25 8.5 11.25'},
+  {at: 1, expect: '7 8 9'},
+  {at: 1.5, expect: '8.5 7 4.5'},
+]);
+
+test_composition({
+  property: 'scale',
+  underlying: 'none',
+  addFrom: 'none',
+  replaceTo: '1.5 1',
+}, [
+  {at: -1, expect: '0.5 1'},
+  {at: 0, expect: '1'},
+  {at: 0.25, expect: '1.125 1'},
+  {at: 0.75, expect: '1.375 1'},
+  {at: 1, expect: '1.5 1'},
+  {at: 2, expect: '2 1'},
+]);
+
+test_composition({
+  property: 'scale',
+  underlying: 'none',
+  addFrom: '4 5 6',
+  replaceTo: 'none',
+}, [
+  {at: -1, expect: '7 9 11'},
+  {at: 0, expect: '4 5 6'},
+  {at: 0.25, expect: '3.25 4 4.75'},
+  {at: 0.75, expect: '1.75 2 2.25'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '-2 -3 -4'},
+]);
+
+test_composition({
+  property: 'scale',
+  underlying: '1 2 3',
+  addFrom: 'none',
+  replaceTo: '7 8 9',
+}, [
+  {at: -0.5, expect: '-2 -1 0'},
+  {at: 0, expect: '1 2 3'},
+  {at: 0.25, expect: '2.5 3.5 4.5'},
+  {at: 0.5, expect: '4 5 6'},
+  {at: 0.75, expect: '5.5 6.5 7.5'},
+  {at: 1, expect: '7 8 9'},
+  {at: 1.5, expect: '10 11 12'},
+]);
+
+test_composition({
+  property: 'scale',
+  underlying: '1 2 3',
+  addFrom: '4 5 6',
+  replaceTo: 'none',
+}, [
+  {at: -0.5, expect: '5.5 14.5 26.5'},
+  {at: 0, expect: '4 10 18'},
+  {at: 0.25, expect: '3.25 7.75 13.75'},
+  {at: 0.5, expect: '2.5 5.5 9.5'},
+  {at: 0.75, expect: '1.75 3.25 5.25'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: '-0.5 -3.5 -7.5'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-composition.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
+<meta name="assert" content="transform 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>
+// This file contains tests for the composition behavior of transforms that is
+// unrelated to the individual transform functions. For the transform functions
+// themselves, see the transform-*-composition.html subtests.
+
+// ------------------ Addition -----------------
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(100deg) rotateY(100deg)',
+  addFrom: 'translate(10px, 20px)',
+  replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)',
+}, [
+  {at: -0.5, expect: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'},
+  {at: 0, expect: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'},
+  {at: 0.25, expect: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'},
+  {at: 0.5, expect: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'},
+  {at: 0.75, expect: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'},
+  {at: 1, expect: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'},
+  {at: 1.5, expect: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'},
+]);
+
+// Shorter list is extended with corresponding identity transforms for pairwise
+// interpolation.
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(45deg)',
+  addFrom: 'none',
+  addTo: 'rotateY(360deg)',
+}, [
+  {at: -0.5, expect: 'rotateX(45deg) rotateY(-180deg)'},
+  {at: 0, expect: 'rotateX(45deg) rotateY(0deg)'},
+  {at: 0.25, expect: 'rotateX(45deg) rotateY(90deg)'},
+  {at: 0.5, expect: 'rotateX(45deg) rotateY(180deg)'},
+  {at: 0.75, expect: 'rotateX(45deg) rotateY(270deg)'},
+  {at: 1, expect: 'rotateX(45deg) rotateY(360deg)'},
+  {at: 1.5, expect: 'rotateX(45deg) rotateY(540deg)'},
+]);
+
+// Matrix decomposition cases
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(90deg)',
+  addFrom: 'translate(100px, 100px)',
+  addTo: 'scale(2)',
+}, [
+  {at: -0.5, expect: 'matrix3d(0.5, 0, 0, 0, 0, 1.11022e-16, 0.5, 0, 0, -1, 2.22045e-16, 0, 150, 9.18485e-15, 150, 1)'},
+  {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 6.12323e-17, 1, 0, 0, -1, 6.12323e-17, 0, 100, 6.12323e-15, 100, 1)'},
+  {at: 0.25, expect: 'matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.22045e-16, 0, 75, 4.59243e-15, 75, 1)'},
+  {at: 0.5, expect: 'matrix3d(1.5, 0, 0, 0, 0, 3.33067e-16, 1.5, 0, 0, -1, 2.22045e-16, 0, 50, 3.06162e-15, 50, 1)'},
+  {at: 0.75, expect: 'matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.22045e-16, 0, 25, 1.53081e-15, 25, 1)'},
+  {at: 1, expect: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'},
+  {at: 1.5, expect: 'matrix3d(2.5, 0, 0, 0, 0, 5.55112e-16, 2.5, 0, 0, -1, 2.22045e-16, 0, -50, -3.06162e-15, -50, 1)'},
+]);
+
+// Force a fallback to matrix interpolation.
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(45deg)',
+  addFrom: 'scaleX(1)',
+  addTo: 'rotateY(360deg)',
+}, [
+  {at: -0.5, expect: 'rotateX(45deg)'},
+  {at: 0, expect: 'rotateX(45deg)'},
+  {at: 0.25, expect: 'rotateX(45deg)'},
+  {at: 0.5, expect: 'rotateX(45deg)'},
+  {at: 0.75, expect: 'rotateX(45deg)'},
+  {at: 1, expect: 'rotateX(45deg)'},
+  {at: 1.5, expect: 'rotateX(45deg)'},
+]);
+
+// ------------------ Accumulation -----------------
+
+// TODO(smcgruer): Add tests for accumulation behaviors.
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-matrix-composition.html

@@ -0,0 +1,208 @@
+<!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>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-perspective-composition.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform-perspective composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions">
+<meta name="assert" content="transform-perspective 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>
+// Addition and accumulation of perspective values are very similar, but not
+// identical. We can test the difference by constructing a scenario where a
+// perspective parameter would go negative in one case (and thus be clamped
+// to 0), and would not go negative in the other case.
+//
+// In the test below, the values differ at 1.5 progress. The reason for this
+// is that at 1.5 progress, the addition case (which uses concatenation)
+// computes to:
+//
+//   perspective(10px) perspective(-50px)
+//
+// Since perspective cannot go negative, this is clamped to:
+//
+//   perspective(10px) identity
+//
+// The accumulation case, on the other hand, combines the components
+// and so ends up blending from perspective(5px) to perspective(8.33...px) at
+// 1.5 progress, which results in perspective(12.5px) - this is what you would
+// get with addition too, if not for the clamping behavior.
+
+// ------------ Addition tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'perspective(10px)',
+  addFrom: 'perspective(10px)',
+  addTo: 'perspective(50px)',
+}, [
+  {at: -0.5, expect: 'perspective(4.12px)'},
+  {at: 0, expect: 'perspective(5px)'},
+  {at: 0.25, expect: 'perspective(5.45px)'},
+  {at: 0.5, expect: 'perspective(6.15px)'},
+  {at: 0.75, expect: 'perspective(7.06px)'},
+  {at: 1, expect: 'perspective(8.33px)'},
+  {at: 1.5, expect: 'perspective(10px)'},
+]);
+
+// ------------ Accumulation tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'perspective(10px)',
+  accumulateFrom: 'perspective(10px)',
+  accumulateTo: 'perspective(50px)',
+}, [
+  {at: -0.5, expect: 'perspective(4.12px)'},
+  {at: 0, expect: 'perspective(5px)'},
+  {at: 0.25, expect: 'perspective(5.45px)'},
+  {at: 0.5, expect: 'perspective(6.15px)'},
+  {at: 0.75, expect: 'perspective(7.06px)'},
+  {at: 1, expect: 'perspective(8.33px)'},
+  {at: 1.5, expect: 'perspective(12.5px)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-rotate-composition.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform-rotate composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#funcdef-transform-rotate">
+<meta name="assert" content="transform-rotate 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>
+// ------------ Addition tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(20deg)',
+  addFrom: 'rotateX(40deg)',
+  addTo: 'rotateX(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateX(50deg)'},
+  {at: 0, expect: 'rotateX(60deg)'},
+  {at: 0.25, expect: 'rotateX(65deg)'},
+  {at: 0.5, expect: 'rotateX(70deg)'},
+  {at: 0.75, expect: 'rotateX(75deg)'},
+  {at: 1, expect: 'rotateX(80deg)'},
+  {at: 1.5, expect: 'rotateX(90deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateY(20deg)',
+  addFrom: 'rotateY(40deg)',
+  addTo: 'rotateY(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateY(50deg)'},
+  {at: 0, expect: 'rotateY(60deg)'},
+  {at: 0.25, expect: 'rotateY(65deg)'},
+  {at: 0.5, expect: 'rotateY(70deg)'},
+  {at: 0.75, expect: 'rotateY(75deg)'},
+  {at: 1, expect: 'rotateY(80deg)'},
+  {at: 1.5, expect: 'rotateY(90deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateZ(20deg)',
+  addFrom: 'rotateZ(40deg)',
+  addTo: 'rotateZ(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateZ(50deg)'},
+  {at: 0, expect: 'rotateZ(60deg)'},
+  {at: 0.25, expect: 'rotateZ(65deg)'},
+  {at: 0.5, expect: 'rotateZ(70deg)'},
+  {at: 0.75, expect: 'rotateZ(75deg)'},
+  {at: 1, expect: 'rotateZ(80deg)'},
+  {at: 1.5, expect: 'rotateZ(90deg)'},
+]);
+
+// When testing rotate functions in isolation, the additive and accumulation
+// behaviors are functionally identical. This test includes a skew to ensure
+// both methods are implemented; add should append the from/to after the skew.
+test_composition({
+  property: 'transform',
+  underlying: 'rotate(45deg) skew(10deg, 20deg)',
+  addFrom: 'rotate(45deg)',
+  addTo: 'rotate(225deg)',
+}, [
+  {at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'},
+  {at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'},
+  {at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'},
+  {at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'},
+  {at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'},
+  {at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'},
+  {at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'},
+]);
+// ------------ Accumulation tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(20deg)',
+  accumulateFrom: 'rotateX(40deg)',
+  accumulateTo: 'rotateX(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateX(50deg)'},
+  {at: 0, expect: 'rotateX(60deg)'},
+  {at: 0.25, expect: 'rotateX(65deg)'},
+  {at: 0.5, expect: 'rotateX(70deg)'},
+  {at: 0.75, expect: 'rotateX(75deg)'},
+  {at: 1, expect: 'rotateX(80deg)'},
+  {at: 1.5, expect: 'rotateX(90deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateY(20deg)',
+  accumulateFrom: 'rotateY(40deg)',
+  accumulateTo: 'rotateY(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateY(50deg)'},
+  {at: 0, expect: 'rotateY(60deg)'},
+  {at: 0.25, expect: 'rotateY(65deg)'},
+  {at: 0.5, expect: 'rotateY(70deg)'},
+  {at: 0.75, expect: 'rotateY(75deg)'},
+  {at: 1, expect: 'rotateY(80deg)'},
+  {at: 1.5, expect: 'rotateY(90deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'rotateZ(20deg)',
+  accumulateFrom: 'rotateZ(40deg)',
+  accumulateTo: 'rotateZ(60deg)',
+}, [
+  {at: -0.5, expect: 'rotateZ(50deg)'},
+  {at: 0, expect: 'rotateZ(60deg)'},
+  {at: 0.25, expect: 'rotateZ(65deg)'},
+  {at: 0.5, expect: 'rotateZ(70deg)'},
+  {at: 0.75, expect: 'rotateZ(75deg)'},
+  {at: 1, expect: 'rotateZ(80deg)'},
+  {at: 1.5, expect: 'rotateZ(90deg)'},
+]);
+
+// The rotate functions all share the same primitive type (rotate3d), so can be
+// accumulated between. If primitive type matching is not properly being
+// performed, this test would likely fail with a fallback to replace behavior.
+test_composition({
+  property: 'transform',
+  underlying: 'rotateX(45deg)',
+  accumulateFrom: 'rotateY(30deg)',
+  accumulateTo: 'rotateY(70deg)',
+}, [
+  // Due to how rotation is accumulated (addition of underlying angles), the
+  // behavior is identical to concatenating the components. The expectations
+  // are expressed as concatenations for readability.
+  {at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'},
+  {at: 0, expect: 'rotateX(45deg) rotateY(30deg)'},
+  {at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'},
+  {at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'},
+  {at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'},
+  {at: 1, expect: 'rotateX(45deg) rotateY(70deg)'},
+  {at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'},
+]);
+
+// When testing rotate functions in isolation, the additive and accumulation
+// behaviors are functionally identical. This test includes a skew to ensure
+// both methods are implemented; accumulate should combine the rotate before
+// the skew.
+test_composition({
+  property: 'transform',
+  underlying: 'rotate(45deg) skew(10deg, 20deg)',
+  accumulateFrom: 'rotate(45deg)',
+  accumulateTo: 'rotate(225deg)',
+}, [
+  {at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'},
+  {at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'},
+  {at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'},
+  {at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'},
+  {at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'},
+  {at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'},
+  {at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-scale-composition.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform-scale composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
+<meta name="assert" content="transform-scale 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>
+// Addition (aka concatenation) of scale functions results in multiplying their
+// values (scale(2) scale(3) == scale(6)), whereas accumulation does a 1-based
+// sum of the components (accumulate(scale(2), scale(3)) == scale(2 + 3 - 1) ==
+// scale(4)).
+
+// ------------ Addition tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleX(2)',
+  addFrom: 'scaleX(3)',
+  addTo: 'scaleX(4)',
+}, [
+  {at: -0.5, expect: 'scaleX(5)'},
+  {at: 0, expect: 'scaleX(6)'},
+  {at: 0.25, expect: 'scaleX(6.5)'},
+  {at: 0.5, expect: 'scaleX(7)'},
+  {at: 0.75, expect: 'scaleX(7.5)'},
+  {at: 1, expect: 'scaleX(8)'},
+  {at: 1.5, expect: 'scaleX(9)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleY(2)',
+  addFrom: 'scaleY(3)',
+  addTo: 'scaleY(4)',
+}, [
+  {at: -0.5, expect: 'scaleY(5)'},
+  {at: 0, expect: 'scaleY(6)'},
+  {at: 0.25, expect: 'scaleY(6.5)'},
+  {at: 0.5, expect: 'scaleY(7)'},
+  {at: 0.75, expect: 'scaleY(7.5)'},
+  {at: 1, expect: 'scaleY(8)'},
+  {at: 1.5, expect: 'scaleY(9)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleZ(2)',
+  addFrom: 'scaleZ(3)',
+  addTo: 'scaleZ(4)',
+}, [
+  {at: -0.5, expect: 'scaleZ(5)'},
+  {at: 0, expect: 'scaleZ(6)'},
+  {at: 0.25, expect: 'scaleZ(6.5)'},
+  {at: 0.5, expect: 'scaleZ(7)'},
+  {at: 0.75, expect: 'scaleZ(7.5)'},
+  {at: 1, expect: 'scaleZ(8)'},
+  {at: 1.5, expect: 'scaleZ(9)'},
+]);
+
+// ------------ Accumulation tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleX(2)',
+  accumulateFrom: 'scaleX(3)',
+  accumulateTo: 'scaleX(4)',
+}, [
+  {at: -0.5, expect: 'scaleX(3.5)'},
+  {at: 0, expect: 'scaleX(4)'},
+  {at: 0.25, expect: 'scaleX(4.25)'},
+  {at: 0.5, expect: 'scaleX(4.5)'},
+  {at: 0.75, expect: 'scaleX(4.75)'},
+  {at: 1, expect: 'scaleX(5)'},
+  {at: 1.5, expect: 'scaleX(5.5)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleY(2)',
+  accumulateFrom: 'scaleY(3)',
+  accumulateTo: 'scaleY(4)',
+}, [
+  {at: -0.5, expect: 'scaleY(3.5)'},
+  {at: 0, expect: 'scaleY(4)'},
+  {at: 0.25, expect: 'scaleY(4.25)'},
+  {at: 0.5, expect: 'scaleY(4.5)'},
+  {at: 0.75, expect: 'scaleY(4.75)'},
+  {at: 1, expect: 'scaleY(5)'},
+  {at: 1.5, expect: 'scaleY(5.5)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'scaleZ(2)',
+  accumulateFrom: 'scaleZ(3)',
+  accumulateTo: 'scaleZ(4)',
+}, [
+  {at: -0.5, expect: 'scaleZ(3.5)'},
+  {at: 0, expect: 'scaleZ(4)'},
+  {at: 0.25, expect: 'scaleZ(4.25)'},
+  {at: 0.5, expect: 'scaleZ(4.5)'},
+  {at: 0.75, expect: 'scaleZ(4.75)'},
+  {at: 1, expect: 'scaleZ(5)'},
+  {at: 1.5, expect: 'scaleZ(5.5)'},
+]);
+
+// The scale functions all share the same primitive type (scale3d), so can be
+// accumulated between.
+test_composition({
+  property: 'transform',
+  underlying: 'scale(2, 4)',
+  accumulateFrom: 'scaleZ(3)',
+  accumulateTo: 'scaleZ(4)',
+}, [
+  {at: -0.5, expect: 'scale3d(2, 4, 2.5)'},
+  {at: 0, expect: 'scale3d(2, 4, 3)'},
+  {at: 0.25, expect: 'scale3d(2, 4, 3.25)'},
+  {at: 0.5, expect: 'scale3d(2, 4, 3.5)'},
+  {at: 0.75, expect: 'scale3d(2, 4, 3.75)'},
+  {at: 1, expect: 'scale3d(2, 4, 4)'},
+  {at: 1.5, expect: 'scale3d(2, 4, 4.5)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-skew-composition.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform-skew composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
+<meta name="assert" content="transform-skew 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>
+// Addition (aka concatenation) of two skew functions skew(a) and skew(b)
+// results in computing tan(a) + tan(b), whereas accumulation results in summing
+// the components to get tan(a + b).
+
+// ------------ Addition tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'skewX(10deg)',
+  addFrom: 'skewX(30deg)',
+  addTo: 'skewX(50deg)',
+}, [
+  {at: -0.5, expect: 'skewX(10deg) skewX(20deg)'},
+  {at: 0, expect: 'skewX(10deg) skewX(30deg)'},
+  {at: 0.25, expect: 'skewX(10deg) skewX(35deg)'},
+  {at: 0.5, expect: 'skewX(10deg) skewX(40deg)'},
+  {at: 0.75, expect: 'skewX(10deg) skewX(45deg)'},
+  {at: 1, expect: 'skewX(10deg) skewX(50deg)'},
+  {at: 1.5, expect: 'skewX(10deg) skewX(60deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'skewY(10deg)',
+  addFrom: 'skewY(30deg)',
+  addTo: 'skewY(50deg)',
+}, [
+  {at: -0.5, expect: 'skewY(10deg) skewY(20deg)'},
+  {at: 0, expect: 'skewY(10deg) skewY(30deg)'},
+  {at: 0.25, expect: 'skewY(10deg) skewY(35deg)'},
+  {at: 0.5, expect: 'skewY(10deg) skewY(40deg)'},
+  {at: 0.75, expect: 'skewY(10deg) skewY(45deg)'},
+  {at: 1, expect: 'skewY(10deg) skewY(50deg)'},
+  {at: 1.5, expect: 'skewY(10deg) skewY(60deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'skew(10deg, 20deg)',
+  addFrom: 'skew(30deg, 10deg)',
+  addTo: 'skew(50deg, 50deg)',
+}, [
+  {at: -0.5, expect: 'skew(10deg, 20deg) skew(20deg, -10deg)'},
+  {at: 0, expect: 'skew(10deg, 20deg) skew(30deg, 10deg)'},
+  {at: 0.25, expect: 'skew(10deg, 20deg) skew(35deg, 20deg)'},
+  {at: 0.5, expect: 'skew(10deg, 20deg) skew(40deg, 30deg)'},
+  {at: 0.75, expect: 'skew(10deg, 20deg) skew(45deg, 40deg)'},
+  {at: 1, expect: 'skew(10deg, 20deg) skew(50deg, 50deg)'},
+  {at: 1.5, expect: 'skew(10deg, 20deg) skew(60deg, 70deg)'},
+]);
+
+// ------------ Accumulation tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'skewX(45deg)',
+  accumulateFrom: 'skewX(30deg)',
+  accumulateTo: 'skewX(70deg)',
+}, [
+  {at: -0.5, expect: 'skewX(55deg)'},
+  {at: 0, expect: 'skewX(75deg)'},
+  {at: 0.25, expect: 'skewX(85deg)'},
+  {at: 0.5, expect: 'skewX(95deg)'},
+  {at: 0.75, expect: 'skewX(105deg)'},
+  {at: 1, expect: 'skewX(115deg)'},
+  {at: 1.5, expect: 'skewX(135deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'skewY(45deg)',
+  accumulateFrom: 'skewY(30deg)',
+  accumulateTo: 'skewY(70deg)',
+}, [
+  {at: -0.5, expect: 'skewY(55deg)'},
+  {at: 0, expect: 'skewY(75deg)'},
+  {at: 0.25, expect: 'skewY(85deg)'},
+  {at: 0.5, expect: 'skewY(95deg)'},
+  {at: 0.75, expect: 'skewY(105deg)'},
+  {at: 1, expect: 'skewY(115deg)'},
+  {at: 1.5, expect: 'skewY(135deg)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'skew(10deg, 45deg)',
+  accumulateFrom: 'skew(20deg, 30deg)',
+  accumulateTo: 'skew(40deg, 70deg)',
+}, [
+  {at: -0.5, expect: 'skew(20deg, 55deg)'},
+  {at: 0, expect: 'skew(30deg, 75deg)'},
+  {at: 0.25, expect: 'skew(35deg, 85deg)'},
+  {at: 0.5, expect: 'skew(40deg, 95deg)'},
+  {at: 0.75, expect: 'skew(45deg, 105deg)'},
+  {at: 1, expect: 'skew(50deg, 115deg)'},
+  {at: 1.5, expect: 'skew(60deg, 135deg)'},
+]);
+
+// The skew{X,Y} functions DO NOT share the same primitive type, so cannot be
+// accumlated between directly. Instead, they fall back to matrix accumulation,
+// which this tests for.
+test_composition({
+  property: 'transform',
+  underlying: 'skewX(45deg)',
+  accumulateFrom: 'skewY(45deg)',
+  accumulateTo: 'skewY(45deg)',
+}, [
+  // Note that this is not equivalent to any form of combined skews.
+  {at: 0.5, expect: 'matrix(1, 1, 0.5, 1.5, 0, 0)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/transform-translate-composition.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>transform-translate composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
+<meta name="assert" content="transform-translate 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 src="../interpolation/resources/interpolation-test.js"></script>
+<script>
+// ------------ Addition tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'translate(10px, 20px)',
+  addFrom: 'translate(100px, 200px)',
+  addTo: 'translate(200px, 400px)',
+}, [
+  {at: -0.5, expect: 'translate(60px, 120px)'},
+  {at: 0, expect: 'translate(110px, 220px)'},
+  {at: 0.25, expect: 'translate(135px, 270px)'},
+  {at: 0.5, expect: 'translate(160px, 320px)'},
+  {at: 0.75, expect: 'translate(185px, 370px)'},
+  {at: 1, expect: 'translate(210px, 420px)'},
+  {at: 1.5, expect: 'translate(260px, 520px)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'translate(10px, 20px)',
+  addFrom: 'translate(100px, 200px)',
+  replaceTo: 'translate(210px, 420px)',
+}, [
+  {at: -0.5, expect: 'translate(60px, 120px)'},
+  {at: 0, expect: 'translate(110px, 220px)'},
+  {at: 0.25, expect: 'translate(135px, 270px)'},
+  {at: 0.5, expect: 'translate(160px, 320px)'},
+  {at: 0.75, expect: 'translate(185px, 370px)'},
+  {at: 1, expect: 'translate(210px, 420px)'},
+  {at: 1.5, expect: 'translate(260px, 520px)'},
+]);
+
+// When testing translate functions in isolation, the additive and accumulation
+// behaviors are functionally identical. This test includes a rotate to ensure
+// both methods are implemented; add should append the from/to after the rotate.
+test_composition({
+  property: 'transform',
+  underlying: 'translateX(100px) rotate(90deg)',
+  addFrom: 'translateX(100px)',
+  addTo: 'translateX(200px)',
+}, [
+  {at: -0.5, expect: 'translateX(100px) rotate(90deg) translateX(50px)'},
+  {at: 0, expect: 'translateX(100px) rotate(90deg) translateX(100px)'},
+  {at: 0.25, expect: 'translateX(100px) rotate(90deg) translateX(125px)'},
+  {at: 0.5, expect: 'translateX(100px) rotate(90deg) translateX(150px)'},
+  {at: 0.75, expect: 'translateX(100px) rotate(90deg) translateX(175px)'},
+  {at: 1, expect: 'translateX(100px) rotate(90deg) translateX(200px)'},
+  {at: 1.5, expect: 'translateX(100px) rotate(90deg) translateX(250px)'},
+]);
+
+// ------------ Accumulation tests --------------
+
+test_composition({
+  property: 'transform',
+  underlying: 'translateX(100px)',
+  accumulateFrom: 'translateX(50px)',
+  accumulateTo: 'translateX(250px)',
+}, [
+  {at: -0.5, expect: 'translateX(50px)'},
+  {at: 0, expect: 'translateX(150px)'},
+  {at: 0.25, expect: 'translateX(200px)'},
+  {at: 0.5, expect: 'translateX(250px)'},
+  {at: 0.75, expect: 'translateX(300px)'},
+  {at: 1, expect: 'translateX(350px)'},
+  {at: 1.5, expect: 'translateX(450px)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'translateY(100px)',
+  accumulateFrom: 'translateY(50px)',
+  accumulateTo: 'translateY(250px)',
+}, [
+  {at: -0.5, expect: 'translateY(50px)'},
+  {at: 0, expect: 'translateY(150px)'},
+  {at: 0.25, expect: 'translateY(200px)'},
+  {at: 0.5, expect: 'translateY(250px)'},
+  {at: 0.75, expect: 'translateY(300px)'},
+  {at: 1, expect: 'translateY(350px)'},
+  {at: 1.5, expect: 'translateY(450px)'},
+]);
+
+test_composition({
+  property: 'transform',
+  underlying: 'translateZ(100px)',
+  accumulateFrom: 'translateZ(50px)',
+  accumulateTo: 'translateZ(250px)',
+}, [
+  {at: -0.5, expect: 'translateZ(50px)'},
+  {at: 0, expect: 'translateZ(150px)'},
+  {at: 0.25, expect: 'translateZ(200px)'},
+  {at: 0.5, expect: 'translateZ(250px)'},
+  {at: 0.75, expect: 'translateZ(300px)'},
+  {at: 1, expect: 'translateZ(350px)'},
+  {at: 1.5, expect: 'translateZ(450px)'},
+]);
+
+// The translate functions all share the same primitive type (translate3d), so
+// can be accumulated between.
+test_composition({
+  property: 'transform',
+  underlying: 'translate(100px, 50px)',
+  accumulateFrom: 'translateZ(50px)',
+  accumulateTo: 'translateZ(250px)',
+}, [
+  {at: -0.5, expect: 'translate3d(100px, 50px, -50px)'},
+  {at: 0, expect: 'translate3d(100px, 50px, 50px)'},
+  {at: 0.25, expect: 'translate3d(100px, 50px, 100px)'},
+  {at: 0.5, expect: 'translate3d(100px, 50px, 150px)'},
+  {at: 0.75, expect: 'translate3d(100px, 50px, 200px)'},
+  {at: 1, expect: 'translate3d(100px, 50px, 250px)'},
+  {at: 1.5, expect: 'translate3d(100px, 50px, 350px)'},
+]);
+
+// When testing translate functions in isolation, the additive and accumulation
+// behaviors are functionally identical. This test includes a rotate to ensure
+// both methods are implemented; accumulate should combine the transform before
+// the rotate.
+test_composition({
+  property: 'transform',
+  underlying: 'translateX(100px) rotate(90deg)',
+  accumulateFrom: 'translateX(100px)',
+  accumulateTo: 'translateX(200px)',
+}, [
+  {at: -0.5, expect: 'translateX(150px) rotate(90deg)'},
+  {at: 0, expect: 'translateX(200px) rotate(90deg)'},
+  {at: 0.25, expect: 'translateX(225px) rotate(90deg)'},
+  {at: 0.5, expect: 'translateX(250px) rotate(90deg)'},
+  {at: 0.75, expect: 'translateX(275px) rotate(90deg)'},
+  {at: 1, expect: 'translateX(300px) rotate(90deg)'},
+  {at: 1.5, expect: 'translateX(350px) rotate(90deg)'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transforms/animation/translate-composition.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>translate composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
+<meta name="assert" content="translate supports <length> and <percentage> animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+}
+</style>
+<script>
+test_composition({
+  property: 'translate',
+  underlying: '100px 200px 300px',
+  addFrom: '-50px 50%',
+  addTo: '100%',
+}, [
+  {at: -1, expect: '-100% calc(200px + 100%) 300px'},
+  {at: 0, expect: 'calc(50px + 0%) calc(200px + 50%) 300px'},
+  {at: 0.25, expect: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'},
+  {at: 0.75, expect: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'},
+  {at: 1, expect: 'calc(100px + 100%) calc(200px + 0%) 300px'},
+  {at: 2, expect: 'calc(150px + 200%) calc(200px - 50%) 300px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: '100px 200px 300px',
+  addFrom: '50% 100px',
+  replaceTo: '200px 50% 100px',
+}, [
+  {at: -1, expect: '100% calc(600px - 50%) 500px'},
+  {at: 0, expect: 'calc(100px + 50%) calc(300px + 0%) 300px'},
+  {at: 0.25, expect: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'},
+  {at: 0.75, expect: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'},
+  {at: 1, expect: 'calc(200px + 0%) 50% 100px'},
+  {at: 2, expect: 'calc(300px - 50%) calc(-300px + 100%) -100px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: '100px 200px 300px',
+  replaceFrom: '50% 100px',
+  addTo: '200px 50% 100px',
+}, [
+  {at: -1, expect: 'calc(-300px + 100%) -50% -400px'},
+  {at: 0, expect: '50%  calc(100px + 0%)'},
+  {at: 0.25, expect: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'},
+  {at: 0.75, expect: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'},
+  {at: 1, expect: 'calc(300px + 0%) calc(200px + 50%) 400px'},
+  {at: 2, expect: 'calc(600px - 50%) calc(300px + 100%) 800px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: 'none',
+  replaceFrom: 'none',
+  addTo: '100px',
+}, [
+  {at: -1, expect: '-100px'},
+  {at: 0, expect: 'none'},
+  {at: 0.25, expect: '25px'},
+  {at: 0.75, expect: '75px'},
+  {at: 1, expect: '100px'},
+  {at: 2, expect: '200px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: 'none',
+  addFrom: 'none',
+  addTo: '100px',
+}, [
+  {at: -1, expect: '-100px'},
+  {at: 0, expect: 'none'},
+  {at: 0.25, expect: '25px'},
+  {at: 0.75, expect: '75px'},
+  {at: 1, expect: '100px'},
+  {at: 2, expect: '200px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: 'none',
+  replaceFrom: '0px 40px 60px',
+  replaceTo: 'none',
+}, [
+  {at: -1, expect: '0px 80px 120px'},
+  {at: 0, expect: '0px 40px 60px'},
+  {at: 0.25, expect: '0px 30px 45px'},
+  {at: 0.75, expect: '0px 10px 15px'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '0px -40px -60px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: 'none',
+  replaceFrom: '0px 40px 60px',
+  addTo: 'none',
+}, [
+  {at: -1, expect: '0px 80px 120px'},
+  {at: 0, expect: '0px 40px 60px'},
+  {at: 0.25, expect: '0px 30px 45px'},
+  {at: 0.75, expect: '0px 10px 15px'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '0px -40px -60px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: '80px 20px',
+  addFrom: 'none',
+  replaceTo: '0px 40px 60px',
+}, [
+  {at: -1, expect: '160px 0px -60px'},
+  {at: 0, expect: '80px 20px'},
+  {at: 0.25, expect: '60px 25px 15px'},
+  {at: 0.5, expect: '40px 30px 30px'},
+  {at: 0.75, expect: '20px 35px 45px'},
+  {at: 1, expect: '0px 40px 60px'},
+  {at: 2, expect: '-80px 60px 120px'},
+]);
+
+test_composition({
+  property: 'translate',
+  underlying: '80px 20px',
+  addFrom: '0px 40px 60px',
+  replaceTo: 'none',
+}, [
+  {at: -1, expect: '160px 120px 120px'},
+  {at: 0, expect: '80px 60px 60px'},
+  {at: 0.25, expect: '60px 45px 45px'},
+  {at: 0.5, expect: '40px 30px 30px'},
+  {at: 0.75, expect: '20px 15px 15px'},
+  {at: 1, expect: 'none'},
+  {at: 2, expect: '-80px -60px -60px'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>vertical-align composition</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
+<meta name="assert" content="vertical-align 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: 'vertical-align',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'vertical-align',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'vertical-align',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'vertical-align',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>

tests/wpt/web-platform-tests/fetch/metadata/appcache.tentative.https.sub.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html manifest="/fetch/metadata/resources/record-header.py?file=appcache-manifest{{$id:uuid()}}">
-<meta name="timeout" content="long">
-<script src=/resources/testharness.js></script>
-<script src=/resources/testharnessreport.js></script>
-<script src=/fetch/metadata/resources/helper.js></script>
-<script src=/common/utils.js></script>
-<body></body>
-<script>
-  async_test(t => {
-    const expected = {"site": "same-origin", "user": "", "mode": "no-cors", "dest": "empty"};
-    window.applicationCache.oncached = window.applicationCache.onnoupdate = window.applicationCache.onerror = t.step_func(async e => {
-      try {
-        let response = await fetch(
-            "/fetch/metadata/resources/record-header.py?retrieve=true&file=appcache-manifest{{$id}}");
-        let text = await response.text();
-        assert_header_equals(text, expected, "Appcache manifest");
-
-        response = await fetch(
-            "/fetch/metadata/resources/record-header.py?retrieve=true&file=appcache-resource{{$id}}");
-        text = await response.text();
-        assert_header_equals(text, expected, "Appcache resource");
-      } catch (e) {
-        t.step(e => {
-          if (e instanceof AssertionError) {
-            throw e;
-          }
-          assert_unreached(`Unhandled rejection with value: ${e}`);
-        });
-      }
-      t.done();
-    });
-  }, "Appcache!");
-</script>

tests/wpt/web-platform-tests/fetch/metadata/portal.tentative.https.sub.html

@@ -30,20 +30,20 @@
     "site": "same-origin",
     "user": "",
     "mode": "navigate",
-    "dest": "document"
+    "dest": "iframe"
   });
 
   create_test("{{hosts[][www]}}:{{ports[https][0]}}", {
     "site": "same-site",
     "user": "",
     "mode": "navigate",
-    "dest": "document"
+    "dest": "iframe"
   });
 
   create_test("{{hosts[alt][www]}}:{{ports[https][0]}}", {
     "site": "cross-site",
     "user": "",
     "mode": "navigate",
-    "dest": "document"
+    "dest": "iframe"
   });
 </script>

tests/wpt/web-platform-tests/fetch/metadata/resources/record-header.py

@@ -99,8 +99,13 @@ def main(request, response):
       file.close()
       return video
 
-    ## Return a valid style content and Content-Type ##
+    ## Return valid style content and Content-Type ##
-    if key.startswith("style") or key.startswith("embed") or key.startswith("object"):
+    if key.startswith("style"):
+      response.headers.set("Content-Type", "text/css")
+      return "div { }"
+
+    ## Return a valid embed/object content and Content-Type ##
+    if key.startswith("embed") or key.startswith("object"):
       response.headers.set("Content-Type", "text/html")
       return "<html>EMBED!</html>"
 

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coep-navigate-popup.https.html

@@ -32,14 +32,14 @@
     "opener": false
   },
   {
-    "title": "coop unsafe-inherit/coep",
+    "title": "coop unsafe-none/coep",
-    "coop": "unsafe-inherit",
+    "coop": "unsafe-none",
     "coep": "require-corp",
     "opener": true
   },
   {
-    "title": "coop unsafe-inherit/no coep",
+    "title": "coop unsafe-none/no coep",
-    "coop": "unsafe-inherit",
+    "coop": "unsafe-none",
     "coep": "",
     "opener": false
   }
@@ -53,9 +53,9 @@
 
     async_test(t => {
       // For each test we open a COOP: same-origin/COEP: require-corp document in a popup and then
-      // navigate that to either a same-origin or same-site document whose COOP and COEP are set as
+      // navigate that to either a same-origin (site=="same-origin") or same-site (site=="same-site")
-      // per the top-most array. We then verify that this document has the correct opener for its
+      // document whose COOP and COEP are set as per the top-most array. We then verify that this
-      // specific setup.
+      // document has the correct opener for its specific setup.
       url_test(t, `${SAME_ORIGIN.origin}/html/cross-origin-opener-policy/resources/coop-coep.py?coop=same-origin&coep=require-corp&navigate=${encodeURIComponent(navigateURL)}`, channel, opener);
     }, title);
   });

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coep-redirect.https.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <title>Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy: redirects</title>
+<meta content=timeout value=long>
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="/common/get-host-info.sub.js"></script>
@@ -41,18 +42,18 @@ const coopCOEPPath = new URL("resources/coop-coep.py", window.location).pathname
     "opener": false
   },
   {
-    "title": "coop unsafe-inherit/coep to coop/coep",
+    "title": "coop unsafe-none/coep to coop/coep",
-    "redirectCOOP": "unsafe-inherit",
+    "redirectCOOP": "unsafe-none",
     "redirectCOEP": "require-corp",
     "coop": "same-origin",
     "coep": "require-corp",
     "opener": true
   },
   {
-    "title": "coop unsafe-inherit/coep to coop unsafe-inherit/coep",
+    "title": "coop unsafe-none/coep to coop unsafe-inherit/coep",
-    "redirectCOOP": "unsafe-inherit",
+    "redirectCOOP": "unsafe-none",
     "redirectCOEP": "require-corp",
-    "coop": "unsafe-inherit",
+    "coop": "unsafe-none",
     "coep": "require-corp",
     "opener": true
   }

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coep.https.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <title>Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy</title>
+<meta content=timeout value=long>
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="/common/get-host-info.sub.js"></script>
@@ -13,14 +14,14 @@
     "opener": true
   },
   {
-    "title": "popup with coop unsafe-inherit/coep",
+    "title": "popup with coop unsafe-none/coep",
-    "coop": "unsafe-inherit",
+    "coop": "unsafe-none",
     "coep": "require-corp",
     "opener": true
   },
   {
-    "title": "popup with coop unsafe-inherit without coep",
+    "title": "popup with coop unsafe-none without coep",
-    "coop": "unsafe-inherit",
+    "coop": "unsafe-none",
     "coep": "",
     "opener": false
   },
@@ -35,10 +36,10 @@
     coop_coep_test(t, SAME_ORIGIN, variant.coop, variant.coep, variant.title.replace(/ /g,"-"), variant.opener);
   }, `Same-origin ${variant.title}`);
 
-  // This seems useful to test, CROSS_SITE is probably too redundant though.
+  // "same-site" is a historical value, equivalent to "unsafe-none"
   async_test(t => {
     coop_coep_test(t, SAME_SITE, variant.coop, variant.coep, `same-site-${variant.title.replace(/ /g,"-")}`, false);
-  }, `Same-site ${variant.title}`);
+  }, `historical: "same-site" ${variant.title}`);
 });
 
 test(() => {

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coop-navigated-popup.https.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <title>Cross-Origin-Opener-Policy: a navigated popup</title>
 <!-- In particular this is different from coep-navigate-popup.https.html as this document initiates
-     the navigation (and uses unsafe-allow-outgoing and no COEP as without that it cannot be
+     the navigation (and uses same-origin-allow-popups and no COEP as without that it cannot be
      observed). COOP should work identically, but implementations might have used the wrong
      authority. -->
 <script src=/resources/testharness.js></script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coop-navigated-popup.https.html.headers

@@ -1 +1 @@
-Cross-Origin-Opener-Policy: same-origin unsafe-allow-outgoing
+Cross-Origin-Opener-Policy: same-origin-allow-popups

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/coop-sandbox.https.html

@@ -15,8 +15,10 @@ async_test(t => {
 const popup = window.open("resources/coop-coep.py?coop=same-origin&coep=&channel=${channel.name}");
 <\/script>`;
   document.body.append(frame);
+  window.onload = t.step_func(() => {
     t.step_timeout(() => {
       t.done()
-  }, 500);
+    }, 1500);
+  });
 });
 </script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/coep-navigate-popup-unsafe-inherit.https.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<title>Historical: Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy: a navigating popup</title>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+<script>
+[
+  {
+    "title": "coop unsafe-inherit/coep",
+    "coop": "unsafe-inherit", // historical value, equivalent to "unsafe-none"
+    "coep": "require-corp",
+    "opener": true
+  },
+  {
+    "title": "coop unsafe-inherit/no coep",
+    "coop": "unsafe-inherit", // historical value, equivalent to "unsafe-none"
+    "coep": "",
+    "opener": false
+  }
+].forEach(variant => {
+  ["same-origin", "same-site"].forEach(site => {
+    const title = `Popup navigating to ${site} with ${variant.title}`;
+    const channel = title.replace(/ /g,"-");
+    const navigateHost = site === "same-origin" ? SAME_ORIGIN : SAME_SITE;
+    const navigateURL = `${navigateHost.origin}/html/cross-origin-opener-policy/resources/coop-coep.py?coop=${variant.coop}&coep=${variant.coep}&channel=${channel}`;
+    const opener = site === "same-origin" ? variant.opener : false;
+
+    async_test(t => {
+      // For each test we open a COOP: same-origin/COEP: require-corp document in a popup and then
+      // navigate that to either a document with same origin (site=="same-origin") or
+      // not-same-origin (site=="same-site") whose COOP and COEP are set as per the top-most array.
+      // We then verify that this document has the correct opener for its specific setup.
+      url_test(t, `${SAME_ORIGIN.origin}/html/cross-origin-opener-policy/resources/coop-coep.py?coop=same-origin&coep=require-corp&navigate=${encodeURIComponent(navigateURL)}`, channel, opener);
+    }, title);
+  });
+});
+</script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-origin-unsafe-allow-outgoing-with-cross-origin.https.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+
+<div id=log></div>
+<script>
+
+let tests = [
+  // popup Origin, popup COOP, expect opener
+  [CROSS_ORIGIN, "", true],
+  [CROSS_ORIGIN, "unsafe-none", true],
+  [CROSS_ORIGIN, "jibberish", true],
+  [CROSS_ORIGIN, "same-site", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-site unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-origin unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-origin", false],
+  [CROSS_ORIGIN, "same-origin-allow-popups", false],
+];
+
+run_coop_tests("same-origin unsafe-allow-outgoing", tests); // historical value, equivalent to "unsafe-none"
+
+</script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-origin-unsafe-allow-outgoing-with-same-origin.https.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+
+<div id=log></div>
+<script>
+
+let tests = [
+  // popup Origin, popup COOP, expect opener
+  [SAME_ORIGIN, "", true],
+  [SAME_ORIGIN, "unsafe-none", true],
+  [SAME_ORIGIN, "jibberish", true],
+  [SAME_ORIGIN, "same-site", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-site unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-origin unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-origin", false],
+  [SAME_ORIGIN, "same-origin-allow-popups", false],
+];
+
+run_coop_tests("same-origin unsafe-allow-outgoing", tests); // historical value, equivalent to "unsafe-none"
+
+</script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-origin-unsafe-allow-outgoing-with-same-origin.https.html.headers

@@ -0,0 +1 @@
+Cross-Origin-Opener-Policy: same-origin unsafe-allow-outgoing

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-origin-unsafe-allow-outgoing-with-same-site.https.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+
+<div id=log></div>
+<script>
+
+let tests = [
+  // popup Origin, popup COOP, expect opener
+  [SAME_SITE, "", true],
+  [SAME_SITE, "unsafe-none", true],
+  [SAME_SITE, "jibberish", true],
+  [SAME_SITE, "same-site", true], // historical value, equivalent to "unsafe-none"
+  [SAME_SITE, "same-site unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_SITE, "same-origin unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_SITE, "same-origin", false],
+  [SAME_SITE, "same-origin-allow-popups", false],
+];
+
+run_coop_tests("same-origin unsafe-allow-outgoing", tests); // historical value, equivalent to "unsafe-none"
+
+</script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-origin-unsafe-allow-outgoing-with-same-site.https.html.headers

@@ -0,0 +1 @@
+Cross-Origin-Opener-Policy: same-origin unsafe-allow-outgoing

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-site-unsafe-allow-outgoing-with-cross-origin.https.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+
+<div id=log></div>
+<script>
+
+let tests = [
+  // popup Origin, popup COOP, expect opener
+  [CROSS_ORIGIN, "", true],
+  [CROSS_ORIGIN, "unsafe-none", true],
+  [CROSS_ORIGIN, "jibberish", true],
+  [CROSS_ORIGIN, "same-site", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-site unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-origin unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [CROSS_ORIGIN, "same-origin", false],
+  [CROSS_ORIGIN, "same-origin-allow-popups", false],
+];
+
+run_coop_tests("same-site unsafe-allow-outgoing", tests); // historical value, equivalent to "unsafe-none"
+
+</script>

tests/wpt/web-platform-tests/html/cross-origin-opener-policy/historical/popup-same-site-unsafe-allow-outgoing-with-same-origin.https.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content=timeout value=long>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="../resources/common.js"></script>
+
+<div id=log></div>
+<script>
+
+let tests = [
+  // popup Origin, popup COOP, expect opener
+  [SAME_ORIGIN, "", true],
+  [SAME_ORIGIN, "unsafe-none", true],
+  [SAME_ORIGIN, "jibberish", true],
+  [SAME_ORIGIN, "same-site", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-site unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-origin unsafe-allow-outgoing", true], // historical value, equivalent to "unsafe-none"
+  [SAME_ORIGIN, "same-origin", false],
+  [SAME_ORIGIN, "same-origin-allow-popups", false],
+];
+
+run_coop_tests("same-site unsafe-allow-outgoing", tests); // historical value, equivalent to "unsafe-none"
+
+</script>