Update web-platform-tests to revision e9f2d000237d43f74136cfd40e5a3454f5b54b70

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

@@ -14,6 +14,9 @@
   [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]
   [Untitled]
@@ -34,3 +37,6 @@
   [Revoke blob URL after creating Request, will fetch]
     expected: FAIL
 
+  [Revoke blob URL after calling fetch, fetch should succeed]
+    expected: FAIL
+

tests/wpt/metadata/css/CSS2/positioning/relpos-percentage-left-in-scrollable.html.ini

@@ -0,0 +1,4 @@
+[relpos-percentage-left-in-scrollable.html]
+  [relpos-percentage-left-in-scrollable]
+    expected: FAIL
+

tests/wpt/metadata/css/CSS2/positioning/relpos-percentage-top-in-scrollable.html.ini

@@ -0,0 +1,4 @@
+[relpos-percentage-top-in-scrollable.html]
+  [relpos-percentage-top-in-scrollable]
+    expected: FAIL
+

tests/wpt/metadata/css/compositing/mix-blend-mode/mix-blend-mode-animation.html.ini

@@ -0,0 +1,2 @@
+[mix-blend-mode-animation.html]
+  expected: FAIL

tests/wpt/metadata/css/cssom-view/elementsFromPoint-iframes.html.ini

@@ -1,5 +1,5 @@
 [elementsFromPoint-iframes.html]
-  expected: CRASH
+  expected: TIMEOUT
   [elementsFromPoint on the root document for points in iframe elements]
     expected: FAIL
 

tests/wpt/metadata/dom/nodes/Document-contentType/contentType/contenttype_txt.html.ini

@@ -1,2 +0,0 @@
-[contenttype_txt.html]
-  expected: CRASH

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

