Update web-platform-tests to revision 1e4fe87a7f01c0b5c614c8f601ffa68b4a00662a

tests/wpt/metadata/css/css-backgrounds/background-331.html.ini

@@ -3,9 +3,6 @@
   [background_initial_size]
     expected: FAIL
 
-  [background_initial_color]
-    expected: FAIL
-
   [background_initial_position]
     expected: FAIL
 

tests/wpt/metadata/css/css-backgrounds/background-332.html.ini

@@ -12,6 +12,3 @@
   [background_specified_repeat]
     expected: FAIL
 
-  [background_specified_color]
-    expected: FAIL
-

tests/wpt/metadata/css/css-backgrounds/background-333.html.ini

@@ -3,9 +3,6 @@
   [background_specified_color_size]
     expected: FAIL
 
-  [background_specified_color_color]
-    expected: FAIL
-
   [background_specified_color_position]
     expected: FAIL
 

tests/wpt/metadata/css/css-fonts/font-variation-settings-serialization-001.html.ini

@@ -0,0 +1,4 @@
+[font-variation-settings-serialization-001.html]
+  [font-feature-settings should be serialized to not include duplicates]
+    expected: FAIL
+

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

@@ -71,3 +71,21 @@
   [Animation between "none" and "none" at progress 2]
     expected: FAIL
 
+  [Animation between "26 17 9" and "2 1" at progress -1]
+    expected: FAIL
+
+  [Animation between "26 17 9" and "2 1" at progress 0]
+    expected: FAIL
+
+  [Animation between "26 17 9" and "2 1" at progress 0.125]
+    expected: FAIL
+
+  [Animation between "26 17 9" and "2 1" at progress 0.875]
+    expected: FAIL
+
+  [Animation between "26 17 9" and "2 1" at progress 1]
+    expected: FAIL
+
+  [Animation between "26 17 9" and "2 1" at progress 2]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/css-transform-property-existence.html.ini

@@ -1,8 +1,5 @@
 [css-transform-property-existence.html]
   type: testharness
-  [Check the existence of transform.]
-    expected: FAIL
-
   [Check the existence of transform-origin.]
     expected: FAIL
 

tests/wpt/metadata/css/css-transforms/parsing/rotate-parsing-valid.html.ini

@@ -0,0 +1,22 @@
+[rotate-parsing-valid.html]
+  [e.style['rotate'\] = "400grad 100 200 300" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "x 400grad" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "400grad x" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "y 400grad" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "400grad y" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "z 400grad" should set the property value]
+    expected: FAIL
+
+  [e.style['rotate'\] = "400grad z" should set the property value]
+    expected: FAIL
+

tests/wpt/metadata/css/css-transforms/translate-getComputedStyle.html.ini

@@ -0,0 +1,4 @@
+[translate-getComputedStyle.html]
+  [computed style for translate]
+    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/css/cssom/css-style-attr-decl-block.html.ini

