Update web-platform-tests to revision 9a6026305062c90d84a567d81434010dde6c6c22

tests/wpt/metadata-layout-2020/2dcontext/2d.filter.value.html.ini

@@ -0,0 +1,4 @@
+[2d.filter.value.html]
+  [test if ctx.filter works correctly]
+    expected: FAIL
+

tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-003.html.ini

@@ -1,4 +1,4 @@
-[hit-test-floats-004.html]
+[hit-test-floats-003.html]
   [Miss float below something else]
     expected: FAIL
 

tests/wpt/metadata-layout-2020/css/cssom-view/elementFromPosition.html.ini

@@ -17,3 +17,6 @@
   [test the top of layer]
     expected: FAIL
 
+  [test some point of the element: top left corner]
+    expected: FAIL
+

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

@@ -2,3 +2,6 @@
   [elementsFromPoint on the root document for points in iframe elements]
     expected: FAIL
 
+  [elementsFromPoint on inner documents]
+    expected: FAIL
+

tests/wpt/metadata-layout-2020/custom-elements/customized-built-in-constructor-exceptions.html.ini

@@ -0,0 +1,2 @@
+[customized-built-in-constructor-exceptions.html]
+  expected: CRASH

tests/wpt/metadata-layout-2020/dom/nodes/ParentNode-replaceChildren.html.ini