@@ -312,27 +312,12 @@
   [<iframe>: separate response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
-    expected: FAIL
-
-  [<iframe>: separate response Content-Type: text/plain */*]
-    expected: FAIL
-
   [<iframe>: combined 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 */*;charset=gbk]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html;" text/plain]
+  [<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
-    expected: FAIL
-
-  [<iframe>: separate response Content-Type: text/html */*]
-    expected: FAIL
-
-  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
     expected: FAIL
 

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

@@ -53,6 +53,9 @@
   [combined text/javascript ]
     expected: FAIL
 
-  [separate text/javascript ]
+  [separate text/javascript;charset=windows-1252 error text/javascript]
+    expected: FAIL
+
+  [separate text/javascript x/x]
     expected: FAIL
 

tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini

@@ -11,9 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%0C]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20'NosniFF']
-    expected: FAIL
-
-  [Content-Type-Options%3A%20nosniff]
-    expected: FAIL
-

tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini

@@ -1,4 +0,0 @@
-[traverse_the_history_5.html]
-  [Multiple history traversals, last would be aborted]
-    expected: FAIL
-

tests/wpt/metadata/html/dom/reflection-metadata.html.ini

@@ -11913,3 +11913,687 @@
   [style.media: setAttribute() to "+100"]
     expected: FAIL
 
+  [title.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [head.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [style.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [style.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [head.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to null]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [title.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [title.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [style.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [style.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [head.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [link.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to false]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [style.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [style.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [link.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [base.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [head.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [style.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [head.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [head.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [head.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [head.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [base.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [base.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [base.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [style.autofocus: IDL set to false]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [title.autofocus: IDL set to false]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [link.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [head.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [base.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [head.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [style.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [link.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [head.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [style.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [title.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [head.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [style.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [style.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [head.autofocus: IDL set to false]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [base.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [title.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [style.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [head.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [link.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to null]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [title.autofocus: IDL set to null]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [style.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [base.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [head.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [link.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [style.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [style.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [title.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [link.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [title.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [base.autofocus: IDL set to false]
+    expected: FAIL
+
+  [head.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [base.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [meta.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [base.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [style.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [head.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [base.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [link.autofocus: IDL set to null]
+    expected: FAIL
+
+  [link.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [title.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [style.autofocus: IDL set to null]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [head.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [link.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [meta.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [title.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [title.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [style.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [base.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [style.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [base.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [head.autofocus: IDL set to null]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [title.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [base.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [link.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [head.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [meta.autofocus: IDL set to false]
+    expected: FAIL
+
+  [meta.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [link.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+

tests/wpt/metadata/html/dom/reflection-obsolete.html.ini

@@ -17382,3 +17382,573 @@
   [frame.src: IDL set to "+100"]
     expected: FAIL
 
+  [frameset.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to null]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to null]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [font.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [font.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [font.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [marquee.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [font.autofocus: IDL set to null]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [font.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [font.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to null]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to " foo "]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [frameset.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to false]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [frameset.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to false]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [dir.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to ".5"]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to ".5"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to " foo "]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [font.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [frame.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to ""]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to 1.5]
+    expected: FAIL
+
+  [font.autofocus: IDL set to undefined]
+    expected: FAIL
+
+  [marquee.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [font.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to null]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to false]
+    expected: FAIL
+
+  [frame.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [dir.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to ""]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to "5%"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to 7]
+    expected: FAIL
+
+  [font.autofocus: IDL get with DOM attribute unset]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to false]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to NaN]
+    expected: FAIL
+
+  [font.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to -Infinity]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [font.autofocus: typeof IDL attribute]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to true]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to object "[object Object\]"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to object "test-valueOf"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to "+100"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to NaN]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [font.autofocus: IDL set to false]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to 7]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [marquee.autofocus: IDL set to Infinity]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to object "[object Object\]"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to "autofocus"]
+    expected: FAIL
+
+  [font.autofocus: IDL set to 1.5]
+    expected: FAIL
+
+  [frameset.autofocus: setAttribute() to Infinity]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to false]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to "\\0"]
+    expected: FAIL
+
+  [frameset.autofocus: IDL set to -Infinity]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to "5%"]
+    expected: FAIL
+
+  [dir.autofocus: IDL set to object "test-valueOf"]
+    expected: FAIL
+
+  [frame.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [frame.autofocus: IDL set to object "test-toString"]
+    expected: FAIL
+
+  [dir.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to null]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to "+100"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to object "test-toString"]
+    expected: FAIL
+
+  [marquee.autofocus: setAttribute() to "\\0"]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to undefined]
+    expected: FAIL
+
+  [font.autofocus: setAttribute() to 7]
+    expected: FAIL
+

tests/wpt/metadata/html/semantics/interactive-elements/the-details-element/toggleEvent.html.ini

@@ -1,7 +0,0 @@
-[toggleEvent.html]
-  [Calling open twice on 'details' fires only one toggle event]
-    expected: FAIL
-
-  [Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
-    expected: FAIL
-

tests/wpt/metadata/html/semantics/scripting-1/the-script-element/script-onerror-insertion-point-2.html.ini

@@ -1,2 +0,0 @@
-[script-onerror-insertion-point-2.html]
-  expected: TIMEOUT

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/opening-the-input-stream/ignore-opens-during-unload.window.js.ini

@@ -1,5 +1,5 @@
 [ignore-opens-during-unload.window.html]
-  expected: CRASH
+  expected: TIMEOUT
   [ignore-opens-during-unload]
     expected: FAIL
 

tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini

@@ -1,4 +1,5 @@
 [realtimeanalyser-fft-scaling.html]
+  expected: TIMEOUT
   [X 2048-point FFT peak position is not equal to 64. Got 0.]
     expected: FAIL
 

tests/wpt/metadata/websockets/Create-Secure-extensions-empty.any.js.ini

@@ -1,5 +1,4 @@
 [Create-Secure-extensions-empty.any.html]
-  expected: TIMEOUT
   [W3C WebSocket API - Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
     expected: FAIL
 
@@ -9,12 +8,8 @@
   [Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
     expected: FAIL
 
-  [Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be closed]
-    expected: NOTRUN
-
 
 [Create-Secure-extensions-empty.any.worker.html]
-  expected: TIMEOUT
   [W3C WebSocket API - Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
     expected: FAIL
 
@@ -24,6 +19,3 @@
   [Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
     expected: FAIL
 
-  [Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be closed]
-    expected: NOTRUN
-

tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini

@@ -0,0 +1,2 @@
+[Worker-constructor.html]
+  expected: ERROR

tests/wpt/mozilla/meta/css/transition_calc_implicit.html.ini

@@ -0,0 +1,2 @@
+[transition_calc_implicit.html]
+  expected: TIMEOUT

tests/wpt/web-platform-tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-left">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083">
+<p>There should be no red, and no scrollbar.</p>
+<div id="container" style="overflow:auto; width:500px; background:red;">
+  <div style="padding-right:90%; background:yellow;">
+    <div style="position:relative; left:900%; width:50px; height:50px; background:cyan;">
+    </div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  container.scrollLeft = 123456;
+  test(()=> {
+      assert_equals(container.scrollLeft, 0);
+  }, "Left percentage resolved correctly for overflow contribution");
+</script>

tests/wpt/web-platform-tests/css/CSS2/positioning/relpos-percentage-top-in-scrollable.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-top">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083">
+<p>There should be a green square below.</p>
+<div style="position:relative; width:200px; height:200px;">
+  <div id="container" style="overflow:hidden; position:absolute; top:0; left:0; bottom:0; right:0;">
+    <div style="position:relative; top:100%; width:100px; height:100px; background:green;"></div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  container.scrollTop = 123456;
+  test(()=> {
+      assert_equals(container.scrollTop, 100);
+  }, "Top percentage resolved correctly for overflow contribution");
+</script>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html

@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline align a display:block item with a display:grid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  padding-bottom: 20px;
+}
+
+x, z {
+  display: block;
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+z {
+  width: 40px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><z></z>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html

@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html

@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-column:1"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html

@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html

@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-row:4"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-001-ref.html

@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(10, 30px) 100px;
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  position: relative;
+  padding: 4px 3px 1px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 0 / repeat(10, 30px) 100px;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  min-width:0;
+  min-height:0;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-001.html

@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="abs-pos-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px);
+  grid-template-areas: ". . . . . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+  position: relative;
+  padding: 4px 3px 1px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-002-ref.html

@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: grid-aligned abs.pos. inside rel.pos. subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px) 100px;
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  padding: 1px 2px;
+}
+
+.subgrid {
+  position: relative;
+  display: grid;
+  grid: auto / 27px repeat(7, 30px);
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  padding: 4px 0 1px 0;
+  border: 3px solid black;
+  min-height: 1em;
+  background: yellow;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3; right:33px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1; right:-10px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1; left:13px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1; left:-33px">x</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-002.html

@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: grid-aligned abs.pos. inside rel.pos. subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="abs-pos-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px);
+  grid-template-areas: ". . . . . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+  padding: 1px 2px;
+}
+
+.subgrid {
+  position: relative;
+  display: grid;
+  grid: auto / subgrid;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  padding: 4px 33px 1px 10px;
+  border: 3px solid black;
+  min-width: 0;
+  min-height: 1em;
+  background: yellow;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/baseline-001-ref.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline-aligned subgrid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+}
+
+x, z {
+  display: block;
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+z {
+  width: 20px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+<div class="grid" style="align-items: last baseline">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/baseline-001.html

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="baseline-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+  place-content: inherit;
+  place-items: inherit;
+}
+
+x {
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x style="grid-row:2">&nbsp;A</x><x></x>
+</div>
+</div>
+
+<div class="grid" style="align-items: last baseline">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-001-ref.html

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid with definite grid-gap in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: inline-grid;
+    gap: 20px 10px;
+    grid-template-columns: repeat(4,auto);
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-area: 1 / 1 / 2 / 3;
+  }
+
+  .b {
+    grid-area: 1/4;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+    margin-right: 10px;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    row-gap: 100px;
+    column-gap: 10px;
+    grid: repeat(2,auto) / repeat(3,auto);
+  }
+
+  .e {
+    grid-area: 1/2; visibility:hidden; margin-left:15px;
+  }
+  .f {
+    grid-area: 1/3; visibility:hidden; margin-left:10px;
+  }
+  .g {
+    grid-area: 1/4; visibility:hidden; margin-left:15px;
+  }
+</style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box">E</div>
+    <div class="box">F</div>
+    <div class="box">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-001.html

@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with definite grid-gap in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: inline-grid;
+    gap: 20px;
+    grid-template-columns:  repeat(4,auto);
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    row-gap: 100px;
+    column-gap: 10px;
+    grid: subgrid / subgrid;
+  }
+</style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-002-ref.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  gap: 10px 20px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  background: yellow;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e {
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  margin: -5px 0;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c>c</c>
+<d>d</d>
+<e></e>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-002.html

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  gap: 10px 20px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c>c</c>
+<d>d</d>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-003-ref.html

@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid with border-bottom and percentage gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 0 15px 15px 0 0 40px / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(4, auto) / auto auto;
+  gap: 3px 8px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  background: grey;
+  width: 40px;
+  height: 30px;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e { display:block; width: 20px; height:15px; background:black; }
+
+f {
+  grid-area: 4/2/span 1/span 5;
+  background: lightblue!important;
+  height: 40px;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1; height:0"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<f></f>
+<div class="subgrid">
+<c><e></e></c>
+<d><e></e></d>
+<c><e></e></c>
+<d><e></e></d>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-003.html

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom and percentage gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto auto;
+  gap: 20% 20%;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: grey;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e { display:block; width: 20px; height:15px; background:black; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c><e></e></c>
+<d><e></e></d>
+<c><e></e></c>
+<d><e></e></d>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-004-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid: 100px 1em / 100px 1em; gap:60px; grid-area:span 2/span 2">
+    <div style="display:grid; grid: 60px 1em / 100px; gap:100px; grid-row:span 2">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:2/2">c</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-004.html

@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-004-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2">
+    <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:2/2">c</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-005-ref.html

@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
+  <div style="display:grid; grid:100px/140px calc(40px); gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-005.html

@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-005-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
+  <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-006-ref.html

@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid, justify-content:space-around, overflowing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+body { margin:200px; }
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:center; width:50px">
+  <div style="display:grid; grid:100px/140px 50px; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-006.html

@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid, justify-content:space-around, overflowing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-006-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+body { margin:200px; }
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:space-around; width:50px">
+  <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-007-ref.html

@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested ortogonal writing-mode subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:60px auto/100px auto;
+  gap:100px 60px;
+  border:3px solid;
+  background:pink;
+}
+span { background:grey; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span style="grid-area:1/1; background:lightgrey; width:60px; height:160px"></span>
+  <span style="grid-area:1/1">a</span>
+  <span style="grid-row:2; background:cyan">b</span>
+  <span style="grid-area:2/2" class="vrl">ccc</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-007.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested ortogonal writing-mode subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink">
+    <div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:1/2">ccc</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-008-ref.html

@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested orthogonal writing-mode subgrids with percentage column-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px 375px/300px;
+  border:3px solid;
+  width: 300px;
+  height: 500px;
+  background:lightgrey;
+  row-gap: 25px;
+}
+span {
+  grid-row:2;
+  background:cyan;
+  width:50px;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>ccc</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-008.html

@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage column-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-008-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/200px auto;
+  border:3px solid;
+  background:grey;
+  width: 300px;
+  height: 500px;
+}
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  column-gap: 10%;
+  grid-area: span 2/span 2;
+  justify-content:end;
+  background:lightgrey;
+}
+span { background:cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid vlr">
+    <span class="hl">ccc</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-009-ref.html

@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested orthogonal writing-mode subgrids with percentage row-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:400px/300px;
+  border:3px solid;
+  background:lightgrey;
+  width:300px;
+  height:400px;
+}
+span {
+  margin-top:350px;
+  margin-right:115px;
+  background:cyan;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>cc</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-009.html

@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage row-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-009-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/200px auto;
+  border:3px solid;
+  background:grey;
+  width:300px;
+  height:400px;
+}
+.subgrid {
+  display: grid;
+  grid: subgrid / 50px;
+  row-gap: 10%;
+  grid-area: span 2/span 2;
+  background:lightgrey;
+}
+span { background:cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid vlr">
+    <span class="hl">cc</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:20px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+  .a { background-color: grey; }
+  .c { background-color: black; }
+  .b { background-color: black; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 20px;
+    grid: auto / 70px 130px 70px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-larger-001.html

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:20px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-larger-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+  .a { background-color: grey; }
+  .c { background-color: black; }
+  .b { background-color: black; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 20px;
+    grid: subgrid / subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html

@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with larger gap than parent grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:lightgrey; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span style="height:60px">a</span><span style="margin-top:40px">b</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-larger-002.html

@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with larger gap than parent grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-larger-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:lightgrey; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:normal</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,minmax(100px,auto));
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 80px 150px 80px;
+    grid-template-rows: 80px 80px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-normal-001.html

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:normal</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-normal-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,minmax(100px,auto));
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:0px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 170px 100px 190px 100px;
+    grid-template-rows: repeat(3,auto);
+    gap: 0;
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+    margin-bottom: 20px;
+  }
+
+  .b {
+    grid-column: 4 ;
+    margin-bottom: 20px;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+    margin-right: 20px;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 0;
+    grid-template-columns: 90px 170px 90px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-gap-smaller-001.html

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:0px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-smaller-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 0;
+    grid: subgrid / subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/item-percentage-height-001-ref.html

@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item percentage height</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style type="text/css">
+
+.wrapper {
+  padding: 2px;
+  padding-top: 5px;
+  border: 1px solid;
+}
+.grid {
+  display: grid;
+  grid: auto auto / auto;
+  grid-row-gap: 60px;
+  height: 300px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-row: span 2;
+  grid-row-gap: 40px;
+  padding: 10px;
+  padding-top: 5px;
+}
+
+.item {
+  align-self: start;
+  width: 100px;
+  background: grey;
+  margin-left: 10px;
+}
+
+.hidden { visibility: hidden; }
+.a1 { grid-area: 1/1; }
+.a2 { grid-area: 2/1; }
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+<div class="grid">
+  <div class="item hidden a1" style="height:25px"></div><div class="item a1" style="margin-top:5px; margin-bottom:-10px; align-self:stretch"></div>
+  <div class="item hidden a2" style="height:120px"></div><div class="item a2" style="margin-top:-10px; height:100px"></div>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/item-percentage-height-001.html

@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item percentage height</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="item-percentage-height-001-ref.html">
+  <style type="text/css">
+
+.grid {
+  display: grid;
+  grid: auto auto / auto;
+  grid-row-gap: 60px;
+  border: 1px solid;
+  padding: 2px;
+  padding-top: 5px;
+  height: 300px;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-row: span 2;
+  grid-row-gap: 40px;
+  background: lightgrey;
+  padding: 10px;
+  padding-top: 5px;
+}
+
+.item {
+  align-self: start;
+  height: 100%;
+  width: 100px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+    <div class="item" style="height:100px"></div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-001-ref.html

@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 3;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: 1 / 3"></x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-001.html

@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 3;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: span a / a -1"></x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-002.html

@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(10, 10px) repeat(10, [a] 10px) [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 10;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: span a / a 8"></x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-003.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div class="subgrid" style="grid-column: span 3">
+      <x style="grid-column: span a / a -1"></x>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-004-ref.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item using mix of outer/inner line names</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns:  subgrid [x] [b] [] [] [b];
+  grid-auto-rows: 10px;
+  grid-column: 2 / span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-row:1; grid-column: 2 / 4"></x>
+    <x style="grid-row:2; grid-column: 2 / 5"></x>
+    <x style="grid-row:3; grid-column: 2 / 4"></x>
+    <x style="grid-row:4; grid-column: 2 / 4"></x>
+    <x style="grid-row:5; grid-column: 2 / 5"></x>
+    <x style="grid-row:6; grid-column: 2 / 4"></x>
+    <x style="grid-row:7; grid-column: 1 / 4"></x>
+    <x style="grid-row:8; grid-column: 2 / 4"></x>
+    <x style="grid-row:9; grid-column: 2 / 3"></x>
+    <x style="grid-row:10; grid-column: 2 / 3"></x>
+    <x style="grid-row:11; grid-column: 2 / 5"></x>
+    <x style="grid-row:12; grid-column: 2 / 4"></x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-004.html

@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using mix of outer/inner line names</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns:  subgrid [x] [b] [] [] [b];
+  grid-auto-rows: 10px;
+  grid-column: 2 / span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-row:1; grid-column: b / b 2"></x>
+    <x style="grid-row:2; grid-column: b / b -1"></x>
+    <x style="grid-row:3; grid-column: b / b -2"></x>
+    <x style="grid-row:4; grid-column: b / span b"></x>
+    <x style="grid-row:5; grid-column: b / span b 2"></x>
+    <x style="grid-row:6; grid-column: span b / b 2"></x>
+    <x style="grid-row:7; grid-column: span b 2 / b 2"></x>
+    <x style="grid-row:8; grid-column: b -2 / b"></x>
+    <x style="grid-row:9; grid-column: b -3 / b"></x>
+    <x style="grid-row:10; grid-column: b / b"></x>
+    <x style="grid-row:11; grid-column: b / b 10"></x>
+    <x style="grid-row:12; grid-column: span b / b -2"></x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-005-ref.html

@@ -0,0 +1,153 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
+        [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
+  grid-template-areas: ". . . e . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+.subgrid2 {
+  display: grid;
+  grid: auto / subgrid [] [] [] [b];
+  grid-column: span 10;
+}
+
+.subgrid#s1 {
+  grid-template-areas: ". e e . . . .";
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  min-width:10px;
+  min-height:20px;
+  background:silver;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid" id="s1">
+  <x style="grid-column:10 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid hr">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hl" id="s2">
+  <x style="grid-column: 10 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr" id="s2">
+  <x style="grid-column: 10 / span 4">x</x>
+</div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:1 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:10 / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: 1 / -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-row:2; grid-column: 1 / -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: span 4 / 11">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2" style="grid-row:2">
+    <x style="grid-column: 10 / 11">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
+    <x style="grid-column: 1 / 11">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: 1 / 6">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
+<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: 2 / 6">x</x>
+  </div>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-005.html

@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
+        [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
+  grid-template-areas: ". . . e . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+.subgrid2 {
+  display: grid;
+  grid: auto / subgrid [] [] [] [b];
+  grid-column: span 10;
+}
+
+.subgrid#s1 {
+  grid-template-areas: ". e e . . . .";
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  min-width:10px;
+  min-height:20px;
+  background:silver;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid" id="s1">
+  <x style="grid-column:foo / span 4">x</x>
+</div>
+</div>
+
+<div class="grid hr">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hl" id="s2">
+  <x style="grid-column: x 6 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr" id="s2">
+  <x style="grid-column: x 6 / span 4">x</x>
+</div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:1 / b">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:foo / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: span bar / foo 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-row:2; grid-column: span bar / foo 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:span 4 / foo">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2" style="grid-row:2">
+    <x style="grid-column:foo / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
+    <x style="grid-column: span a / a 8">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
+<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-006-ref.html

@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+div > div { background: grey; grid-column: 2 / span 2; }
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x { background: silver; }
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 3 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 3 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-006.html

@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-006-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+div > div { background: grey; grid-column: 2 / span 2; }
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x { background: silver; }
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-007-ref.html

@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 0.2em / repeat(10,30px);
+  grid-auto-rows: 2em;
+  border: 1px solid;
+  padding: 1px 2px;
+}
+
+div > div {
+  padding: 4px 0 1px 0;
+  border: 3px solid black;
+  background: grey;
+  margin-left: 30px;
+  width: 54px;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="margin-left:0">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:174px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="margin-left:0">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:174px">
+    <x>x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-007.html

@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 0.2em / repeat(10,30px);
+  grid-auto-rows: 2em;
+  border: 1px solid;
+  padding: 1px 2px;
+}
+
+div > div {
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 33px 1px 10px;
+  border: 3px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-008-ref.html

@@ -0,0 +1,162 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  position: relative;
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 0 1px 10px;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x style="grid-column: -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x style="grid-column: 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 5">
+    <x style="grid-column: 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 5">
+    <x style="grid-column: 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 6">
+    <x style="grid-column: 2 / 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 3">
+    <x style="grid-column: -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 6">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 6">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x style="grid-column: 3 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x style="grid-column: 2 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 5">
+    <x style="grid-column: 2 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 5">
+    <x style="grid-column: 6 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 6">
+    <x style="grid-column: 2 / 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 3">
+    <x style="grid-column: 4 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 6">
+    <x style="grid-column: 5 / 7">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 6">
+    <x style="grid-column: 5 / 7">x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-008.html

@@ -0,0 +1,164 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-008-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  position: relative;
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 0 1px 10px;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [][a][];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a 2 / a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/span a">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/a 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [][a][];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a 2 / a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/span a">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/a 2">x</x>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / auto;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="text-indent:10px">
+    A B
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vr">
+    <div class="subgrid hr">A B</div>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:3; height:50px; background:black"></x>
+<x style="grid-row:4; height:50px; background:pink"></x>
+<x style="grid-row:5; height:40px; background:black"></x>
+<div class="subgrid vlr">
+<div class="subgrid hl">
+  <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="orthogonal-writing-mode-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / subgrid;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="text-indent:10px">
+    A B
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vr">
+    <div class="subgrid hr">A B</div>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr">
+<div class="subgrid hl">
+  <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html

@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 11px 7px 5px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid vrl">
+<x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x>
+<div class="subgrid hl">
+  <x style="grid-column:span 12">A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x style="background:yellow">C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x>
+<div class="subgrid vlr" style="grid: auto / repeat(5, auto);">
+  <x>A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x>C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x>
+<div class="subgrid vlr"></div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 11px 7px 5px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / subgrid;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid vrl">
+<x style="grid-column:1"></x><x style="grid-column:2"></x><x style="grid-column:3"></x><x style="grid-column:4"></x><x style="grid-column:5"></x><x style="grid-column:6"></x>
+<div class="subgrid hl">
+  <x style="grid-column:span 12">A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x style="background:yellow">C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr">
+  <x>A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x>C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr"></div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html

@@ -0,0 +1,104 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(50, auto) / repeat(4, auto);
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { text-indent:10px; background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:23px"></x>
+  <div class="subgrid vlr">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6">AB</item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:40px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:27px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:40px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:12px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:40px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:12px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html

@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { text-indent:10px; background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6">AB</item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html

@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(50, auto);;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vlr" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:10px 20px">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:43px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
+    <item>X</item><item class="">&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:30px 20px">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:8/11; grid-template-columns:30px 20px">
+    <item>XXX</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html

@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+  <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vlr" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:8/11">
+    <item>XXX</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html

@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item auto block-size</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+
+body { width:600px; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow:dense;
+  column-gap: 40px;
+  row-gap: 0px;
+}
+
+.card {
+  background-color: #fff;
+  grid-row: auto / span 3;
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: auto;
+  display: grid;
+  row-gap: 40px;
+}
+
+
+.card .inner, .card footer {
+  padding: 10px;
+}
+
+.card .inner { background: grey; }
+
+.card h2 {
+  margin: 0;
+  color: #fff;
+  background-color: rgb(3,99,143);
+  border-bottom: 4px solid rgb(24,154,153);
+}
+
+.card footer {
+  background-color: rgb(182,222,211);
+}
+
+* { box-sizing: border-box; }
+
+item {
+  border: 1px solid;
+  visibility: visible;
+}
+
+.hidden { visibility: hidden; }
+</style>
+<body>
+
+<div class="grid">
+
+   <div class="card">
+     <h2><span class="hidden">My title</span></h2>
+     <div class="inner">
+       <p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p>
+     </div>
+     <footer>Footer contents</footer>
+   </div>
+
+   <div class="card hidden">
+     <h2 style="grid-area:1/1"><span>My title</span></h2>
+     <div class="inner" style="grid-area:2/1">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer style="grid-area:3/1">Footer contents</footer>
+
+     <item style="grid-area:1/1">1</item>
+     <item style="grid-area:2/1">2</item>
+     <item style="grid-area:3/1">3</item>
+
+   </div>
+
+    <div class="card">
+     <h2>My title</h2>
+     <div class="inner">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer><span class="hidden">Footer contents</span></footer>
+   </div>
+
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-item-block-size-001.html

@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item auto block-size</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="subgrid-item-block-size-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+
+body { width:600px; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow:dense;
+  gap: 40px;
+}
+
+.card {
+  background-color: #fff;
+  grid-row: auto / span 3;
+  grid-template-rows: subgrid;
+  grid-template-columns: auto;
+  display: grid;
+}
+
+
+.card .inner, .card footer {
+  padding: 10px;
+}
+
+.card .inner { background: grey; }
+
+.card h2 {
+  margin: 0;
+  color: #fff;
+  background-color: rgb(3,99,143);
+  border-bottom: 4px solid rgb(24,154,153);
+}
+
+.card footer {
+  background-color: rgb(182,222,211);
+}
+
+* { box-sizing: border-box; }
+
+item {
+  border: 1px solid;
+  grid-column: 2;
+}
+
+</style>
+<body>
+
+<div class="grid">
+
+   <div class="card">
+     <h2></h2>
+     <div class="inner">
+       <p>The contents.</p>
+     </div>
+     <footer>Footer contents</footer>
+   </div>
+
+    <item>1</item>
+    <item>2</item>
+    <item>3</item>
+
+    <div class="card">
+     <h2>My title</h2>
+     <div class="inner">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer></footer>
+   </div>
+
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-invalid.html

@@ -45,6 +45,13 @@ test_invalid_value("clip-path", "ellipse(-50px 60px at 70% 80%)");
 test_invalid_value("clip-path", "polygon(1%)");
 
 test_invalid_value("clip-path", "unknown-box");
+
+test_invalid_value("clip-path", 'path(abc, "m 20 0 h -100 z")');
+test_invalid_value("clip-path", 'path(nonzero)');
+test_invalid_value("clip-path", 'path(evenodd, "")');
+test_invalid_value("clip-path", 'path("m 20 0 h -100", nonzero)');
+
+
 </script>
 </body>
 </html>

tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-valid.html

@@ -42,6 +42,14 @@ test_valid_value("clip-path", "polygon(1% 2%)");
 test_valid_value("clip-path", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 3em 4em)");
 test_valid_value("clip-path", "polygon(evenodd, 1px 2px, 3em 4em, 5pt 6%)");
 
+// New supported shape in [css-shapes-2]
+// https://drafts.csswg.org/css-shapes-2/#supported-basic-shapes
+test_valid_value("clip-path", 'path("m 20 0 h -100")');
+test_valid_value("clip-path", 'path(evenodd, "M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")');
+test_valid_value("clip-path",
+  'path(nonzero, "M20,20h60 v60 h-60z M30,30 h40 v40 h-40z")',
+  'path("M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")');
+
 // <geometry-box>
 test_valid_value("clip-path", "border-box");
 test_valid_value("clip-path", "padding-box");
@@ -57,7 +65,7 @@ test_valid_value("clip-path", "circle(7% at 8% 9%) border-box");
 // <geometry-box> basic-shape>
 test_valid_value("clip-path", "border-box circle(7% at 8% 9%)");
 
-//  <clip-source>
+// <clip-source>
 test_valid_value("clip-path", "url(https://example.com/)", ["url(https://example.com/)", "url(\"https://example.com/\")"]);
 test_valid_value("clip-path", "url(\"https://example.com/\")", ["url(https://example.com/)", "url(\"https://example.com/\")"]);
 </script>

tests/wpt/web-platform-tests/css/css-writing-modes/direction-upright-001.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>'text-orientation: upright' forces text to strong LTR in vertical typographic modes</title>
+<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel=match href="reference/direction-upright-001.html">
+<meta charset=utf-8>
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    text-align: right;
+    font: 20px/1 sans-serif;
+  }
+  span { text-orientation: upright; }
+  hr { clear: both; }
+</style>
+
+<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
+
+<!-- test -->
+
+<div dir=rtl style="writing-mode: vertical-rl">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: vertical-lr">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+
+<!-- control -->
+
+<div dir=rtl>
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+
+<hr>
+
+<!-- reference -->
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>

tests/wpt/web-platform-tests/css/css-writing-modes/direction-upright-002.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<title>'text-orientation: upright' forces used 'direction' to LTR in vertical typographic modes</title>
+<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel=help href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-auto-flow-property">
+<link rel=help href="https://www.w3.org/TR/css-ruby-1/#bidi">
+<link rel=match href="reference/direction-upright-002.html">
+
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    border-inline-start-color: orange;
+    border-block-start-color: aqua;
+    border-inline-end-color: lime;
+    border-block-end-color: yellow;
+  }
+  colgroup:first-child { background: fuchsia; }
+  col:last-child { background: purple; }
+  .flex { display: flex; }
+  .grid { grid-template-columns: auto auto }
+  hr { clear: both }
+</style>
+
+<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
+
+<!-- test -->
+
+<div dir=rtl style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<!-- control -->
+
+<div dir=rtl style="text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<hr>
+
+<!-- reference -->
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>

tests/wpt/web-platform-tests/css/css-writing-modes/reference/direction-upright-001.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<title>Reftest Reference</title>
+<meta charset=utf-8>
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    text-align: right;
+    font: 20px/1 sans-serif;
+  }
+  span { text-orientation: upright; }
+  hr { clear: both; }
+</style>
+
+<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
+
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+
+
+<hr>
+
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>

tests/wpt/web-platform-tests/css/css-writing-modes/reference/direction-upright-002.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<title>Reftest Reference</title>
+
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    border-inline-start-color: orange;
+    border-block-start-color: aqua;
+    border-inline-end-color: lime;
+    border-block-end-color: yellow;
+  }
+  colgroup:first-child { background: fuchsia; }
+  col:last-child { background: purple; }
+  .flex { display: flex; }
+  .grid { grid-template-columns: auto auto }
+  hr { clear: both }
+</style>
+
+<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<hr>
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>

tests/wpt/web-platform-tests/css/cssom-view/offsetTopLeft-border-box.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+
+.container {
+  position: relative;
+  font: 20px/1 Ahem;
+  width: 150px;
+  height: 100px;
+  padding: 2px 10px;
+  border-width: 3px 6px;
+  border-style: solid;
+  box-sizing: border-box;
+}
+
+.target { background: grey; }
+.hl { writing-mode:horizontal-tb; }
+.vlr { writing-mode:vertical-lr; }
+</style>
+<div id=tests>
+<div class="container hl">
+  <span class="target">x</span>
+</div>
+<div class="container vlr">
+  <span class="target">x</span>
+</div>
+<div class="container hl">
+  <div class="target">x</div>
+</div>
+<div class="container vlr">
+  <div class="target">x</div>
+</div>
+</div>
+<script>
+setup({explicit_done: true});
+onload = () => {
+  // Clone the above tests for the following 'display' types:
+  let display = ['inline-block', 'grid', 'inline-grid', 'flex', 'inline-flex', 'flow-root' ];
+  let tests = document.querySelector('#tests');
+  display.forEach((display) => {
+    let t = tests.cloneNode(true);
+    [...t.children].forEach((child) => {
+      child.setAttribute("style", "display:"+display);
+    });
+    document.body.appendChild(t);
+  });
+  // Check that all of them return an offset relative the padding edge.
+  var i = 0;
+  document.querySelectorAll('.target').forEach((target) => {
+    test(() => {
+      assert_equals(target.offsetLeft, 10, 'offsetLeft');
+      assert_equals(target.offsetTop, 2, 'offsetTop');
+    }, 'container: ' + i);
+    i++;
+  });
+  done();
+};
+</script>

tests/wpt/web-platform-tests/html/dom/elements-forms.js

@@ -27,7 +27,6 @@ var formElements = {
     accept: "string",
     alt: "string",
     autocomplete: {type: "string", customGetter: true},
-    autofocus: "boolean",
     defaultChecked: {type: "boolean", domAttrName: "checked"},
     dirName: "string",
     disabled: "boolean",
@@ -65,7 +64,6 @@ var formElements = {
     useMap: "string",
   },
   button: {
-    autofocus: "boolean",
     disabled: "boolean",
     // "formAction" has magic hard-coded in reflection.js
     formAction: "url",
@@ -79,7 +77,6 @@ var formElements = {
   },
   select: {
     autocomplete: {type: "string", customGetter: true},
-    autofocus: "boolean",
     disabled: "boolean",
     multiple: "boolean",
     name: "string",
@@ -99,7 +96,6 @@ var formElements = {
   },
   textarea: {
     autocomplete: {type: "string", customGetter: true},
-    autofocus: "boolean",
     cols: {type: "limited unsigned long with fallback", defaultVal: 20},
     dirName: "string",
     disabled: "boolean",

tests/wpt/web-platform-tests/html/dom/reflection.js

@@ -900,6 +900,7 @@ for (var element in elements) {
     ReflectionTests.reflects({type: "enum", keywords: ["ltr", "rtl", "auto"]}, "dir", element);
     ReflectionTests.reflects("string", "className", element, "class");
     ReflectionTests.reflects("tokenlist", "classList", element, "class");
+    ReflectionTests.reflects("boolean", "autofocus", element);
     ReflectionTests.reflects("boolean", "hidden", element);
     ReflectionTests.reflects("string", "accessKey", element);
     // Don't try to test the defaultVal -- it should be either 0 or -1, but the