@@ -0,0 +1,7 @@
+[css-style-attr-decl-block.html]
+  [Changes to CSS declaration block should queue mutation record for style attribute]
+    expected: FAIL
+
+  [Removing non-existing property or setting invalid value on CSS declaration block shouldn't queue mutation record]
+    expected: FAIL
+

tests/wpt/metadata/css/cssom/cssimportrule.html.ini

@@ -15,3 +15,12 @@
   [MediaList mediaText attribute should be updated]
     expected: FAIL
 
+  [CSSImportRule : MediaList mediaText attribute should be updated due to [PutForwards\]]
+    expected: FAIL
+
+  [CSSStyleDeclaration cssText attribute should be updated due to [PutForwards\]]
+    expected: FAIL
+
+  [StyleSheet : MediaList mediaText attribute should be updated due to [PutForwards\]]
+    expected: FAIL
+

tests/wpt/metadata/css/cssom/selectorText-modification-restyle-002.html.ini

@@ -0,0 +1,4 @@
+[selectorText-modification-restyle-002.html]
+  [CSSOM: Modify selectorText in a shadow tree stylesheet]
+    expected: FAIL
+

tests/wpt/metadata/custom-elements/Document-createElement.html.ini

@@ -2,3 +2,6 @@
   [document.createElement with unknown "is" value should create "undefined" state element]
     expected: FAIL
 
+  [document.createElement must create an instance of autonomous custom elements when it has is attribute]
+    expected: FAIL
+

tests/wpt/metadata/custom-elements/upgrading/Document-importNode.html.ini

@@ -0,0 +1,4 @@
+[Document-importNode.html]
+  [built-in: document.importNode() should import "undefined" custom elements successfully]
+    expected: FAIL
+

tests/wpt/metadata/custom-elements/upgrading/Node-cloneNode.html.ini

@@ -0,0 +1,4 @@
+[Node-cloneNode.html]
+  [Node.prototype.cloneNode(false) must be able to clone as a customized built-in element when it has an inconsistent "is" attribute]
+    expected: FAIL
+

tests/wpt/metadata/domparsing/XMLSerializer-serializeToString.html.ini

@@ -12,3 +12,6 @@
   [Check if there is no redundant empty namespace declaration.]
     expected: FAIL
 
+  [check XMLSerializer.serializeToString escapes attribute values for roundtripping]
+    expected: FAIL
+

tests/wpt/metadata/html/dom/documents/dom-tree-accessors/Document.body.html.ini

@@ -0,0 +1,4 @@
+[Document.body.html]
+  [Setting document.body to a new body element when the root element is a test element.]
+    expected: FAIL
+

tests/wpt/metadata/html/infrastructure/common-dom-interfaces/collections/historical.html.ini

@@ -0,0 +1,4 @@
+[historical.html]
+  [HTMLAllCollection legacycaller with two arguments should not be supported]
+    expected: FAIL
+

tests/wpt/metadata/html/obsolete/requirements-for-implementations/other-elements-attributes-and-apis/document-color-01.html.ini

@@ -9,3 +9,15 @@
   [setting document color attributes with no body]
     expected: FAIL
 
+  [document color attributes when the root element is a test element (iframe)]
+    expected: FAIL
+
+  [document color attributes when the root element is a test element (createHTMLDocument)]
+    expected: FAIL
+
+  [getting document color attributes when document.body is a frameset]
+    expected: FAIL
+
+  [setting document color attributes when document.body is a frameset]
+    expected: FAIL
+

tests/wpt/metadata/innerText/getter.html.ini

@@ -239,3 +239,6 @@
   [<video> contents ignored ("<div><video>abc")]
     expected: FAIL
 
+  [innerText getter test]
+    expected: FAIL
+

tests/wpt/metadata/xhr/xmlhttprequest-sync-default-feature-policy.sub.html.ini

@@ -1,5 +1,5 @@
 [xmlhttprequest-sync-default-feature-policy.sub.html]
-  expected: TIMEOUT
+  expected: ERROR
   [Default "sync-xhr" feature policy ["*"\] allows same-origin iframes.]
     expected: TIMEOUT
 

tests/wpt/web-platform-tests/README.md

@@ -32,17 +32,22 @@ your `%Path%` [Environment Variable](http://www.computerhope.com/issues/ch000549
 and read the [Windows Notes](#windows-notes) section below.
 
 To get the tests running, you need to set up the test domains in your
-[`hosts` file](http://en.wikipedia.org/wiki/Hosts_%28file%29%23Location_in_the_file_system). The
+[`hosts` file](http://en.wikipedia.org/wiki/Hosts_%28file%29%23Location_in_the_file_system).
-following entries are required:
 
+The necessary content can be generated with `./wpt make-hosts-file`; on
+Windows, you will need to preceed the prior command with `python` or
+the path to the Python binary (`python wpt make-hosts-file`).
+
+For example, on most UNIX-like systems, you can setup the hosts file with:
+
+```bash
+./wpt make-hosts-file | sudo tee -a /etc/hosts
 ```
-127.0.0.1   web-platform.test
+
-127.0.0.1   www.web-platform.test
+And on Windows (note this requires an Administrator privileged shell):
-127.0.0.1   www1.web-platform.test
+
-127.0.0.1   www2.web-platform.test
+```bash
-127.0.0.1   xn--n8j6ds53lwwkrqhv28a.web-platform.test
+python wpt make-hosts-file >> %SystemRoot%\System32\drivers\etc\hosts
-127.0.0.1   xn--lve-6lad.web-platform.test
-0.0.0.0     nonexistent-origin.web-platform.test
 ```
 
 If you are behind a proxy, you also need to make sure the domains above are

tests/wpt/web-platform-tests/console/console-format-specifier-symbol-manual.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Console Format Specifiers on Symbols</title>
+<meta name="author" title="Dominic Farolino" href="mailto:domfarolino@gmail.com">
+<meta name="assert" content="Console format specifiers on Symbols">
+<link rel="help" href="https://console.spec.whatwg.org/#formatter">
+</head>
+<body>
+<p>Open the console inside the developer tools. It should contain five lines, each of which are:</p>
+<p><code>Symbol(description)</code></p>
+
+<script>
+console.log("%s", Symbol.for("description"));
+console.dirxml("%s", Symbol.for("description"));
+console.trace("%s", Symbol.for("description"));
+console.group("%s", Symbol.for("description"));
+console.groupCollapsed("%s", Symbol.for("description"));
+</script>
+</body>
+</html>

tests/wpt/web-platform-tests/cookie-store/cookie-store.idl

@@ -0,0 +1,56 @@
+// https://github.com/WICG/cookie-store/blob/gh-pages/explainer.md
+
+dictionary CookieListItem {
+  USVString name;
+  USVString value;
+};
+
+typedef sequence<CookieListItem> CookieList;
+
+[
+  Exposed=(ServiceWorker,Window)
+] interface CookieStore {
+  Promise<CookieList?> getAll(USVString name, optional CookieStoreGetOptions options);
+  Promise<CookieList?> getAll(optional CookieStoreGetOptions options);
+
+  Promise<CookieListItem?> get(USVString name, optional CookieStoreGetOptions options);
+  Promise<CookieListItem?> get(optional CookieStoreGetOptions options);
+
+  Promise<boolean> has(USVString name, optional CookieStoreGetOptions options);
+  Promise<boolean> has(optional CookieStoreGetOptions options);
+
+  Promise<void> set(USVString name, USVString value, optional CookieStoreSetOptions options);
+  Promise<void> set(CookieStoreSetOptions options);
+
+  Promise<void> delete(USVString name, optional CookieStoreSetOptions options);
+  Promise<void> delete(CookieStoreSetOptions options);
+};
+
+enum CookieMatchType {
+  "equals",
+  "startsWith"
+};
+
+dictionary CookieStoreGetOptions {
+  USVString name;
+  USVString url;
+  CookieMatchType matchType = "equals";
+};
+
+dictionary CookieStoreSetOptions {
+  USVString name;
+  USVString value;
+  DOMTimeStamp? expires = null;
+  USVString domain;
+  USVString path = "/";
+  boolean? secure;
+  boolean httpOnly = false;
+};
+
+partial interface Window {
+  [Replaceable, SameObject] readonly attribute CookieStore cookieStore;
+};
+
+partial interface ServiceWorkerGlobalScope {
+  [Replaceable, SameObject] readonly attribute CookieStore cookieStore;
+};

tests/wpt/web-platform-tests/cookie-store/idlharness.tentative.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Async Cookies: IDL tests</title>
+<link rel="help" href="https://github.com/WICG/cookie-store"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+<script>
+'use strict';
+
+promise_test(async t => {
+  const urls = ['/interfaces/html.idl', 'cookie-store.idl'];
+  const [html, cookie_store] = await Promise.all(
+    urls.map(url => fetch(url).then(response => response.text())));
+
+  const idl_array = new IdlArray();
+
+  // Dependencies of HTML
+  idl_array.add_untested_idls('interface Document {};');
+  idl_array.add_untested_idls('interface LinkStyle {};');
+  idl_array.add_untested_idls(html);
+
+  idl_array.add_untested_idls(
+    `[Global=ServiceWorker, Exposed=ServiceWorker]
+     interface ServiceWorkerGlobalScope {};`);
+
+  idl_array.add_idls(cookie_store);
+
+  idl_array.add_objects({
+    CookieStore: [self.cookieStore],
+  });
+  idl_array.test();
+}, 'Interface test');
+</script>

tests/wpt/web-platform-tests/cookie-store/idlharness_serviceworker.js

@@ -0,0 +1,31 @@
+self.GLOBAL = {
+  isWindow: function() { return false; },
+  isWorker: function() { return true; },
+};
+importScripts('/resources/testharness.js',
+              '/resources/WebIDLParser.js',
+              '/resources/idlharness.js');
+
+promise_test(async t => {
+  const urls = ['cookie-store.idl'];
+  const [cookie_store] = await Promise.all(
+    urls.map(url => fetch(url).then(response => response.text())));
+
+  const idl_array = new IdlArray();
+
+  idl_array.add_untested_idls(
+    `[Global=ServiceWorker, Exposed=ServiceWorker]
+     interface ServiceWorkerGlobalScope {};`);
+  idl_array.add_untested_idls(
+    `[Global=Window, Exposed=Window]
+     interface Window {};`);
+
+  idl_array.add_idls(cookie_store);
+
+  idl_array.add_objects({
+    CookieStore: [self.cookieStore],
+  });
+  idl_array.test();
+}, 'Interface test');
+
+done();

tests/wpt/web-platform-tests/cookie-store/idlharness_serviceworker.tentative.https.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Async Cookies: ServiceWorker IDL tests</title>
+<link rel="help" href="https://github.com/WICG/cookie-store">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+'use strict';
+
+(async () => {
+  const scope = 'does/not/exist';
+
+  let registration = await navigator.serviceWorker.getRegistration(scope);
+  if (registration)
+    await registration.unregister();
+  registration = await navigator.serviceWorker.register(
+      'idlharness_serviceworker.js', {scope});
+
+  fetch_tests_from_worker(registration.installing);
+})();
+</script>

tests/wpt/web-platform-tests/css/CSS2/floats/intrinsic-size-float-and-line.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>Put float next to line in shrink-to-fit container</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="float:left; min-width:150px; background:red;">
+  <div style="float:right; width:100px; height:200px; background:green;"></div>
+  <div style="vertical-align:top; display:inline-block; width:100px; height:200px; background:green;"></div>
+</div>

tests/wpt/web-platform-tests/css/CSS2/visudet/reference/content-height-005-ref.html

@@ -2,6 +2,7 @@
 <meta charset="utf-8">
 <title>CSS Test Reference file</title>
 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
 
 div {
   font-size: 50px;

tests/wpt/web-platform-tests/css/css-backgrounds/background-331.html

@@ -57,7 +57,7 @@
 
         test(function() {
             assert_equals(cs.getPropertyValue("background-color"),
-                "transparent", "background initial value for background-color");
+                "rgba(0, 0, 0, 0)", "background initial value for background-color");
         }, "background_initial_color");
     </script>
   </body>

tests/wpt/web-platform-tests/css/css-backgrounds/background-332.html

@@ -57,7 +57,7 @@
 
         test(function() {
             assert_equals(cs.getPropertyValue("background-color"),
-                "gray", "background specified value for background-color");
+                "rgb(128, 128, 128)", "background specified value for background-color");
         }, "background_specified_color");
     </script>
   </body>

tests/wpt/web-platform-tests/css/css-backgrounds/background-333.html

@@ -57,7 +57,7 @@
 
         test(function() {
             assert_equals(cs.getPropertyValue("background-color"),
-                "red", "background specified value for background-color");
+                "rgb(255, 0, 0)", "background specified value for background-color");
         }, "background_specified_color_color");
     </script>
   </body>

tests/wpt/web-platform-tests/css/css-backgrounds/box-shadow-syntax-001.xht

@@ -21,7 +21,7 @@
     }
     .inset {
       color: green;
-      height: 13px;
+      height: 12px;
       margin: -1px 0 -4px -4px;
     }
 

tests/wpt/web-platform-tests/css/css-backgrounds/reference/box-shadow-syntax-001.xht

@@ -10,6 +10,7 @@
       border: solid green 4px;
       padding-top: 1px;
       border-style: none none solid solid;
+      height: 7px;
     }
   </style>
  </head>

tests/wpt/web-platform-tests/css/css-fonts/font-variation-settings-serialization-001.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>CSS Test: font-feature-settings serialization</title>
+        <link rel="author" title="Greg Whitworth" href="mailto:gwhit@microsoft.com">
+        <link rel="help" href="http://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings">
+        <link rel="issue" href="https://github.com/w3c/csswg-drafts/issues/1959#issuecomment-360864254">
+        <meta name="desctiption" content="It was decided in issue 1959 that font-variation-settings is a map, therefor duplicates should be removed">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+    </head>
+    <body>
+        <div id="test1" style='font-variation-settings: "bldA" 1, "bldA" 2'></div>
+
+        <script>
+            const test1_canEqual = ['"bldA" 2', "'bldA' 2"];
+            test(function() {
+                assert_in_array(getComputedStyle(document.getElementById('test1')).fontVariationSettings, test1_canEqual);
+            }, "font-feature-settings should be serialized to not include duplicates");
+        </script>
+    </body>
+</html>
+

tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html

@@ -135,3 +135,217 @@
   <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
   <div data-expected-width="25"></div>
 </div>
+
+<h3>grid content writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html

@@ -32,7 +32,7 @@
 
 <div id="log"></div>
 
-<h3>writing-mode: vertical-lr;</h3>
+<h3>item writing-mode: vertical-lr;</h3>
 
 <pre>grid-template-rows: auto;</pre>
 
@@ -139,7 +139,7 @@
   <div data-expected-height="25"></div>
 </div>
 
-<h3>writing-mode: vertical-rl;</h3>
+<h3>item writing-mode: vertical-rl;</h3>
 
 <pre>grid-template-rows: auto;</pre>
 
@@ -246,3 +246,216 @@
   <div data-expected-height="25"></div>
 </div>
 
+<h3>grid container writing-mode: vertical-lr; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 25px;">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-rl; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 25px;">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-rows: 25px 25px;
+}
+
+.grid > div {
+  grid-column: span 2;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid" style="grid-template-columns: auto auto;">
+  <div data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-columns: 0px 0px;">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-columns: 20px 20px;">
+  <div data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: auto auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 0px 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 20px 20px;">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: auto auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 0px 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 20px 20px;">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>

tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html

@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes and spaning items.">
+<link rel="stylesheet" href="../support/grid.css">
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-columns: 25px 25px;
+  margin: 50px 0px;
+}
+
+.grid > div {
+  grid-row: span 2;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>item writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+  <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px 0px;">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-rows: 20px 20px;">
+  <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>item writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+  <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px 0px;">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-rows: 20px 20px;">
+  <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-lr; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: auto auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 0px 0px;">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 20px 20px;">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-rl; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: auto auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 0px 0px;">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 20px 20px;">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>

tests/wpt/web-platform-tests/css/css-layout-api/box-tree-registered-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.container {
+  margin: 20px 0;
+  border: solid 2px;
+  width: 100px;
+}
+
+.pink {
+  background: hotpink;
+}
+</style>
+
+<div class="container">
+  <div class="pink" style="width: 50px; height: 100px;"></div>
+</div>
+
+<div class="container">
+  <div class="pink" style="width: 100px; height: 100px;"></div>
+</div>

tests/wpt/web-platform-tests/css/css-layout-api/box-tree-registered.https.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree">
+<link rel="match" href="box-tree-registered-ref.html">
+<meta name="assert" content="This test checks that a registered layout() has children which are blockified and new formatting contexts." />
+<style>
+@supports (display: layout(registered)) {
+  .test {
+    display: layout(registered);
+  }
+}
+
+.container {
+  margin: 20px 0;
+  border: solid 2px;
+  width: 100px;
+}
+
+.float {
+  float: left;
+  width: 50%;
+  height: 50px;
+}
+
+.pink {
+  background: hotpink;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="container">
+  <!-- This tests that the "layout()" grandchildren floats within the don't interact with each other. -->
+  <div class="test">
+    <div class="inflow">
+      <div class="float pink"></div>
+    </div>
+    <div class="inflow">
+      <div class="float pink"></div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <!-- This tests that the "layout()" children margins interact as if they are new formatting contexts. -->
+  <div class="test">
+    <div class="inflow pink">
+      <div style="margin-bottom: 50px;"></div>
+    </div>
+    <div class="inflow pink">
+      <div style="margin-top: 50px;"></div>
+    </div>
+  </div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('registered', class {
+  *intrinsicSizes() {}
+  *layout() {}
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>

tests/wpt/web-platform-tests/css/css-layout-api/box-tree-unregistered-ref.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+.container {
+  margin: 20px 0;
+  border: solid 2px;
+  width: 100px;
+}
+
+.inflow {
+  height: 40px;
+}
+</style>
+
+<div class="container">
+  <div class="inflow"></div>
+  <div class="inflow" style="background: hotpink"></div>
+  <div class="inflow"></div>
+</div>
+
+<div class="container">
+  <div class="inflow"></div>
+  <div class="inflow" style="background: hotpink"></div>
+  <div class="inflow"></div>
+</div>
+
+<div class="container">
+  <div class="inflow" style="background: hotpink"></div>
+  <div class="inflow" style="background: green"></div>
+</div>

tests/wpt/web-platform-tests/css/css-layout-api/box-tree-unregistered.https.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree">
+<link rel="match" href="box-tree-unregistered-ref.html">
+<meta name="assert" content="This test checks that an unregistered layout() works the same as a normal flow-root." />
+<style>
+@supports (display: layout(unregistered)) {
+  .test {
+    display: layout(unregistered);
+  }
+}
+
+.container {
+  margin: 20px 0;
+  border: solid 2px;
+  width: 100px;
+}
+
+.float {
+  float: left;
+  width: 100%;
+  height: 40px;
+  background: hotpink;
+}
+
+.inflow {
+  height: 40px;
+  background: hotpink;
+}
+</style>
+
+<div class="container">
+  <!-- This tests that the "layout()" margins don't collapse with its children. -->
+  <div class="test" style="margin: 20px 0">
+    <div class="inflow" style="margin: 20px 0"></div>
+  </div>
+</div>
+
+<div class="container">
+  <!-- This tests that the "layout()" grows to fit child floats. -->
+  <div class="test">
+    <div class="float" style="margin: 40px 0"></div>
+  </div>
+</div>
+
+<div class="container">
+  <!-- This tests that a float does not intrude into "layout()" box. -->
+  <div class="float"></div>
+  <div class="test" style="width: 100%; height: 40px; background: green;"></div>
+</div>

tests/wpt/web-platform-tests/css/css-scoping/slotted-link.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Scoping: ::slotted :link</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host"><a id="a" href="#notvisited">This link should be green.</a></div>
+<script>
+  let root = host.attachShadow({mode:"open"});
+  root.innerHTML = `
+  <style>
+    ::slotted(:link) { color:green }
+    ::slotted(:visited) { color:red }
+  </style>
+  <slot></slot>`;
+
+  test(() => {
+    assert_equals(getComputedStyle(a).color, "rgb(0, 128, 0)", "Unvisited link should be green.");
+  }, "Check that we match :link and not :visited for slotted anchor.");
+</script>

tests/wpt/web-platform-tests/css/css-tables/internal-containing-block-001.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos-boxes-in-table-internal">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#valdef-position-absolute">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=798164" />
+<meta name="flags" content="" />
+<meta name="assert" content="A table-row with position:relative establishes a
+containing block for a position:absolute descendent of a table-cell, and the
+descendent is positioned correctly." />
+<title>
+relpos table-row establishes containing block for abspos
+</title>
+
+<style>
+tr {
+  position: relative;
+}
+
+div.abspos {
+  position: absolute;
+  height: 50px;
+  width: 100px;
+  background: green;
+}
+
+div.static {
+  height: 50px;
+  width: 100px;
+  background:red;
+}
+
+td, tr {
+  margin:0px;
+  padding:0px;
+}
+
+table {
+  border-collapse:collapse;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<table>
+  <tr>
+    <td>
+      <div class="abspos"></div>
+      <div class="static"></div>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <div class="abspos"></div>
+      <div class="static"></div>
+    </td>
+  </tr>
+</table>

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

@@ -28,13 +28,13 @@
       test_interpolation({
         property: 'scale',
         from: '26 17 9',
-        to: '2',
+        to: '2 1',
       }, [
         {at: -1, expect: '50 33 17'},
         {at: 0, expect: '26 17 9'},
         {at: 0.125, expect: '23 15 8'},
         {at: 0.875, expect: '5 3 2'},
-        {at: 1, expect: '2'},
+        {at: 1, expect: '2 1'},
         {at: 2, expect: '-22 -15 -7'}
       ]);
 

tests/wpt/web-platform-tests/css/css-transforms/css-transform-property-existence.html

@@ -14,7 +14,7 @@
     <div id="log"></div>
     <script>
       test(function() {
-        assert_not_equals(document.getElementById("test").style.transfor, undefined, "expect transform is not undefined");
+        assert_not_equals(document.getElementById("test").style.transform, undefined, "expect transform is not undefined");
       }, "Check the existence of transform.");
 
       test(function() {

tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1-ref.html

@@ -24,7 +24,7 @@
         left: 100px;
         width: 50px;
         height: 100px;
-        transform: scaleX(2);
+        transform: scale(2, 2);
       }
       .translate_1 {
         left: 150px;

tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-invalid.html

@@ -17,6 +17,12 @@ test_invalid_value("rotate", "100px");
 test_invalid_value("rotate", "100 400deg");
 test_invalid_value("rotate", "100 200 400deg");
 test_invalid_value("rotate", "100 200 300 500 400deg");
+
+test_invalid_value("rotate", "x y 45deg");
+test_invalid_value("rotate", "45deg x y");
+test_invalid_value("rotate", "z");
+test_invalid_value("rotate", "1 2");
+test_invalid_value("rotate", "1 2 3");
 </script>
 </body>
 </html>

tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html

@@ -17,6 +17,16 @@ test_valid_value("rotate", "none");
 test_valid_value("rotate", "0deg");
 
 test_valid_value("rotate", "100 200 300 400grad");
+test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad");
+
+test_valid_value("rotate", "x 400grad", "1 0 0 400grad");
+test_valid_value("rotate", "400grad x", "1 0 0 400grad");
+
+test_valid_value("rotate", "y 400grad", "0 1 0 400grad");
+test_valid_value("rotate", "400grad y", "0 1 0 400grad");
+
+test_valid_value("rotate", "z 400grad", "0 0 1 400grad");
+test_valid_value("rotate", "400grad z", "0 0 1 400grad");
 </script>
 </body>
 </html>

tests/wpt/web-platform-tests/css/css-transforms/transforms-support-calc.html

@@ -31,7 +31,7 @@
 
 test(function(){
   target.style = 'translate: calc(30px + 20%) calc(-200px + 100%);';
-  assert_equals(getComputedStyle(target).translate, '90px 0px');
+  assert_equals(getComputedStyle(target).translate, 'calc(30px + 20%) calc(-200px + 100%)');
 }, 'translate supports calc');
 
 test(function(){

tests/wpt/web-platform-tests/css/css-transforms/translate-getComputedStyle.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Transform Module Level 2: translate getComputedStyle</title>
+  <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
+  <meta name="assert" content="translate computed style does not resolve percentages.">
+  <style type="text/css">
+    #container {
+      transform-style: preserve-3d;;
+    }
+    #first {
+      font-size: 10px;
+      translate: 10px 2em;
+    }
+    #second {
+      translate: 30% 40% 50px;
+    }
+    #third {
+      font-size: 10px;
+      width: 98px;
+      height: 76px;
+      translate: calc(7em + 80%) -9em;
+    }
+  </style>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="container">
+    <div id="first"></div>
+    <div id="second"></div>
+    <div id="third"></div>
+  </div>
+  <script>
+    'use strict';
+    function getTranslateFor(id) {
+      return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate");
+    }
+
+    test(function() {
+      assert_equals(getTranslateFor("first"), "10px 20px");
+      assert_equals(getTranslateFor("second"), "30% 40% 50px");
+      assert_equals(getTranslateFor("third"), "calc(70px + 80%) -90px");
+    }, "computed style for translate");
+  </script>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-typed-om/resources/testhelper.js

@@ -57,6 +57,9 @@ function assert_style_value_equals(a, b) {
     case 'CSSSkewX':
       assert_style_value_equals(a.ax, b.ax);
       break;
+    case 'CSSSkewY':
+      assert_style_value_equals(a.ay, b.ay);
+      break;
     case 'CSSPerspective':
       assert_style_value_equals(a.length, b.length);
       break;

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-normalization/transformvalue-normalization.tentative.html

@@ -140,7 +140,7 @@ const gTestCases = [
   },
   {
     cssText: 'skewY(90deg)',
-    expected: new CSSSkew(CSS.deg(0), CSS.deg(90)),
+    expected: new CSSSkewY(CSS.deg(90)),
     desc: 'skewY()'
   },
   {
@@ -158,13 +158,14 @@ for (const {cssText, expected, desc} of gTestCases) {
 
 test(t => {
   test_transform_normalization(t,
-      'translate(1px) rotateX(90deg) perspective(1px) skew(90deg) skewX(20deg) scale3d(1, 2, 3)',
+      'translate(1px) rotateX(90deg) perspective(1px) skew(90deg) skewX(20deg) skewY(30deg) scale3d(1, 2, 3)',
       new CSSTransformValue([
         new CSSTranslate(CSS.px(1), CSS.px(0)),
         new CSSRotate(CSS.number(1), CSS.number(0), CSS.number(0), CSS.deg(90)),
         new CSSPerspective(CSS.px(1)),
         new CSSSkew(CSS.deg(90), CSS.deg(0)),
         new CSSSkewX(CSS.deg(20)),
+        new CSSSkewY(CSS.deg(30)),
         new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)),
       ]));
 }, 'Normalizing a <transform-list> returns a CSSTransformValue containing all the transforms');

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html

@@ -54,6 +54,11 @@ const gTestCases = [
     cssText: 'skewX(90deg)',
     desc: 'CSSSkewX'
   },
+  {
+    value: new CSSSkewY(CSS.deg(90)),
+    cssText: 'skewY(90deg)',
+    desc: 'CSSSkewY'
+  },
   {
     value: new CSSPerspective(CSS.px(1)),
     cssText: 'perspective(1px)',

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssSkewY.tentative.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSSkewY tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssskewy">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gInvalidTestCases = [
+  { value: 'auto', desc: 'a keyword'},
+  { value: 3.14, desc: 'a double'},
+  { value: 0, desc: 'a unitless zero'},
+  { value: '10deg', desc: 'a string angle'},
+  { value: CSS.number(10), desc: 'a number CSSUnitValue'},
+  { value: CSS.s(10), desc: 'a time dimension CSSUnitValue'},
+  { value: new CSSMathSum(CSS.px(1)), desc: 'a CSSMathValue of length type' },
+];
+
+for (const {value, desc} of gInvalidTestCases) {
+  test(() => {
+    assert_throws(new TypeError(), () => new CSSSkewY(value));
+  }, 'Constructing a CSSSkewY with ' + desc + ' throws a TypeError');
+}
+
+for (const {value, desc} of gInvalidTestCases) {
+  test(() => {
+    let skewY = new CSSSkewY(CSS.deg(0));
+    assert_throws(new TypeError(), () => skewY.ay = value);
+    assert_style_value_equals(skewY.ay, CSS.deg(0));
+  }, 'Updating CSSSkewY.ay with ' + desc + ' throws a TypeError');
+}
+
+const gValidTestCases = [
+  { value: CSS.deg(-3.14), desc: 'an angle CSSUnitValue' },
+  { value: new CSSMathSum(CSS.deg(1)), desc: 'a CSSMathValue of angle type' },
+];
+
+for (const {value: ay, desc: ayDesc} of gValidTestCases) {
+  test(() => {
+    const skewY = new CSSSkewY(ay);
+    assert_equals(skewY.ay, ay);
+    assert_true(skewY.is2D);
+  }, 'CSSSkewY can be constructed from ' + ayDesc);
+}
+
+for (const {value, desc} of gValidTestCases) {
+  test(() => {
+    let skewY = new CSSSkewY(CSS.deg(0));
+    skewY.ay = value;
+    assert_style_value_equals(skewY.ay, value);
+  }, 'CSSSkewY.ay can be updated to ' + desc);
+}
+
+test(() => {
+  let skewY = new CSSSkewY(CSS.deg(0));
+  skewY.is2D = false;
+  assert_true(skewY.is2D);
+}, 'Modifying skewY.is2D is a no-op');
+
+</script>

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformComponent.toMatrix with Relative Units</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformComponent.toMatrix throws when given relative units" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+test(() => {
+  assert_throws(new TypeError(), () => {
+    return new CSSTranslate(
+      new CSSUnitValue(1, 'px'),
+      new CSSUnitValue(1, 'em')
+    ).toMatrix();
+  });
+}, 'CSSTranslate.toMatrix() containing relative units throws TypeError');
+
+test(() => {
+  assert_throws(new TypeError(), () => {
+    return new CSSPerspective(new CSSUnitValue(1, 'em')).toMatrix();
+  });
+}, 'CSSPerspective.toMatrix() containing relative units throws TypeError');
+
+</script>

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformComponent.toMatrix tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformComponent.toMatrix for each type of component" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gEpsilon = 1e-6;
+
+test(() => {
+  const component = new CSSTranslate(
+    new CSSUnitValue(1, 'px'),
+    new CSSUnitValue(2, 'px'),
+    new CSSUnitValue(3, 'px')
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, 1e-8);
+}, 'CSSTranslate.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSRotate(
+    new CSSUnitValue(1, 'number'),
+    new CSSUnitValue(2, 'number'),
+    new CSSUnitValue(3, 'number'),
+    new CSSUnitValue(90, 'deg')
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).rotateAxisAngle(1, 2, 3, 90);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSRotate.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSScale(1, 2, 3);
+  const expectedMatrix = (new DOMMatrixReadOnly()).scale(1, 2, 3);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSScale.toMatrix() returns correct matrix');
+
+test(() => {
+  const alpha = 10, beta = 20;
+  const component = new CSSSkew(
+    new CSSUnitValue(alpha, 'rad'),
+    new CSSUnitValue(beta, 'rad')
+  );
+  const expectedMatrix = new DOMMatrixReadOnly(
+        [1, Math.tan(beta), 0, 0, Math.tan(alpha), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkew.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSSkewX(
+    new CSSUnitValue(10, 'rad'),
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).skewX(10);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkewX.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSSkewY(
+    new CSSUnitValue(10, 'rad'),
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).skewY(10);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkewY.toMatrix() returns correct matrix');
+
+test(() => {
+  const length = 10;
+  const component = new CSSPerspective(new CSSUnitValue(length, 'px'));
+  const expectedMatrix = new DOMMatrixReadOnly(
+        [1, 0, 0, 0,
+         0, 1, 0, 0,
+         0, 0, 1, -1/length,
+         0, 0, 0, 1]);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSPerspective.toMatrix() returns correct matrix');
+
+test(() => {
+  const matrix = new DOMMatrixReadOnly(
+          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+  const component = new CSSMatrixComponent(matrix);
+  assert_matrix_approx_equals(component.toMatrix(), matrix, gEpsilon);
+}, 'CSSMatrixComponent.toMatrix() returns correct matrix');
+
+</script>

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformValue.toMatrix</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformValue.toMatrix multiplies component matrices" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gEpsilon = 1e-6;
+
+test(() => {
+  const transformMatrix = new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1]);
+  const transformArray = [
+    new CSSScale(2, 2),
+    new CSSMatrixComponent(transformMatrix),
+    new CSSScale(5, 6)
+  ];
+
+  let expectedMatrix = new DOMMatrix();
+  expectedMatrix.scaleSelf(2, 2);
+  expectedMatrix.multiplySelf(transformMatrix);
+  expectedMatrix.scaleSelf(5, 6);
+
+  const transform = new CSSTransformValue(transformArray);
+  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSTransformValue.toMatrix() multiplies its component matrices');
+
+test(() => {
+  const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+  let transformArray = [
+    new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)),
+    new CSSRotate(1, 2, 3, CSS.deg(90)),
+    new CSSScale(2, 3, 2),
+    new CSSMatrixComponent(transformMatrix),
+  ];
+
+  transformArray.forEach(transform => transform.is2D = true);
+
+  let expectedMatrix = new DOMMatrix();
+  expectedMatrix.translateSelf(1, 1);
+  expectedMatrix.rotateSelf(90);
+  expectedMatrix.scaleSelf(2, 3);
+  expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14]));
+
+  const transform = new CSSTransformValue(transformArray);
+  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSTransformValue.toMatrix() respects is2D changes in its components');
+
+</script>

tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html

@@ -9,8 +9,6 @@
 <script>
 'use strict';
 
-const EPSILON = 1e-6;
-
 test(() => {
   assert_throws(new TypeError(), () => new CSSTransformValue());
   assert_throws(new TypeError(), () => new CSSTransformValue([]));
@@ -51,106 +49,6 @@ test(() => {
   assert_equals(transform.is2D, true);
 }, 'CSSTransformValue.is2D is readonly');
 
-test(() => {
-  assert_throws(new TypeError(), () => new CSSTransformValue([new CSSTranslate(CSS.px(1), CSS.em(1))]).toMatrix());
-  assert_throws(new TypeError(), () => new CSSTransformValue([new CSSPerspective(CSS.em(1))]).toMatrix());
-}, 'Calling CSSTransformValue.toMatrix containing relative units throws TypeError');
-
-test(() => {
-  const transform = new CSSTransformValue([
-    new CSSTranslate(CSS.px(1), CSS.px(2), CSS.px(3))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, 1e-8);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSTranslate');
-
-test(() => {
-  const transform = new CSSTransformValue([
-    new CSSRotate(CSS.number(1), CSS.number(2), CSS.number(3), CSS.deg(90))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).rotateAxisAngle(1, 2, 3, 90);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSRotate');
-
-test(() => {
-  const transform = new CSSTransformValue([
-      new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).scale(1, 2, 3);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSScale');
-
-test(() => {
-  const alpha = 10;
-  const beta = 20;
-  const transform = new CSSTransformValue([
-      new CSSSkew(CSS.rad(alpha), CSS.rad(beta))
-  ]);
-  const expectedMatrix = new DOMMatrixReadOnly(
-        [1, Math.tan(beta), 0, 0, Math.tan(alpha), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSSkew');
-
-test(() => {
-  const length = 10;
-  const transform = new CSSTransformValue([
-      new CSSPerspective(CSS.px(length))
-  ]);
-  const expectedMatrix = new DOMMatrixReadOnly(
-        [1, 0, 0, 0,
-         0, 1, 0, 0,
-         0, 0, 1, -1/length,
-         0, 0, 0, 1]);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSPerspective');
-
-test(() => {
-  const matrix = new DOMMatrixReadOnly(
-          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
-  const transform = new CSSTransformValue([
-      new CSSMatrixComponent(matrix)
-  ]);
-  assert_matrix_approx_equals(transform.toMatrix(), matrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSMatrixComponent');
-
-test(() => {
-  const transformMatrix = new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1]);
-  const transformArray = [
-    new CSSScale(2, 2),
-    new CSSMatrixComponent(transformMatrix),
-    new CSSScale(5, 6)
-  ];
-
-  let expectedMatrix = new DOMMatrix();
-  expectedMatrix.scaleSelf(2, 2);
-  expectedMatrix.multiplySelf(transformMatrix);
-  expectedMatrix.scaleSelf(5, 6);
-
-  const transform = new CSSTransformValue(transformArray);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix multiplies its component matrices');
-
-test(() => {
-  const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
-  let transformArray = [
-    new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)),
-    new CSSRotate(1, 2, 3, CSS.deg(90)),
-    new CSSScale(2, 3, 2),
-    new CSSMatrixComponent(transformMatrix),
-  ];
-
-  transformArray.forEach(transform => transform.is2D = true);
-
-  let expectedMatrix = new DOMMatrix();
-  expectedMatrix.translateSelf(1, 1);
-  expectedMatrix.rotateSelf(90);
-  expectedMatrix.scaleSelf(2, 3);
-  expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14]));
-
-  const transform = new CSSTransformValue(transformArray);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix respects is2D changes in its components');
-
 test(() => {
   const transformArray = [
     new CSSScale(2, 2),

tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js

@@ -1,3 +1,50 @@
+const gTestSyntax = {
+  '0': {
+    description: 'unitless zero',
+    set: true,
+    examples: [
+      new CSSUnitValue(0, 'number'),
+    ],
+  },
+  '<length>': {
+    description: 'a length',
+    get: true,
+    set: true,
+    examples: [
+      new CSSUnitValue(0, 'px'),
+      new CSSUnitValue(-3.14, 'em'),
+      new CSSUnitValue(3.14, 'cm'),
+    ],
+  },
+  '<percentage>': {
+    description: 'a percent',
+    get: true,
+    set: true,
+    examples: [
+      new CSSUnitValue(0, 'percent'),
+      new CSSUnitValue(-3.14, 'percent'),
+      new CSSUnitValue(3.14, 'percent'),
+    ],
+  },
+  '<time>': {
+    description: 'a time',
+    get: true,
+    set: true,
+    examples: [
+      new CSSUnitValue(0, 's'),
+      new CSSUnitValue(-3.14, 'ms'),
+      new CSSUnitValue(3.14, 's'),
+    ],
+  },
+  '<ident>': {
+    description: 'a CSSKeywordValue',
+    set: true,
+    get: true,
+    // user-specified examples
+    examples: null,
+  },
+};
+
 function testGet(propertyName, values, description) {
   test(t => {
     let element = createDivWithStyle(t);
@@ -27,36 +74,42 @@ function testSet(propertyName, values, description) {
   }, `Can set '${propertyName}' to ${description}`);
 }
 
-function testGetSet(propertyName, values, description) {
+function testSetInvalid(propertyName, values, description) {
-  testGet(propertyName, values, description);
+  test(t => {
-  testSet(propertyName, values, description);
+    let element = createDivWithStyle(t);
+    let styleMap = element.attributeStyleMap;
+
+    for (const styleValue of values) {
+      assert_throws(new TypeError(), () => styleMap.set(propertyName, styleValue));
+    }
+  }, `Setting '${propertyName}' to ${description} throws TypeError`);
 }
 
 function runPropertyTests(propertyName, testCases) {
-  for (const testCase of testCases) {
+  let productionsTested = new Set();
-    if (testCase.specified == '0') {
-      testSet(propertyName, [
-        new CSSUnitValue(0, 'number'),
-      ], 'unitless zero');
-    } else if (testCase.specified === '<length>') {
-      testGetSet(propertyName, [
-        new CSSUnitValue(0, 'px'),
-        new CSSUnitValue(-3.14, 'em'),
-        new CSSUnitValue(3.14, 'cm'),
-      ], 'a length CSSUnitValue');
-    } else if (testCase.specified == '<percentage>') {
-      testGetSet(propertyName, [
-        new CSSUnitValue(0, 'percent'),
-        new CSSUnitValue(-3.14, 'percent'),
-        new CSSUnitValue(3.14, 'percent'),
-      ], 'a percent CSSUnitValue');
-    } else if (testCase.specified == '<ident>') {
-      if (!testCase.examples) {
-        throw new Error('<ident> tests require examples');
-      }
 
-      testGetSet(propertyName, testCase.examples,
+  for (const testCase of testCases) {
-        'a CSSKeywordValue');
+    const syntax = gTestSyntax[testCase.specified];
+    if (!syntax)
+      throw new Error(`'${testCase.specified}' is not a valid production`);
+
+    const examples = testCase.examples || syntax.examples;
+    if (!examples)
+      throw new Error(`'${testCase.specified}' tests require explicit examples`);
+
+    if (syntax.get)
+      testGet(propertyName, examples, syntax.description);
+    if (syntax.set)
+      testSet(propertyName, examples, syntax.description);
+
+    productionsTested.add(testCase.specified);
+  }
+
+  // Also test that styleMap.set rejects invalid CSSStyleValues.
+  for (const [production, syntax] of Object.entries(gTestSyntax)) {
+    if (!productionsTested.has(production)) {
+      if (syntax.set && syntax.examples)
+        testSetInvalid(propertyName, syntax.examples, syntax.description);
     }
   }
 }

tests/wpt/web-platform-tests/css/cssom/css-style-attr-decl-block.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/cssom-1/#css-declaration-blocks">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+function createTestElement(style) {
+  let wrapper = document.createElement("div");
+  wrapper.innerHTML = `<div id="test" style="${style}"></div>`;
+  return wrapper.querySelector("#test");
+}
+
+test(function() {
+  let elem = createTestElement("z-index: 10;");
+  assert_equals(elem.style.cssText, "z-index: 10;");
+}, "Style attribute should create CSS declaration block based on its content");
+
+test(function() {
+  let elem = createTestElement("z-index: 20;");
+  let style = elem.style;
+  assert_equals(style.cssText, "z-index: 20;");
+  function assert_css_text(value, action) {
+    assert_equals(style.cssText, value, "CSS declaration block after " + action);
+  }
+  elem.setAttribute("style", "z-index: 21;");
+  assert_css_text("z-index: 21;", "changing the style attribute");
+  elem.removeAttribute("style");
+  assert_css_text("", "removing the style attribute");
+  elem.setAttribute("style", "position: absolute;");
+  assert_css_text("position: absolute;", "adding style attribute again");
+}, "Changes to style attribute should reflect on CSS declaration block");
+
+test(function() {
+  let elem = createTestElement("z-index: 30;");
+  let style = elem.style;
+  assert_equals(style.cssText, "z-index: 30;");
+  function assert_attr(value, action) {
+    assert_equals(elem.getAttribute("style"), value, "style attribute after " + action);
+  }
+  style.setProperty("z-index", "31");
+  assert_attr("z-index: 31;", "changing property in CSS declaration block");
+  style.removeProperty("z-index");
+  assert_attr("", "removing property from CSS declaration block");
+  style.setProperty("position", "absolute");
+  assert_attr("position: absolute;", "adding property to CSS declaration block");
+  style.cssText = "z-index: 32;";
+  assert_attr("z-index: 32;", "changing cssText");
+  style.cssText = "z-index: 33; invalid";
+  assert_attr("z-index: 33;", "changing cssText to a partial invalid value");
+}, "Changes to CSS declaration block should reflect on style attribute");
+
+test(function() {
+  let elem = createTestElement("z-index: 40;");
+  let style = elem.style;
+  assert_equals(style.cssText, "z-index: 40;");
+  // Create an observer for the element.
+  let observer = new MutationObserver(function() {});
+  observer.observe(elem, {attributes: true, attributeOldValue: true});
+  function assert_record_with_old_value(oldValue, action) {
+    let records = observer.takeRecords();
+    assert_equals(records.length, 1, "number of mutation records after " + action);
+    let record = records[0];
+    assert_equals(record.type, "attributes", "mutation type after " + action);
+    assert_equals(record.attributeName, "style", "mutated attribute after " + action);
+    assert_equals(record.oldValue, oldValue, "old value after " + action);
+  }
+  style.setProperty("z-index", "41");
+  assert_record_with_old_value("z-index: 40;", "changing property in CSS declaration block");
+  style.cssText = "z-index: 42;";
+  assert_record_with_old_value("z-index: 41;", "changing cssText");
+  style.cssText = "z-index: 42;";
+  assert_record_with_old_value("z-index: 42;", "changing cssText with the same content");
+  style.removeProperty("z-index");
+  assert_record_with_old_value("z-index: 42;", "removing property from CSS declaration block");
+  // Mutation to shorthand properties should also trigger only one mutation record.
+  style.setProperty("margin", "1px");
+  assert_record_with_old_value("", "adding shorthand property to CSS declaration block");
+  style.removeProperty("margin");
+  assert_record_with_old_value("margin: 1px;", "removing shorthand property from CSS declaration block");
+  // Final sanity check.
+  assert_equals(elem.getAttribute("style"), "");
+}, "Changes to CSS declaration block should queue mutation record for style attribute");
+
+test(function() {
+  let elem = createTestElement("z-index: 50; invalid");
+  let style = elem.style;
+  assert_equals(style.cssText, "z-index: 50;");
+  // Create an observer for the element.
+  let observer = new MutationObserver(function() {});
+  observer.observe(elem, {attributes: true});
+  function assert_no_record(action) {
+    let records = observer.takeRecords();
+    assert_true(records.length == 0, "expect no record after " + action);
+  }
+  style.setProperty("z-index", "invalid");
+  assert_no_record("setting invalid value to property");
+  // Longhand property.
+  style.removeProperty("position");
+  assert_no_record("removing non-existing longhand property");
+  style.setProperty("position", "");
+  assert_no_record("setting empty string to non-existing longhand property");
+  // Shorthand property.
+  style.removeProperty("margin");
+  assert_no_record("removing non-existing shorthand property");
+  style.setProperty("margin", "");
+  assert_no_record("setting empty string to non-existing shorthand property");
+  // Check that the value really isn't changed.
+  assert_equals(elem.getAttribute("style"), "z-index: 50; invalid",
+                "style attribute after removing non-existing properties");
+}, "Removing non-existing property or setting invalid value on CSS declaration block shouldn't queue mutation record");
+
+test(function() {
+  let elem = createTestElement("background-image: url(./);");
+  let style = elem.style;
+  let base = document.createElement("base");
+  base.href = "/";
+  document.body.appendChild(elem);
+  let originalComputedValue = getComputedStyle(elem).backgroundImage;
+  document.head.appendChild(base);
+  this.add_cleanup(() => {
+    document.head.removeChild(base);
+    document.body.removeChild(elem);
+  });
+  style.setProperty("background-color", "green");
+  assert_equals(getComputedStyle(elem).backgroundImage, originalComputedValue,
+                "getComputedStyle(elem).backgroundImage after setting background-color");
+  style.setProperty("background-image", "url(./)");
+  assert_not_equals(getComputedStyle(elem).backgroundImage, originalComputedValue,
+                    "getComputedStyle(elem).backgroundImage after setting background-image");
+}, "Changes to CSS declaration block after a base URL change");
+</script>

tests/wpt/web-platform-tests/css/cssom/cssimportrule.html

@@ -14,16 +14,17 @@
     <style id="styleElement" type="text/css">
         @import url("support/a-green.css");
         @import url("support/a-green.css") screen;
+        @page { background-color: red; }
     </style>
 </head>
 <body>
     <div id="log"></div>
 
     <script type="text/javascript">
-        var rule, ruleWithMedia;
+        var styleSheet, ruleList, rule, ruleWithMedia;
         setup(function() {
-            var styleSheet = document.getElementById("styleElement").sheet;
+            styleSheet = document.getElementById("styleElement").sheet;
-            var ruleList = styleSheet.cssRules;
+            ruleList = styleSheet.cssRules;
             rule = ruleList[0];
             ruleWithMedia = ruleList[1];
         });
@@ -87,7 +88,18 @@
         test(function() {
             ruleWithMedia.media = "print";
             assert_equals(ruleWithMedia.media.mediaText, "print");
-        }, "MediaList mediaText attribute should be updated");
+        }, "CSSImportRule : MediaList mediaText attribute should be updated due to [PutForwards]");
+
+        test(function() {
+            var ruleWithPage = ruleList[2];
+            ruleWithPage.style = "background-color: green;"
+            assert_equals(ruleWithPage.style.cssText, "background-color: green;");
+        }, "CSSStyleDeclaration cssText attribute should be updated due to [PutForwards]");
+
+        test(function() {
+            styleSheet.media = "screen";
+            assert_equals(styleSheet.media.mediaText, "screen");
+        }, "StyleSheet : MediaList mediaText attribute should be updated due to [PutForwards]");
     </script>
 </body>
 </html>

tests/wpt/web-platform-tests/css/cssom/selectorText-modification-restyle-002.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSSOM: Modify selectorText in a shadow tree stylesheet</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstylerule-selectortext">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container { color: red }
+  .subtree * { color: pink }
+</style>
+<div id="container">
+  <div id="host"></div>
+</div>
+<script>
+  const root = host.attachShadow({mode:"open"});
+  root.innerHTML = "<style>nomatch { color: green }</style><div>Green</div>";
+  const div = root.querySelector("div");
+
+  test(() => {
+    assert_equals(getComputedStyle(div).color, "rgb(255, 0, 0)", "Color should initial be red.");
+  }, "Check initial color.");
+
+  test(() => {
+    // The combination of the .subtree and CSSOM selector style invalidations
+    // caused the Blink implementation to fail an assertion.
+    container.className = "subtree";
+    root.styleSheets[0].cssRules[0].selectorText = "div";
+    assert_equals(getComputedStyle(div).color, "rgb(0, 128, 0)", "Color should be green after stylesheet change.");
+  }, "Check that color changes correctly after shadow stylesheet selector and #container class is changed.");
+</script>

tests/wpt/web-platform-tests/css/mediaqueries/viewport-script-dynamic-ref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" href="mailto:emilio@crisal.io">
+<meta name="viewport" content="width=300">
+<style>
+p { color: green; }
+</style>
+<p>Should be green</p>

tests/wpt/web-platform-tests/css/mediaqueries/viewport-script-dynamic.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Meta viewport after a script and stylesheets</title>
+<link rel="author" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1424878">
+<link rel="help" href="https://drafts.csswg.org/mediaqueries/#mf-dimensions">
+<link rel="match" href="viewport-script-dynamic-ref.html">
+<style>
+p { color: green; }
+/* Ensure that we initially match it, and stop matching it afterwards */
+@media (min-width: 310px) {
+  p {
+    color: red;
+  }
+}
+</style>
+<!-- The broken script below is the point of the test, see the bugzilla bug. -->
+<script src="intentionally-broken-url.js"></script>
+<meta name="viewport" content="width=300">
+<p>Should be green</p>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-basic-block-horiz-001v.xhtml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a horizontal flex container, with
+     various "flex" values and various combinations of the items
+     and with various writing-modes on the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
+      (with various writing-modes on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-basic-block-vert-001v.xhtml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a vertical flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container
+      (with various writing-modes on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        height: 200px;
+        font-size: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-basic-canvas-horiz-001v.xhtml

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
+      (with a vertical writing-mode on the canvas flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 150px; flex: 1 4 auto"/>
+      <canvas style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-basic-canvas-vert-001v.xhtml

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
+      (with a vertical writing-mode on the canvas flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 150px; flex: 1 4 auto"/>
+      <canvas style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-001v.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-002v.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-003v.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-004v.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-005v.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-006v.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-mbp-horiz-002v.xhtml

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border/padding on flex items
+     and with various writing-modes on the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 9px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        padding-left: 5px;
+        padding-right: 6px;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 1px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        padding-left: 1px;
+        padding-right: 2px;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-mbp-horiz-003v.xhtml

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with border/padding on a flex container and on its children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing borders and padding on a horizontal flex container and its flex items
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flex container border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        writing-mode: vertical-rl;
+      }
+      div.child2 {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-010-ref.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+  .container > .hl, .container > .hr {
+    /* In the testcase, these items are stretched vertically
+       via the default "align-self:stretch" behavior, and because
+       they have a height of "auto".
+       (The rest of the items have a non-auto height from "inline-size"
+       and their vertical writing-mode, so those ones do not stretch.) */
+    height: 118px;
+  }
+
+  .container.hl > * { float: left; }
+  .container.hr > * { float: right; }
+
+  </style>
+</head>
+<body>
+
+<div class="container hl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-010.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a horizontal row-oriented flex container.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-010-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container hl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-011-ref.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+
+    /* This really floats to top ('logical left'), since all the containers
+       have a vertical writing mode. */
+    float: left;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
+       via the default "align-self:stretch" behavior, and because
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-011.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a vertical row-oriented flex container.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-011-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container vl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-012-ref.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+
+    /* This really floats to top ('logical left'), since all the containers
+       have a vertical writing mode. */
+    float: right;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
+       via the default "align-self:stretch" behavior, and because
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-012.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a vertical row-oriented flex container
+    with 'direction' flipped.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-012-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container vl_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-013-ref.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  nocollapse {
+    /* special element to disable margin-collapsing */
+    display: block;
+    overflow: hidden;
+    height: 0;
+  }
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
+       via the default "align-self:stretch" behavior, and because
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container hl">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container hl">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+<div class="container hr">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container hr">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-013.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a horizontal column-oriented flex container.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-013-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 500px;
+    width: 150px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container hl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container hr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-014-ref.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  nocollapse {
+    /* special element to disable margin-collapsing */
+    display: block;
+    overflow: hidden;
+    height: 0;
+  }
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+  .container > .hl, .container > .hr {
+    /* In the testcase, these items are stretched vertically
+       via the default "align-self:stretch" behavior, and because
+       they have a height of "auto".
+       (The rest of the items have a non-auto height from "inline-size"
+       and their vertical writing-mode, so those ones do not stretch.) */
+    height: 118px;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container vl">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+<div class="container vr">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container vr">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-014.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a vertical column-oriented flex container.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-014-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container vl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-015-ref.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: block;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  nocollapse {
+    /* special element to disable margin-collapsing */
+    display: block;
+    overflow: hidden;
+    height: 0;
+  }
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+
+  .container > .hl, .container > .hr {
+    /* In the testcase, these items are stretched vertically
+       via the default "align-self:stretch" behavior, and because
+       they have a height of "auto".
+       (The rest of the items have a non-auto height from "inline-size"
+       and their vertical writing-mode, so those ones do not stretch.) */
+    height: 118px;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl_rtl">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container vl_rtl">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+<div class="container vr_rtl">
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+</div>
+<div class="container vr_rtl">
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-writing-mode-015.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing a mix of flex items with various values for
+    'writing-mode' / 'direction' in a vertical column-oriented flex container
+    with 'direction' flipped.
+  </title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-015-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  span {
+    display: block;
+    background: lightgrey;
+    border: 2px solid black;
+    /* If browser supports it, signal the inline direction with border color: */
+    border-block-start-color: orange;
+    border-inline-start-color: lime;
+
+    margin: 11px 13px 17px 7px;
+    inline-size: 6px;
+  }
+
+  .small { font: 12px Ahem; }
+  .big   { font: 20px Ahem; }
+
+  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
+  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
+  .vl  { writing-mode: vertical-lr;    direction: ltr; }
+  .vr  { writing-mode: vertical-rl;    direction: ltr; }
+  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
+  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
+  </style>
+</head>
+<body>
+
+<div class="container vl_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vl_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="hl small">a b c</span>
+  <span class="hl big">d e</span>
+  <span class="hr small">a b c</span>
+  <span class="hr big">d e</span>
+  <span class="vl small">a b c</span>
+  <span class="vl big">d e</span>
+</div>
+<div class="container vr_rtl">
+  <span class="vr small">a b c</span>
+  <span class="vr big">d e</span>
+  <span class="vl_rtl small">a b c</span>
+  <span class="vl_rtl big">d e</span>
+  <span class="vr_rtl small">a b c</span>
+  <span class="vr_rtl big">d e</span>
+</div>
+
+</body>
+</html>

tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/reftest.list

@@ -61,11 +61,15 @@
 
 # Basic tests with with blocks as flex items
 == flexbox-basic-block-horiz-001.xhtml flexbox-basic-block-horiz-001-ref.xhtml
+== flexbox-basic-block-horiz-001v.xhtml flexbox-basic-block-horiz-001-ref.xhtml
 == flexbox-basic-block-vert-001.xhtml flexbox-basic-block-vert-001-ref.xhtml
+== flexbox-basic-block-vert-001v.xhtml flexbox-basic-block-vert-001-ref.xhtml
 
 # Tests for basic handling of <canvas>/<img>/etc as a flex item
 == flexbox-basic-canvas-horiz-001.xhtml   flexbox-basic-canvas-horiz-001-ref.xhtml
+== flexbox-basic-canvas-horiz-001v.xhtml  flexbox-basic-canvas-horiz-001-ref.xhtml
 == flexbox-basic-canvas-vert-001.xhtml    flexbox-basic-canvas-vert-001-ref.xhtml
+== flexbox-basic-canvas-vert-001v.xhtml   flexbox-basic-canvas-vert-001-ref.xhtml
 == flexbox-basic-fieldset-horiz-001.xhtml flexbox-basic-fieldset-horiz-001-ref.xhtml
 == flexbox-basic-fieldset-vert-001.xhtml  flexbox-basic-fieldset-vert-001-ref.xhtml
 == flexbox-basic-iframe-horiz-001.xhtml   flexbox-basic-iframe-horiz-001-ref.xhtml
@@ -107,11 +111,17 @@
 # (Note that tests 001 and 002 share a reference case; they render the same,
 # because they don't do any direction-specific stretching/flexing.)
 == flexbox-intrinsic-ratio-001.html flexbox-intrinsic-ratio-001-ref.html
+== flexbox-intrinsic-ratio-001v.html flexbox-intrinsic-ratio-001-ref.html
 == flexbox-intrinsic-ratio-002.html flexbox-intrinsic-ratio-001-ref.html
+== flexbox-intrinsic-ratio-002v.html flexbox-intrinsic-ratio-001-ref.html
 == flexbox-intrinsic-ratio-003.html flexbox-intrinsic-ratio-003-ref.html
+== flexbox-intrinsic-ratio-003v.html flexbox-intrinsic-ratio-003-ref.html
 == flexbox-intrinsic-ratio-004.html flexbox-intrinsic-ratio-004-ref.html
+== flexbox-intrinsic-ratio-004v.html flexbox-intrinsic-ratio-004-ref.html
 == flexbox-intrinsic-ratio-005.html flexbox-intrinsic-ratio-005-ref.html
+== flexbox-intrinsic-ratio-005v.html flexbox-intrinsic-ratio-005-ref.html
 == flexbox-intrinsic-ratio-006.html flexbox-intrinsic-ratio-006-ref.html
+== flexbox-intrinsic-ratio-006v.html flexbox-intrinsic-ratio-006-ref.html
 
 # Tests for flex items as (pseudo) stacking contexts
 == flexbox-items-as-stacking-contexts-001.xhtml flexbox-items-as-stacking-contexts-001-ref.xhtml
@@ -141,7 +151,9 @@
 == flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-ref.xhtml
 == flexbox-mbp-horiz-002a.xhtml            flexbox-mbp-horiz-002-ref.xhtml
 == flexbox-mbp-horiz-002b.xhtml            flexbox-mbp-horiz-002-ref.xhtml
+== flexbox-mbp-horiz-002v.xhtml            flexbox-mbp-horiz-002-ref.xhtml
 == flexbox-mbp-horiz-003.xhtml             flexbox-mbp-horiz-003-ref.xhtml
+== flexbox-mbp-horiz-003v.xhtml            flexbox-mbp-horiz-003-ref.xhtml
 == flexbox-mbp-horiz-003-reverse.xhtml     flexbox-mbp-horiz-003-reverse-ref.xhtml
 == flexbox-mbp-horiz-004.xhtml             flexbox-mbp-horiz-004-ref.xhtml
 
@@ -199,7 +211,8 @@
 == flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html
 == flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html
 
-# Tests for combined influence of 'writing-mode' & 'direction' on flex axes
+# Tests for combined influence of 'writing-mode' & 'direction'
+# on flex container axes & flex item placement
 == flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html
 == flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
 == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
@@ -209,6 +222,12 @@
 == flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html
 == flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html
 == flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html
+== flexbox-writing-mode-010.html flexbox-writing-mode-010-ref.html
+== flexbox-writing-mode-011.html flexbox-writing-mode-011-ref.html
+== flexbox-writing-mode-012.html flexbox-writing-mode-012-ref.html
+== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
+== flexbox-writing-mode-014.html flexbox-writing-mode-014-ref.html
+== flexbox-writing-mode-015.html flexbox-writing-mode-015-ref.html
 
 # Single-line size clamping
 == flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html

tests/wpt/web-platform-tests/custom-elements/Document-createElement.html

@@ -36,12 +36,18 @@ test(function () {
     customElements.define('autonomous-custom-element', AutonomousCustomElement);
     customElements.define('is-custom-element', IsCustomElement);
 
-    var instance = document.createElement('autonomous-custom-element', { is: "is-custom-element"});
+    var instance = document.createElement('autonomous-custom-element', { is: 'is-custom-element'});
 
     assert_true(instance instanceof AutonomousCustomElement);
     assert_equals(instance.localName, 'autonomous-custom-element');
     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom element HTML must use HTML namespace');
 
+    var instance2 = document.createElement('undefined-element', { is: 'is-custom-element'});
+    assert_false(instance2.matches(':defined'));
+    class DefinedLater extends HTMLElement {}
+    customElements.define('undefined-element', DefinedLater);
+    document.body.appendChild(instance2);
+    assert_true(instance2 instanceof DefinedLater);
 }, 'document.createElement must create an instance of autonomous custom elements when it has is attribute');
 
 function assert_reports(expected, testFunction, message) {
@@ -349,6 +355,7 @@ test(() => {
   // https://github.com/w3c/webcomponents/issues/608
   let div = document.createElement('div', { is: 'my-div' });
   assert_false(div instanceof MyElement);
+  assert_false(div.hasAttribute('is'));
 
   customElements.define('my-div', MyElement, { extends: 'div' });
   document.body.appendChild(div);

tests/wpt/web-platform-tests/custom-elements/Document-createElementNS.html

@@ -38,6 +38,7 @@ test(() => {
   let element = document.createElementNS('http://www.w3.org/1999/xhtml', 'p:address', { is: 'my-builtin'});
   assert_true(element instanceof MyBuiltinElement);
   assert_equals(element.prefix, 'p');
+  assert_false(element.hasAttribute('is'));
 }, 'builtin: document.createElementNS should create custom elements with prefixes.');
 
 test(() => {
@@ -46,6 +47,7 @@ test(() => {
   customElements.define('my-builtin2', MyBuiltinElement2, { extends: 'address'});
   let element = document.createElementNS('urn:example', 'address', { is: 'my-builtin2' });
   assert_false(element instanceof MyBuiltinElement2);
+  assert_false(element.hasAttribute('is'));
 }, 'builtin: document.createElementNS should check namespaces.');
 </script>
 </body>

tests/wpt/web-platform-tests/custom-elements/builtin-coverage.html

@@ -800,17 +800,24 @@ for (const t of testData) {
     test(() => {
       let customized = new t.klass();
       assert_equals(customized.constructor, t.klass);
+      assert_equals(customized.cloneNode().constructor, t.klass,
+                    'Cloning a customized built-in element should succeed.');
     }, `${t.tag}: Operator 'new' should instantiate a customized built-in element`);
 
     test(() => {
       let customized = document.createElement(t.tag, { is: name });
       assert_equals(customized.constructor, t.klass);
+      assert_equals(customized.cloneNode().constructor, t.klass,
+                    'Cloning a customized built-in element should succeed.');
     }, `${t.tag}: document.createElement() should instantiate a customized built-in element`);
 
     if (t.parsing == 'document') {
       let test = async_test(`${t.tag}: document parser should instantiate a customized built-in element`);
       window.addEventListener('load', test.step_func_done(() => {
-        assert_equals(document.querySelector(t.tag).constructor, t.klass);
+        let customized = document.querySelector(t.tag);
+        assert_equals(customized.constructor, t.klass);
+        assert_equals(customized.cloneNode().constructor, t.klass,
+                      'Cloning a customized built-in element should succeed.');
       }));
       return;
     }
@@ -823,6 +830,8 @@ for (const t of testData) {
       }
       let customized = document.getElementById(name);
       assert_equals(customized.constructor, t.klass);
+      assert_equals(customized.cloneNode().constructor, t.klass,
+                    'Cloning a customized built-in element should succeed.');
     }, `${t.tag}: innerHTML should instantiate a customized built-in element`);
 
   }, `${t.tag}: Define a customized built-in element`);

tests/wpt/web-platform-tests/custom-elements/upgrading/Document-importNode.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<link rel="help" href="https://dom.spec.whatwg.org/#dom-document-importnode">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/custom-elements-helpers.js"></script>
+<body>
+<script>
+test_with_window((w, doc) => {
+  class MyElement extends HTMLElement {}
+  class MyElement2 extends w.HTMLElement {}
+  customElements.define('my-element', MyElement);
+  w.customElements.define('my-element', MyElement2);
+
+  let original = document.createElement('my-element');
+  assert_true(original instanceof MyElement);
+
+  let imported = doc.importNode(original);
+  assert_true(imported instanceof MyElement2);
+}, 'autonomous: document.importNode() should import custom elements successfully');
+
+test_with_window((w, doc) => {
+  class MyElement3 extends w.HTMLElement {}
+  w.customElements.define('my-element3', MyElement3);
+
+  let original = document.createElement('my-element3');
+  assert_equals(original.constructor, HTMLElement);
+
+  let imported = doc.importNode(original);
+  assert_true(imported instanceof MyElement3);
+}, 'autonomous: document.importNode() should import "undefined" custom elements successfully');
+
+test_with_window((w, doc) => {
+  class MyDiv extends HTMLDivElement {}
+  class MyDiv2 extends w.HTMLDivElement {}
+  customElements.define('my-div', MyDiv, { extends: 'div' });
+  w.customElements.define('my-div', MyDiv2, { extends: 'div' });
+
+  let original = document.createElement('div', { is: 'my-div' });
+  assert_true(original instanceof MyDiv);
+
+  let imported = doc.importNode(original);
+  assert_true(imported instanceof MyDiv2);
+}, 'built-in: document.importNode() should import custom elements successfully');
+
+test_with_window((w, doc) => {
+  class MyDiv2 extends w.HTMLDivElement {}
+  w.customElements.define('my-div2', MyDiv2, { extends: 'div' });
+
+  let original = document.createElement('div', { is: 'my-div2' });
+  assert_equals(original.constructor, HTMLDivElement);
+
+  let imported = doc.importNode(original);
+  assert_true(imported instanceof MyDiv2);
+}, 'built-in: document.importNode() should import "undefined" custom elements successfully');
+</script>
+</body>

tests/wpt/web-platform-tests/custom-elements/upgrading/Node-cloneNode.html

@@ -49,6 +49,35 @@ test(function () {
         'A cloned custom element must be an instance of the custom element');
 }, 'Node.prototype.cloneNode(false) must be able to clone as a autonomous custom element when it contains is attribute');
 
+test(function () {
+    class MyDiv1 extends HTMLDivElement {};
+    class MyDiv2 extends HTMLDivElement {};
+    class MyDiv3 extends HTMLDivElement {};
+    customElements.define('my-div1', MyDiv1, { extends: 'div' });
+    customElements.define('my-div2', MyDiv2, { extends: 'div' });
+
+    let instance = document.createElement('div', { is: 'my-div1'});
+    assert_true(instance instanceof MyDiv1);
+    instance.setAttribute('is', 'my-div2');
+    let clone = instance.cloneNode(false);
+    assert_not_equals(instance, clone);
+    assert_true(clone instanceof MyDiv1,
+        'A cloned custom element must be an instance of the custom element even with an inconsistent "is" attribute');
+
+    let instance3 = document.createElement('div', { is: 'my-div3'});
+    assert_false(instance3 instanceof MyDiv3);
+    instance3.setAttribute('is', 'my-div2');
+    let clone3 = instance3.cloneNode(false);
+    assert_not_equals(instance3, clone);
+    customElements.define('my-div3', MyDiv3, { extends: 'div' });
+    document.body.appendChild(instance3);
+    document.body.appendChild(clone3);
+    assert_true(instance3 instanceof MyDiv3,
+        'An undefined element must be upgraded even with an inconsistent "is" attribute');
+    assert_true(clone3 instanceof MyDiv3,
+        'A cloned undefined element must be upgraded even with an inconsistent "is" attribute');
+}, 'Node.prototype.cloneNode(false) must be able to clone as a customized built-in element when it has an inconsistent "is" attribute');
+
 test_with_window(function (contentWindow) {
     var contentDocument = contentWindow.document;
     class MyCustomElement extends contentWindow.HTMLElement {}

tests/wpt/web-platform-tests/docs/introduction.md

@@ -102,17 +102,22 @@ your `%Path%` [Environment Variable](http://www.computerhope.com/issues/ch000549
 and read the [Windows Notes](#windows-notes) section below.
 
 To get the tests running, you need to set up the test domains in your
-[`hosts` file](http://en.wikipedia.org/wiki/Hosts_%28file%29%23Location_in_the_file_system). The
+[`hosts` file](http://en.wikipedia.org/wiki/Hosts_%28file%29%23Location_in_the_file_system).
-following entries are required:
 
+The necessary content can be generated with `./wpt make-hosts-file`; on
+Windows, you will need to preceed the prior command with `python` or
+the path to the Python binary (`python wpt make-hosts-file`).
+
+For example, on most UNIX-like systems, you can setup the hosts file with:
+
+```bash
+./wpt make-hosts-file | sudo tee -a /etc/hosts
 ```
-127.0.0.1   web-platform.test
+
-127.0.0.1   www.web-platform.test
+And on Windows (note this requires an Administrator privileged shell):
-127.0.0.1   www1.web-platform.test
+
-127.0.0.1   www2.web-platform.test
+```bash
-127.0.0.1   xn--n8j6ds53lwwkrqhv28a.web-platform.test
+python wpt make-hosts-file >> %SystemRoot%\System32\drivers\etc\hosts
-127.0.0.1   xn--lve-6lad.web-platform.test
-0.0.0.0     nonexistent-origin.web-platform.test
 ```
 
 If you are behind a proxy, you also need to make sure the domains above are

tests/wpt/web-platform-tests/domparsing/XMLSerializer-serializeToString.html

@@ -39,6 +39,15 @@ test(function() {
   var xmlString = (new XMLSerializer()).serializeToString(root);
   assert_equals(xmlString, '<root xmlns="urn:bar"><outer xmlns=""><inner>value1</inner></outer></root>');
 }, 'Check if there is no redundant empty namespace declaration.');
+
+test(function() {
+  var serializer = new XMLSerializer();
+  var root = createXmlDoc().documentElement;
+  root.firstChild.setAttribute('attr1', 'value1\tvalue2\r\n');
+  var xmlString = serializer.serializeToString(root);
+  assert_equals(xmlString, '<root><child1 attr1="value1&#9;value2&#xD;&#xA;">value1</child1></root>');
+}, 'check XMLSerializer.serializeToString escapes attribute values for roundtripping');
+
 </script>
  </body>
 </html>

tests/wpt/web-platform-tests/fetch/corb/README.md

@@ -0,0 +1,21 @@
+# Tests related to Cross-Origin Resource Blocking (CORB).
+
+This directory contains tests related to the
+[Cross-Origin Resource Blocking (CORB)](https://chromium.googlesource.com/chromium/src/+/master/content/browser/loader/cross_origin_read_blocking_explainer.md) algorithm.
+
+Note that CORB is currently in very early stages of standardization path.  At
+the same time, some tests in this directory (e.g.
+`css-with-json-parser-breaker`) cover behavior spec-ed outside of CORB (making
+sure that CORB doesn't change the existing web behavior) and therefore are
+valuable independently from CORB's standardization efforts.
+
+Tests that cover behavior that is changed by CORB have to be marked as
+[tentative](http://web-platform-tests.org/writing-tests/file-names.html)
+(using `.tentative` substring in their filename) until CORB
+is included in the official
+[Fetch spec](https://fetch.spec.whatwg.org/).
+
+The tests in this directory interact with various, random features,
+but the tests have been grouped together into the `fetch/corb` directory,
+because all of these tests verify behavior that is important to the CORB
+algorithm.