@@ -0,0 +1,76 @@
+[ParentNode-replaceChildren.html]
+  [DocumentFragment.replaceChildren() with null as an argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with only text as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with null as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() without any argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is a host-including inclusive ancestor of parent, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is an Element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with null as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with one element and text as argument, on a parent having a child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with null as an argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with only one element as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() should move nodes in the right order]
+    expected: FAIL
+
+  [If node is a Text node and parent is a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a DocumentFragment with an element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with undefined as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is a doctype and parent is not a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a doctype and parent is a document with another doctype, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a DocumentFragment with multiple elements and parent is a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [Element.replaceChildren() with undefined as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with only one element as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with one element and text as argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() should move nodes in the right order]
+    expected: FAIL
+
+  [If node is a doctype and parent is a document with an element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [Element.replaceChildren() with only text as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() without any argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is not a DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment node, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+

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

@@ -315,18 +315,21 @@
   [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html */*;charset=gbk]
-    expected: FAIL
-
   [<iframe>: separate response Content-Type: text/plain */*]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
+  [<iframe>: combined response Content-Type: text/html;" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;" \\" text/plain]
+  [<iframe>: combined response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
+  [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
+    expected: FAIL
+
+  [<iframe>: separate response Content-Type: text/html;" text/plain]
+    expected: FAIL
+
+  [<iframe>: separate response Content-Type: text/html;x=" text/plain]
     expected: FAIL
 

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

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

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

@@ -11,6 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%0C]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
-    expected: FAIL
-

tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini

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

tests/wpt/metadata-layout-2020/html/browsers/history/the-location-interface/location-protocol-setter-non-broken.html.ini

@@ -17,9 +17,6 @@
   [Set data URL frame location.protocol to data]
     expected: FAIL
 
-  [Set data URL frame location.protocol to file]
-    expected: FAIL
-
   [Set data URL frame location.protocol to http+x]
     expected: FAIL
 

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

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

tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini

@@ -1,5 +1,4 @@
 [iframe_sandbox_popups_nonescaping-3.html]
-  expected: CRASH
   [Check that popups from a sandboxed iframe do not escape the sandbox]
-    expected: NOTRUN
+    expected: FAIL
 

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini

@@ -0,0 +1,4 @@
+[module-delayed.html]
+  [async document.write in a module]
+    expected: FAIL
+

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-dynamic-import.html.ini

@@ -0,0 +1,5 @@
+[module-dynamic-import.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-tla-delayed.html.ini

@@ -0,0 +1,5 @@
+[module-tla-delayed.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-tla-immediate-promise.html.ini

@@ -0,0 +1,5 @@
+[module-tla-immediate-promise.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-tla-import.html.ini

@@ -0,0 +1,4 @@
+[module-tla-import.html]
+  [document.write in an imported module]
+    expected: FAIL
+

tests/wpt/metadata-layout-2020/html/webappapis/dynamic-markup-insertion/document-write/module-tla-promise.html.ini

@@ -0,0 +1,5 @@
+[module-tla-promise.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata-layout-2020/html/webappapis/scripting/events/compile-event-handler-settings-objects.html.ini

@@ -4,5 +4,5 @@
     expected: TIMEOUT
 
   [The entry settings object while executing the compiled callback via Web IDL's invoke must be that of the node document]
-    expected: TIMEOUT
+    expected: FAIL
 

tests/wpt/metadata-layout-2020/webaudio/the-audio-api/the-audiobuffersourcenode-interface/audiobuffersource-multi-channels.html.ini

@@ -92,3 +92,6 @@
   [X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44050 more errors.\n\tMax AbsError of 1.9986916780471802e+0 at index of 42250.\n\t[42250\]\t9.9994289875030518e-1\t-9.9874877929687500e-1\t1.9986916780471802e+0\t2.0011956154322119e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 14112.\n\t[14112\]\t-9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
     expected: FAIL
 
+  [X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 42283 more errors.\n\tMax AbsError of 1.9962286949157715e+0 at index of 36587.\n\t[36587\]\t9.9879217147827148e-1\t-9.9743652343750000e-1\t1.9962286949157715e+0\t2.0013591321441684e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 15876.\n\t[15876\]\t5.8778524398803711e-1\t0.0000000000000000e+0\t5.8778524398803711e-1\tInfinity\t3.0517578125000000e-5\n]
+    expected: FAIL
+

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

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

tests/wpt/metadata/2dcontext/2d.filter.value.html.ini

@@ -0,0 +1,4 @@
+[2d.filter.value.html]
+  [test if ctx.filter works correctly]
+    expected: FAIL
+

tests/wpt/metadata/css/CSS2/floats/hit-test-floats-003.html.ini

@@ -1,4 +1,4 @@
-[hit-test-floats-004.html]
+[hit-test-floats-003.html]
   [Miss float below something else]
     expected: FAIL
 

tests/wpt/metadata/css/cssom-view/elementFromPosition.html.ini

@@ -21,3 +21,6 @@
   [test the top of layer]
     expected: FAIL
 
+  [test some point of the element: top left corner]
+    expected: FAIL
+

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

@@ -2,3 +2,6 @@
   [elementsFromPoint on the root document for points in iframe elements]
     expected: FAIL
 
+  [elementsFromPoint on inner documents]
+    expected: FAIL
+

tests/wpt/metadata/custom-elements/customized-built-in-constructor-exceptions.html.ini

@@ -0,0 +1,2 @@
+[customized-built-in-constructor-exceptions.html]
+  expected: CRASH

tests/wpt/metadata/dom/nodes/ParentNode-replaceChildren.html.ini

@@ -0,0 +1,76 @@
+[ParentNode-replaceChildren.html]
+  [DocumentFragment.replaceChildren() with null as an argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with only text as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with null as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() without any argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is a host-including inclusive ancestor of parent, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is an Element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with null as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with one element and text as argument, on a parent having a child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with null as an argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with only one element as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() should move nodes in the right order]
+    expected: FAIL
+
+  [If node is a Text node and parent is a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a DocumentFragment with an element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() with undefined as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is a doctype and parent is not a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a doctype and parent is a document with another doctype, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [If node is a DocumentFragment with multiple elements and parent is a document, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [Element.replaceChildren() with undefined as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with only one element as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [Element.replaceChildren() with one element and text as argument, on a parent having a child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() should move nodes in the right order]
+    expected: FAIL
+
+  [If node is a doctype and parent is a document with an element, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+
+  [Element.replaceChildren() with only text as an argument, on a parent having no child.]
+    expected: FAIL
+
+  [DocumentFragment.replaceChildren() without any argument, on a parent having no child.]
+    expected: FAIL
+
+  [If node is not a DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment node, then throw a HierarchyRequestError DOMException.]
+    expected: FAIL
+

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

@@ -315,18 +315,21 @@
   [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html */*;charset=gbk]
-    expected: FAIL
-
   [<iframe>: separate response Content-Type: text/plain */*]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
+  [<iframe>: combined response Content-Type: text/html;" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;" \\" text/plain]
+  [<iframe>: combined response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
+  [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
+    expected: FAIL
+
+  [<iframe>: separate response Content-Type: text/html;" text/plain]
+    expected: FAIL
+
+  [<iframe>: separate response Content-Type: text/html;x=" text/plain]
     expected: FAIL
 

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

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

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

@@ -11,6 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%2C%2C%40%23%24%23%25%25%26%5E%26%5E*()()11!]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
-    expected: FAIL
-

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

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

tests/wpt/metadata/html/browsers/history/the-location-interface/location-protocol-setter-non-broken.html.ini

@@ -24,9 +24,6 @@
   [Set data URL frame location.protocol to data]
     expected: FAIL
 
-  [Set data URL frame location.protocol to file]
-    expected: FAIL
-
   [Set data URL frame location.protocol to http+x]
     expected: FAIL
 

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

@@ -1,5 +1,4 @@
 [supported-elements.html]
-  expected: TIMEOUT
   [Contenteditable element should support autofocus]
     expected: FAIL
 
@@ -7,10 +6,10 @@
     expected: FAIL
 
   [Host element with delegatesFocus including no focusable descendants should be skipped]
-    expected: TIMEOUT
+    expected: FAIL
 
   [Area element should support autofocus]
-    expected: NOTRUN
+    expected: FAIL
 
   [Host element with delegatesFocus should support autofocus]
     expected: FAIL

tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini

@@ -1,6 +1,5 @@
 [iframe_sandbox_popups_nonescaping-3.html]
   type: testharness
-  expected: CRASH
   [Check that popups from a sandboxed iframe do not escape the sandbox]
-    expected: NOTRUN
+    expected: FAIL
 

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini

@@ -0,0 +1,4 @@
+[module-delayed.html]
+  [async document.write in a module]
+    expected: FAIL
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-dynamic-import.html.ini

@@ -0,0 +1,5 @@
+[module-dynamic-import.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-tla-delayed.html.ini

@@ -0,0 +1,5 @@
+[module-tla-delayed.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-tla-immediate-promise.html.ini

@@ -0,0 +1,5 @@
+[module-tla-immediate-promise.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-tla-import.html.ini

@@ -0,0 +1,4 @@
+[module-tla-import.html]
+  [document.write in an imported module]
+    expected: FAIL
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/module-tla-promise.html.ini

@@ -0,0 +1,5 @@
+[module-tla-promise.html]
+  expected: TIMEOUT
+  [document.write in an imported module]
+    expected: TIMEOUT
+

tests/wpt/metadata/html/webappapis/scripting/events/compile-event-handler-settings-objects.html.ini

@@ -5,5 +5,5 @@
     expected: TIMEOUT
 
   [The entry settings object while executing the compiled callback via Web IDL's invoke must be that of the node document]
-    expected: TIMEOUT
+    expected: FAIL
 

tests/wpt/metadata/webaudio/the-audio-api/the-audiobuffersourcenode-interface/audiobuffersource-multi-channels.html.ini

@@ -161,3 +161,6 @@
   [X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44050 more errors.\n\tMax AbsError of 1.9986916780471802e+0 at index of 42250.\n\t[42250\]\t9.9994289875030518e-1\t-9.9874877929687500e-1\t1.9986916780471802e+0\t2.0011956154322119e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 14112.\n\t[14112\]\t-9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
     expected: FAIL
 
+  [X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 42283 more errors.\n\tMax AbsError of 1.9962286949157715e+0 at index of 36587.\n\t[36587\]\t9.9879217147827148e-1\t-9.9743652343750000e-1\t1.9962286949157715e+0\t2.0013591321441684e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 15876.\n\t[15876\]\t5.8778524398803711e-1\t0.0000000000000000e+0\t5.8778524398803711e-1\tInfinity\t3.0517578125000000e-5\n]
+    expected: FAIL
+

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

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

tests/wpt/web-platform-tests/2dcontext/2d.filter.value.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /2dcontext/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.value</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/2dcontext/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/2dcontext/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.filter.value</h1>
+<p class="desc">test if ctx.filter works correctly</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("test if ctx.filter works correctly");
+_addTest(function(canvas, ctx) {
+
+_assert(ctx.filter == 'none', "ctx.filter == 'none'");
+ctx.filter = 'blur(5px)';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.save();
+ctx.filter = 'none';
+_assert(ctx.filter == 'none', "ctx.filter == 'none'");
+ctx.restore();
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+ctx.filter = 'blur(10)';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.filter = 'blur 10px';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+ctx.filter = 'inherit';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.filter = 'initial';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.filter = 'unset';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+ctx.filter = '';
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.filter = null;
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+ctx.filter = undefined;
+_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+ctx.filter = 'blur(  5px)';
+assert_equals(ctx.filter, 'blur(  5px)');
+
+
+});
+</script>
+

tests/wpt/web-platform-tests/2dcontext/tools/tests2d.yaml

@@ -10328,3 +10328,41 @@
     var rect = canvas.getBoundingClientRect();
     @assert Math.round(rect.top) === -8;
     @assert Math.round(rect.left) === 200;
+
+- name: 2d.filter.value
+  desc: test if ctx.filter works correctly
+  testing:
+    - 2d.filter.value
+  code: |
+    @assert ctx.filter == 'none';
+    ctx.filter = 'blur(5px)';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.save();
+    ctx.filter = 'none';
+    @assert ctx.filter == 'none';
+    ctx.restore();
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'blur(10)';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'blur 10px';
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'inherit';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'initial';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'unset';
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = '';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = null;
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = undefined;
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'blur(  5px)';
+    assert_equals(ctx.filter, 'blur(  5px)');
+
+

tests/wpt/web-platform-tests/content-security-policy/embedded-enforcement/subsumption_algorithm-unsafe_inline.html

@@ -69,12 +69,12 @@
         "returned_csp_1": "style-src 'unsafe-inline'",
         "returned_csp_2": null,
         "expected": IframeLoad.EXPECT_BLOCK },
-      { "name": "Returned csp whitelists a nonce.", 
+      { "name": "Returned csp allows a nonce.", 
         "required_csp": "style-src http://example1.com/foo/ 'self' 'unsafe-inline'", 
         "returned_csp_1": "style-src 'unsafe-inline' 'nonce-abc'",
         "returned_csp_2": "style-src 'nonce-abc'",
         "expected": IframeLoad.EXPECT_BLOCK },
-      { "name": "Returned csp whitelists a hash.", 
+      { "name": "Returned csp allows a hash.", 
         "required_csp": "style-src http://example1.com/foo/ 'self' 'unsafe-inline'", 
         "returned_csp_1": "style-src 'unsafe-inline' 'sha256-abc123'",
         "returned_csp_2": "style-src 'sha256-abc123'",

tests/wpt/web-platform-tests/content-security-policy/script-src/script-src-sri_hash.sub.html

@@ -49,11 +49,11 @@
             './simpleSourcedScript.js',
             'sha256-L7/UQ9VWpyG7C9RDEC4ctS5hI3Zcw+ta+haPGlByG9c= sha256-xyz',
             false ],
-          [ 'crossorigin no integrity but whitelisted host',
+          [ 'crossorigin no integrity but allowed host',
             crossorigin_base + '/content-security-policy/script-src/crossoriginScript.js',
             '',
             true ],
-          [ 'crossorigin mismatched integrity but whitelisted host',
+          [ 'crossorigin mismatched integrity but allowed host',
             crossorigin_base + '/content-security-policy/script-src/crossoriginScript.js',
             'sha256-kKJ5c48yxzaaSBupJSCmY50hkD8xbVgZgLHLtmnkeAo=',
             true ],

tests/wpt/web-platform-tests/content-security-policy/script-src/script-src-strict_dynamic_discard_source_expressions.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>Whitelists are discarded with `strict-dynamic` in the script-src directive.</title>
+    <title>Source expressions are discarded with `strict-dynamic` in the script-src directive.</title>
     <script src='/resources/testharness.js' nonce='dummy'></script>
     <script src='/resources/testharnessreport.js' nonce='dummy'></script>
 
@@ -10,22 +10,22 @@
 </head>
 
 <body>
-    <h1>Whitelists are discarded with `strict-dynamic` in the script-src directive.</h1>
+    <h1>Source expressions are discarded with `strict-dynamic` in the script-src directive.</h1>
     <div id='log'></div>
 
     <script nonce='dummy'>
         async_test(function(t) {
             window.addEventListener('message', t.step_func(function(e) {
-                if (e.data === 'whitelistedScript') {
-                    assert_unreached('Whitelisted script without a correct nonce is not allowed with `strict-dynamic`.');
+                if (e.data === 'allowedScript') {
+                    assert_unreached('Allowed scripts without a correct nonce are not permitted with `strict-dynamic`.');
                 }
             }));
             window.addEventListener('securitypolicyviolation', t.step_func_done(function(e) {
                 assert_equals(e.effectiveDirective, 'script-src-elem');
             }));
-        }, 'Whitelisted script without a correct nonce is not allowed with `strict-dynamic`.');
+        }, 'Allowed scripts without a correct nonce are not permitted with `strict-dynamic`.');
     </script>
-    <script id='whitelistedScript' src='simpleSourcedScript.js'></script>
+    <script id='allowedScript' src='simpleSourcedScript.js'></script>
 
 </body>
 

tests/wpt/web-platform-tests/content-security-policy/script-src/script-src-strict_dynamic_double_policy_honor_source_expressions.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>Whitelists in a separate policy are honored with `strict-dynamic` in the script-src directive.</title>
+    <title>Source expressions in a separate policy are honored with `strict-dynamic` in the script-src directive.</title>
     <script src='/resources/testharness.js' nonce='dummy'></script>
     <script src='/resources/testharnessreport.js' nonce='dummy'></script>
 
@@ -13,35 +13,35 @@
 </head>
 
 <body>
-    <h1>Whitelists in a separate policy are honored with `strict-dynamic` in the script-src directive.</h1>
+    <h1>Source expressions in a separate policy are honored with `strict-dynamic` in the script-src directive.</h1>
     <div id='log'></div>
 
     <script nonce='dummy'>
         async_test(function(t) {
             window.addEventListener('message', t.step_func(function(e) {
-                if (e.data === 'whitelisted-appendChild') {
+                if (e.data === 'allowed-appendChild') {
                     t.done();
                 }
             }));
             window.addEventListener('securitypolicyviolation', t.step_func(function(violation) {
-                if (violation.blockedURI.split('?')[1] !== 'whitelisted-appendChild') {
+                if (violation.blockedURI.split('?')[1] !== 'allowed-appendChild') {
                     return;
                 }
-                assert_unreached('Script injected via `appendChild` is allowed with `strict-dynamic` + a nonce+whitelist double policy.');
+                assert_unreached('Script injected via `appendChild` is permitted with `strict-dynamic` + a nonce+allowed double policy.');
             }));
 
             var e = document.createElement('script');
-            e.id = 'whitelisted-appendChild';
+            e.id = 'allowed-appendChild';
             e.src = 'simpleSourcedScript.js?' + e.id;
             e.onerror = t.unreached_func('Error should not be triggered.');
             document.body.appendChild(e);
-        }, 'Script injected via `appendChild` is allowed with `strict-dynamic` + a nonce+whitelist double policy.');
+        }, 'Script injected via `appendChild` is permitted with `strict-dynamic` + a nonce+allowed double policy.');
     </script>
 
     <script nonce='dummy'>
         async_test(function(t) {
             window.addEventListener('securitypolicyviolation', t.step_func(function(violation) {
-                if (violation.blockedURI.split('?')[1] !== 'nonWhitelisted-appendChild') {
+                if (violation.blockedURI.split('?')[1] !== 'nonAllowed-appendChild') {
                     return;
                 }
                 assert_equals(violation.effectiveDirective, 'script-src-elem');
@@ -50,11 +50,11 @@
             }));
 
             var e = document.createElement('script');
-            e.id = 'nonWhitelisted-appendChild';
+            e.id = 'nonAllowed-appendChild';
             e.src = '{{location[scheme]}}://{{domains[www2]}}:{{ports[http][0]}}/nonexisting.js?' + e.id;
             e.onload = t.unreached_func('OnLoad should not be triggered.');
             document.body.appendChild(e);
-        }, 'Non-whitelisted script injected via `appendChild` is not allowed with `strict-dynamic` + a nonce+whitelist double policy.');
+        }, 'Non-allowed script injected via `appendChild` is not permitted with `strict-dynamic` + a nonce+allowed double policy.');
     </script>
 </body>
 

tests/wpt/web-platform-tests/content-security-policy/script-src/script-src-strict_dynamic_in_img-src.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>`strict-dynamic` does not drop whitelists in `img-src`.</title>
+    <title>`strict-dynamic` does not drop allowed source expressions in `img-src`.</title>
     <script src='/resources/testharness.js' nonce='dummy'></script>
     <script src='/resources/testharnessreport.js' nonce='dummy'></script>
 
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-    <h1>`strict-dynamic` does not drop whitelists in `img-src`.</h1>
+    <h1>`strict-dynamic` does not drop allowed source expressions in `img-src`.</h1>
     <div id='log'></div>
 
     <script nonce='dummy'>
@@ -20,12 +20,12 @@
 
         async_test(function(t) {
             var e = document.createElement('img');
-            e.id = 'whitelistedImage';
+            e.id = 'allowedImage';
             e.src = '/content-security-policy/support/pass.png';
             e.onerror = t.unreached_func('Error should not be triggered.');
             e.onload = t.step_func_done();
             document.body.appendChild(e);
-        }, '`strict-dynamic` does not drop whitelists in `img-src`.');
+        }, '`strict-dynamic` does not drop allowed source expressions in `img-src`.');
     </script>
 </body>
 

tests/wpt/web-platform-tests/content-security-policy/style-src/stylenonce-allowed.sub.html

@@ -51,7 +51,7 @@
         });
 
     </script>
-    <p>Style correctly whitelisted via a 'nonce-*' expression in 'style-src' should be applied to the page.</p>
+    <p>Style correctly allowed via a 'nonce-*' expression in 'style-src' should be applied to the page.</p>
     <div id="log"></div>
 </body>
 

tests/wpt/web-platform-tests/content-security-policy/worker-src/dedicated-worker-src-child-fallback.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by child-src 'self'."></script>

tests/wpt/web-platform-tests/content-security-policy/worker-src/dedicated-worker-src-self-fallback.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by worker-src 'self'."></script>

tests/wpt/web-platform-tests/content-security-policy/worker-src/service-worker-src-child-fallback.https.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by child-src 'self'."></script>

tests/wpt/web-platform-tests/content-security-policy/worker-src/service-worker-src-self-fallback.https.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by worker-src 'self'."></script>

tests/wpt/web-platform-tests/content-security-policy/worker-src/shared-worker-src-child-fallback.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by child-src 'self'."></script>

tests/wpt/web-platform-tests/content-security-policy/worker-src/shared-worker-src-self-fallback.sub.html

@@ -4,6 +4,6 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../support/testharness-helper.js"></script>
-<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
+<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
 <meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
 <script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by worker-src 'self'."></script>

tests/wpt/web-platform-tests/cookie-store/cookieStore_set_arguments.tentative.https.any.js

@@ -156,6 +156,19 @@ promise_test(async testCase => {
   assert_equals(cookie, null);
 }, 'cookieStore.set with name and value in options and expires in the past');
 
+promise_test(async testCase => {
+  const currentUrl = new URL(self.location.href);
+  const currentDomain = currentUrl.hostname;
+
+  await promise_rejects_js(testCase, TypeError, cookieStore.set(
+      'cookie-name', 'cookie-value', { domain: `.${currentDomain}` }));
+}, 'cookieStore.set domain starts with "."');
+
+promise_test(async testCase => {
+  await promise_rejects_js(testCase, TypeError, cookieStore.set(
+      'cookie-name', 'cookie-value', { domain: 'example.com' }));
+}, 'cookieStore.set with domain that is not equal current host');
+
 promise_test(async testCase => {
   const currentUrl = new URL(self.location.href);
   const currentDomain = currentUrl.hostname;

tests/wpt/web-platform-tests/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html

@@ -0,0 +1,13 @@
+<!-- Quirks mode needed -->
+<title>CSS Flexbox: fixed positioned video in absolute positioned on quirks mode</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+<link rel="help" href="https://crbug.com/841276">
+<meta name="assert" content="This test ensures that a video works with fixed position in absolute position on quirks mode.">
+<div style="position:absolute;">
+  <div>
+    <!-- Video element may work with shadow DOM using flex for media controls.
+         This is mostly useful for browsers that use flex inside of video.-->
+    <video style="position:fixed;"></video>
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>

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

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 125px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>

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

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>

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

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-b-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row; }
+.grid { grid: 60px 60px 75px 100px / 125px; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 175px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>

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

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area:nth-child(1) { width: 70px;  }
+.area:nth-child(2) { width: 80px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left;  }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block {
+   width: 375px;
+   height: 100px;
+}
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>

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

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 100px / 70px 80px 100px 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>

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

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 125px / 60px 75px 75px 125px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
+</style>
+
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR  extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 140px; }
+.block.verticalLR, .block.verticalRL {
+   width: 140px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>

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

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 60px 60px 75px 100px / 140px; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR  extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 100px; }
+.block.verticalLR, .block.verticalRL {
+   width: 100px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>

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

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 75px 100px 125px / 100px; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>

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

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 100px; }
+.area:nth-child(4) { width: 100px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>

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

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 60px 100px 100px / 150px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>

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

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.top { vertical-align: top; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 4px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item verticalLR top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
+
+<br clear="all">
+
+<div class="block"><div class="item">É</div><div class="item verticalRL top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>

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

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+
+<br clear="all">
+
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>

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

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.top { vertical-align: top; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div></div>
+<div class="block" ><div class="item verticalLR extraTopPadding top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR extraBottomPadding top">É</div><div class="item verticalLR top">É</div></div>
+<div class="block"><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div></div>
+<div class="block" ><div class="item verticalRL extraTopPadding top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL extraBottomPadding top">É</div><div class="item verticalRL top">É</div></div>

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

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR extraBottomPadding">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL extraBottomPadding">É</div>
+    <div class="item verticalRL">É</div>
+</div>

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline; }
+.left { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>

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

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.column { grid-auto-flow: row; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item">É</div>
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   position: relative;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.inline { display: inline-block; }
+.item { display: inline-block; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalLR extraRightPadding ">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item verticalRL extraRightPadding ">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>

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

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item bottom horizontalTB">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item bottom horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>

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

@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { float: left; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>

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

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>