Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/rendering/non-replaced-elements
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
319 files changed, 8238 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html
new file mode 100644
index 0000000000..48b0e33d94
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>dialog: display</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ dialog { position: static }
+</style>
+<dialog open id=dialog></dialog>
+<script>
+test(function() {
+  assert_equals(getComputedStyle(document.getElementById('dialog')).display, 'block');
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html
new file mode 100644
index 0000000000..3588e03670
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<title>The dialog element</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ #ref-element {
+   padding-top: 1em;
+   background-color: white;
+   color: black;
+   border: solid;
+ }
+</style>
+<!--
+HTML used to have a style rule with `@media screen and (max-width: 540px)`.
+That was removed in https://github.com/whatwg/html/pull/2459
+-->
+<div><iframe style="width: 540px" src="support/dialog-framed.html"></iframe></div>
+<div><iframe style="width: 538px" src="support/dialog-framed.html"></iframe></div>
+<div id=ref-element></div>
+<script>
+setup(() => {
+  const refStyle = getComputedStyle(document.getElementById('ref-element'));
+  window.ref1em = refStyle.paddingTop;
+  window.refWhite = refStyle.backgroundColor;
+  window.refBlack = refStyle.color;
+  window.refMediumBorder = refStyle.borderTopWidth;
+  window.iframeHeight = 150;
+  const bodyTopMargin = 8;
+  window.dialogSize = parseFloat(ref1em) * 2 + parseFloat(refMediumBorder) * 2;
+  window.normalBottomDistance = iframeHeight - bodyTopMargin - dialogSize;
+}, {explicit_done: true});
+
+onload = () => {
+  for (let iframe of document.querySelectorAll('iframe')) {
+    const win = iframe.contentWindow;
+    const styleAttr = iframe.getAttribute('style');
+    const iframeWidth = parseInt(styleAttr.split(' ')[1]);
+    const horizontalDistance = iframeWidth / 2 - dialogSize / 2;
+    const verticalDistance = iframeHeight / 2 - dialogSize / 2;
+    test(() => {
+      const style = win.getComputedStyle(win.dialogClosed);
+      assert_equals(style.position, 'absolute', 'position');
+      assert_equals(style.display, 'none', 'display');
+      assert_equals(style.overflow, 'visible', 'overflow');
+      assert_equals(style.top, 'auto', 'top');
+      assert_equals(style.right, '0px', 'right');
+      assert_equals(style.bottom, 'auto', 'bottom');
+      assert_equals(style.left, '0px', 'left');
+      assert_equals(style.width, 'fit-content', 'width');
+      assert_equals(style.height, 'fit-content', 'height');
+      assert_equals(style.maxWidth, 'none', 'max-width');
+      assert_equals(style.maxHeight, 'none', 'max-height');
+      assert_equals(style.marginTop, 'auto', 'marginTop');
+      assert_equals(style.marginRight, 'auto', 'marginRight');
+      assert_equals(style.marginBottom, 'auto', 'marginBottom');
+      assert_equals(style.marginLeft, 'auto', 'marginLeft');
+      assertCommon(style);
+    }, `Closed dialog in ${styleAttr} iframe`);
+
+    test(() => {
+      const style = win.getComputedStyle(win.dialogOpen);
+      assert_equals(style.position, 'absolute', 'position');
+      assert_equals(style.display, 'block', 'display');
+      assert_equals(style.overflow, 'visible', 'overflow');
+      assert_equals(style.top, '8px', 'top');
+      assert_equals(style.right, '0px', 'right');
+      assert_equals(style.bottom, normalBottomDistance + 'px', 'bottom');
+      assert_equals(style.left, '0px', 'left');
+      assert_equals(style.width, '0px', 'width');
+      assert_equals(style.height, '0px', 'height');
+      assert_equals(style.maxWidth, 'none', 'max-width');
+      assert_equals(style.maxHeight, 'none', 'max-height');
+      assert_equals(style.marginTop, '0px', 'marginTop');
+      assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight');
+      assert_equals(style.marginBottom, '0px', 'marginBottom');
+      assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft');
+      assertCommon(style);
+    }, `Open dialog in ${styleAttr} iframe`);
+
+    test(() => {
+      const style = win.getComputedStyle(win.dialogModal);
+      assert_equals(style.position, 'fixed', 'position');
+      assert_equals(style.display, 'block', 'display');
+      assert_equals(style.overflow, 'auto', 'overflow');
+      assert_equals(style.top, '0px', 'top');
+      assert_equals(style.right, '0px', 'right');
+      assert_equals(style.bottom, '0px', 'bottom');
+      assert_equals(style.left, '0px', 'left');
+      assert_equals(style.width, '0px', 'width');
+      assert_equals(style.height, '0px', 'height');
+      assert_equals(style.maxWidth, 'calc(100% - 38px)', 'max-width');
+      assert_equals(style.maxHeight, 'calc(100% - 38px)', 'max-height');
+      assert_equals(style.marginTop, verticalDistance + 'px', 'marginTop');
+      assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight');
+      assert_equals(style.marginBottom, verticalDistance + 'px', 'marginBottom');
+      assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft');
+      assertCommon(style);
+    }, `Modal dialog in ${styleAttr} iframe`);
+  }
+  done();
+};
+
+function assertCommon(style) {
+  assert_equals(style.borderTopStyle, 'solid', 'borderTopStyle');
+  assert_equals(style.borderRightStyle, 'solid', 'borderRightStyle');
+  assert_equals(style.borderBottomStyle, 'solid', 'borderBottomStyle');
+  assert_equals(style.borderLeftStyle, 'solid', 'borderLeftStyle');
+  assert_equals(style.paddingTop, ref1em, 'paddingTop');
+  assert_equals(style.paddingRight, ref1em, 'paddingRight');
+  assert_equals(style.paddingBottom, ref1em, 'paddingBottom');
+  assert_equals(style.paddingLeft, ref1em, 'paddingLeft');
+  assert_equals(style.backgroundColor, refWhite, 'backgroundColor');
+  assert_equals(style.color, refBlack, 'color');
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html
new file mode 100644
index 0000000000..da8e4d0dc1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+.test { width: 50px; background-color: yellow; }
+.center { text-align: center; }
+.center .test { margin: 0 auto; }
+.left { text-align: left; }
+.left .test { margin-right: auto; }
+.right { text-align: right; }
+.right .test { margin-left: auto; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.left .margin { margin-left: 1em; }
+.right .margin { margin-right: 1em; }
+</style>
+</head>
+<body>
+<!-- Centered tests -->
+<div class=center>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=center>
+<div class="test left">t א</div>
+<div class="test right">t א</div>
+</div>
+
+<div class=left>
+<div class=center>
+<div class=test>t א</div>
+</div>
+</div>
+
+<!-- Left-aligned tests -->
+<div class=left>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class="left rtl">
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=left>
+<div class="test center">t א</div>
+<div class="test right">t א</div>
+</div>
+
+<!-- Right-aligned tests -->
+<div class=right>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class="right rtl">
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=right>
+<div class="test left">t א</div>
+<div class="test center">t א</div>
+</div>
+
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html
new file mode 100644
index 0000000000..b96fbaeda1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<link rel="match" href="div-align-ref.html">
+<style>
+.test { width: 50px; background-color: yellow; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+[align=left] .margin { margin-left: 1em }
+[align=right] .margin { margin-right: 1em }
+</style>
+</head>
+<body>
+<!-- Centered tests -->
+<div align=center>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=center>
+<div class=test align=left>t א</div>
+<div class=test align=right>t א</div>
+</div>
+
+<div align=left>
+<div align=center>
+<div class=test>t א</div>
+</div>
+</div>
+
+<!-- Left-aligned tests -->
+<div align=left>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=left class=rtl>
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=left>
+<div class=test align=center>t א</div>
+<div class=test align=right>t א</div>
+</div>
+
+<!-- Right-aligned tests -->
+<div align=right>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=right class=rtl>
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=right>
+<div class=test align=left>t א</div>
+<div class=test align=center>t א</div>
+</div>
+
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html
new file mode 100644
index 0000000000..a87141be11
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>The figure element</title>
+<link rel=author title=Ms2ger href=ms2ger@gmail.com>
+<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element>
+<style>
+body > div { margin: 1em 40px; }
+</style>
+<div>
+<div>Caption</div>
+Figure
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html
new file mode 100644
index 0000000000..943f38c3e0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>The figure element</title>
+<link rel="match" href="figure-ref.html">
+<link rel=author title=Ms2ger href=ms2ger@gmail.com>
+<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element>
+<figure>
+<figcaption>Caption</figcaption>
+Figure
+</figure>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html
new file mode 100644
index 0000000000..7f6618bb78
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html
@@ -0,0 +1,20 @@
+<!-- quirks -->
+<title>form margin quirk</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+form { writing-mode: vertical-lr; }
+#ref { margin: 0 1em 0 0; }
+</style>
+<form id=form></form>
+<div id=ref></div>
+<script>
+test(() => {
+  const formStyle = getComputedStyle(document.getElementById('form'));
+  const refStyle = getComputedStyle(document.getElementById('ref'));
+  assert_equals(formStyle.marginTop, refStyle.marginTop, 'marginTop');
+  assert_equals(formStyle.marginRight, refStyle.marginRight, 'marginRight');
+  assert_equals(formStyle.marginBottom, refStyle.marginBottom, 'marginBottom');
+  assert_equals(formStyle.marginLeft, refStyle.marginLeft, 'marginLeft');
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html
new file mode 100644
index 0000000000..343e97f504
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="ISO-8859-8">
+<title>default styles for the search element, ISO-8859-8</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+address, blockquote, center, dialog, div, figure, figcaption, footer, form,
+header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
+  display: block;
+}
+
+address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
+legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
+h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
+thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
+[dir=ltr i], [dir=rtl i], [dir=auto i], * /* only apply to the bogus namespace */ {
+  unicode-bidi: isolate;
+}
+
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <search></search>
+</div>
+
+<div id="refs"></div>
+
+<script>
+  test(() => {
+    assert_equals(document.characterSet, "ISO-8859-8")
+  }, "Verify document.characterSet is ISO-8859-8");
+
+  const props = [
+    'display',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'unicode-bidi',
+  ];
+  runUAStyleTests(props);
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html
new file mode 100644
index 0000000000..8c8badd170
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>default styles for the search element</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+address, blockquote, center, dialog, div, figure, figcaption, footer, form,
+header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
+  display: block;
+}
+
+address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
+legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
+h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
+thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
+[dir=ltr i], [dir=rtl i], [dir=auto i] {
+  unicode-bidi: isolate;
+}
+
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <search></search>
+</div>
+
+<div id="refs"></div>
+
+<script>
+  const props = [
+    'display',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'unicode-bidi',
+  ];
+  runUAStyleTests(props);
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html
new file mode 100644
index 0000000000..b6d2449e89
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>CSS Test (Display): <slot> elements should be focusable</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632">
+<link rel="help" href="https://github.com/whatwg/html/issues/1837">
+<link rel="help" href="https://github.com/whatwg/html/pull/9425">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
+<!--
+
+  This requirement is not particularly clear from current specs,
+  so this test is tentative.  See issues above.
+
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+
+<script>
+
+  function do_test(slot_style, description) {
+    test(
+      function() {
+        let host = document.createElement("div");
+        document.body.appendChild(host);
+        var root = host.attachShadow({mode:"open"});
+        root.innerHTML = `
+          <style>
+            slot       { --test-value: slot-not-focused; }
+            slot:focus { --test-value: slot-is-focused; }
+          </style>
+          <slot tabindex="1" style="${slot_style}"></slot>
+        `;
+        let slot = root.querySelector("slot");
+        let cs = getComputedStyle(slot);
+        assert_not_equals(root.activeElement, slot, "precondition");
+        assert_equals(cs.getPropertyValue("--test-value"), "slot-not-focused", "precondition (style)");
+        slot.focus();
+        assert_equals(root.activeElement, slot, "slot is now focused");
+        assert_equals(cs.getPropertyValue("--test-value"), "slot-is-focused", "slot is now focused (style)");
+        document.body.removeChild(host);
+      }, `slot element with ${description} should be focusable`);
+  }
+
+  do_test("display: block", "display: block");
+  do_test("", "default style");
+
+</script>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html
new file mode 100644
index 0000000000..22c2324d02
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>CSS Test (Display): <slot> elements should be tabbable</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632">
+<link rel="help" href="https://github.com/whatwg/html/issues/1837">
+<link rel="help" href="https://github.com/whatwg/html/pull/9425">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
+<!--
+
+  This requirement is not particularly clear from current specs,
+  so this test is tentative.  See issues above.
+
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<body>
+
+<div id="before" tabindex="1" style="height: 10px"></div>
+
+<script>
+
+  function do_test(slot_style, description) {
+    promise_test(
+      async () => {
+        let before = document.getElementById("before");
+        before.focus();
+        let host = document.createElement("div");
+        document.body.appendChild(host);
+        var root = host.attachShadow({mode:"open"});
+        root.innerHTML = `
+          <style>
+            slot       { --test-value: slot-not-focused; }
+            slot:focus { --test-value: slot-is-focused; }
+          </style>
+          <slot tabindex="1" style="${slot_style}"></slot>
+        `;
+        let slot = root.querySelector("slot");
+        let cs = getComputedStyle(slot);
+        assert_equals(document.activeElement, before, "precondition");
+        assert_not_equals(root.activeElement, slot, "precondition");
+        assert_equals(cs.getPropertyValue("--test-value"), "slot-not-focused", "precondition (style)");
+        await test_driver.send_keys(before, "\uE004");
+        assert_equals(root.activeElement, slot, "slot is now focused");
+        assert_equals(cs.getPropertyValue("--test-value"), "slot-is-focused", "slot is now focused (style)");
+        document.body.removeChild(host);
+      }, `slot element with ${description} should be focusable`);
+  }
+
+  do_test("display: block", "display: block");
+  do_test("", "default style");
+
+</script>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html
new file mode 100644
index 0000000000..f9c414c246
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ html { color: red }
+</style>
+<dialog id=dialog-closed></dialog>
+<dialog id=dialog-open open></dialog>
+<dialog id=dialog-modal></dialog>
+<script>
+window.dialogClosed = document.getElementById('dialog-closed');
+window.dialogOpen = document.getElementById('dialog-open');
+window.dialogModal = document.getElementById('dialog-modal');
+dialogModal.showModal();
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html
new file mode 100644
index 0000000000..478b8db485
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="datetime-local">
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html
new file mode 100644
index 0000000000..f8590ee561
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1797139">
+<link rel="match" href="datetime-dynamic-type-change-ref.html">
+<input type="date">
+<script>
+  onload = function() {
+    document.querySelector("input").type = "datetime-local";
+  }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html
new file mode 100644
index 0000000000..1bee40359a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>used value and computed value of 'line-height' on input elements as text entry widgets</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget">
+<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#computed-stylepropertymapreadonly-objects">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  input { line-height: 1px; }
+</style>
+<p><input type=text value=text>
+<p><input type=tel value=tel>
+<p><input type=search value=search>
+<p><input type=url value=url>
+<p><input type=email value=email>
+<p><input type=password value=password></p>
+<script>
+const inputs = document.querySelectorAll('input');
+for (const input of inputs) {
+  test(() => {
+    const usedLineHeight = getComputedStyle(input).lineHeight;
+    assert_not_equals(usedLineHeight, '1px', 'usedLineHeight');
+    assert_not_equals(usedLineHeight, 'normal', 'usedLineHeight');
+  }, `getComputedStyle(<input type=${input.type}>).lineHeight should return a used value that is no smaller than 'normal' (but should not literally be 'normal')`);
+  test(() => {
+    const computedLineHeight = input.computedStyleMap().get('line-height');
+    assert_equals(computedLineHeight.value, 1, 'computedLineHeight.value');
+    assert_equals(computedLineHeight.unit, 'px', 'computedLineHeight.unit');
+  }, `<input type=${input.type}>.computedStyleMap().get('line-height') should not be affected by the used value clamping`);
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html
new file mode 100644
index 0000000000..abf50b8728
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>Reference for 'line-height' smaller than 'normal' on input elements as text entry widgets</title>
+<style>
+  input { font-size: 60px; width: 240px; }
+  .appearance-none { appearance: none; }
+</style>
+<p><input type=text value=text> <input type=text value=text class=appearance-none>
+<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none>
+<p><input type=search value=search> <input type=search value=search class=appearance-none>
+<p><input type=url value=url> <input type=url value=url class=appearance-none>
+<p><input type=email value=email> <input type=email value=email class=appearance-none>
+<p><input type=password value=password> <input type=password value=password class=appearance-none>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html
new file mode 100644
index 0000000000..bfcd3665be
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>'line-height' smaller than 'normal' on input elements as text entry widgets</title>
+<link rel="match" href="input-line-height-ref.html">
+<style>
+  input { font-size: 60px; line-height: 40px; width: 240px; }
+  .appearance-none { appearance: none; }
+</style>
+<p><input type=text value=text> <input type=text value=text class=appearance-none>
+<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none>
+<p><input type=search value=search> <input type=search value=search class=appearance-none>
+<p><input type=url value=url> <input type=url value=url class=appearance-none>
+<p><input type=email value=email> <input type=email value=email class=appearance-none>
+<p><input type=password value=password> <input type=password value=password class=appearance-none>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html
new file mode 100644
index 0000000000..856146dec4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input placeholder=Foo>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html
new file mode 100644
index 0000000000..7af4e65b09
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>line-height has no effect on placeholder</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1714631">
+<link rel="match" href="input-placeholder-line-height-ref.html">
+<style>
+  input::placeholder {
+    line-height: 0;
+  }
+</style>
+<input placeholder=Foo>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html
new file mode 100644
index 0000000000..39ad44cfc0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Placeholder Test: opacity default value</title>
+    <link rel="author" title="Karl Dubost" href="mailto:kdubost@mozilla.com"
+    />
+    <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo"
+    />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <input
+      id="opacity"
+      placeholder="::placeholder should have default opacity: 1"
+    />
+    <script>
+      test(function () {
+        var target = document.getElementById("opacity");
+        assert_equals(getComputedStyle(target, '::placeholder').opacity, "1");
+      }, "Default opacity value is '1'");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html
new file mode 100644
index 0000000000..db21188ee3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<title>default style resets</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */
+#tests, #refs {
+  letter-spacing: 5px;
+  word-spacing: 5px;
+  line-height: 5px;
+  text-transform: uppercase;
+  text-indent: 5px;
+  text-shadow: 0 0 5px transparent;
+  text-align: right;
+}
+</style>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+input, select, button, textarea {
+  letter-spacing: initial;
+  word-spacing: initial;
+  line-height: initial;
+  text-transform: initial;
+  text-indent: initial;
+  text-shadow: initial;
+}
+input, select, textarea {
+  text-align: initial;
+}
+input[type=reset i], input[type=button i], input[type=submit i], button {
+  text-align: center;
+}
+input[type=radio i], input[type=checkbox i], input[type=reset i], input[type=button i],
+input[type=submit i], input[type=color i], input[type=search i], select, button {
+  box-sizing: border-box;
+}
+input, button {
+  display: inline-block;
+}
+input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
+  overflow: clip;
+  overflow-clip-margin: 0;
+}
+/* in spec prose: */ select, textarea, meter, progress {
+  display: inline-block;
+}
+input[type=hidden i] { display: none !important; }
+marquee {
+  text-align: initial;
+}
+table { display: table; box-sizing: border-box; }
+caption { display: table-caption; }
+colgroup, colgroup[hidden] { display: table-column-group; }
+col, col[hidden] { display: table-column; }
+thead, thead[hidden] { display: table-header-group; }
+tbody, tbody[hidden] { display: table-row-group; }
+tfoot, tfoot[hidden] { display: table-footer-group; }
+tr, tr[hidden] { display: table-row; }
+td, th { display: table-cell; }
+table {
+  text-indent: initial;
+}
+</style>
+
+<div id="tests">
+ <input type="hidden">
+ <input type="text">
+ <input type="search">
+ <input type="tel">
+ <input type="url">
+ <input type="email">
+ <input type="password">
+ <input type="date">
+ <input type="month">
+ <input type="week">
+ <input type="time">
+ <input type="datetime-local">
+ <input type="number">
+ <input type="range">
+ <input type="color">
+ <input type="checkbox">
+ <input type="radio">
+ <input type="file">
+ <input type="submit">
+ <input type="image">
+ <input type="reset">
+ <input type="button">
+ <select><optgroup><option></select>
+ <select multiple></select>
+ <optgroup></optgroup>
+ <option></option>
+ <button></button>
+ <textarea></textarea>
+ <table><tbody><tr><td></table>
+ <marquee></marquee>
+</div>
+
+<div id="refs"></div>
+
+<script>
+ const props = ['letter-spacing',
+                'word-spacing',
+                'line-height',
+                'text-transform',
+                'text-indent',
+                'text-shadow',
+                'text-align',
+                'display',
+                'overflow',
+                'overflow-clip-margin',
+                'box-sizing'];
+ runUAStyleTests(props);
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html
new file mode 100644
index 0000000000..47046f6c25
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel=author href="https://mozilla.org" title="Mozilla">
+<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741776">
+<style>
+#a {
+  rotate: 1deg 1 0 44;
+  filter: drop-shadow(81px 6px 0px red);
+}
+</style>
+<script>
+window.onload = function() {
+  document.getElementById("b").appendChild(document.getElementById("c"));
+}
+</script>
+<select id="a" multiple="multiple">
+  <option id="b">x</option>
+</select>
+<div id="c" style="position: fixed; top: 0; left: 0;">
+  x
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html
new file mode 100644
index 0000000000..c59a6e1d98
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Reference for sizing of select elements, with wide vs. empty option selected</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    select {
+      color: transparent;
+      margin: 1px;
+    }
+    div.customBorder > select {
+      /* This class is to let us test select elements *without* native theming
+         (for browsers that have both native and non-native controls): */
+      border: 3px solid black;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+  </div>
+
+  <!-- This is the same as above, but now with a custom border on the
+       select elements: -->
+  <div class="customBorder">
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <select>
+      <option>some wide option</option>
+    </select>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html
new file mode 100644
index 0000000000..e8db3eae1d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for sizing of select elements, with wide vs. empty option selected</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box">
+  <link rel="match" href="select-sizing-001-ref.html">
+  <style>
+    select {
+      color: transparent;
+      margin: 1px;
+    }
+    div.customBorder > select {
+      /* This class is to let us test select elements *without* native theming
+         (for browsers that have both native and non-native controls): */
+      border: 3px solid black;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <!-- Wide thing is 2nd, and not selected: -->
+    <select>
+      <option></option>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <!-- Wide thing is 2nd, and selected: -->
+    <select>
+      <option></option>
+      <option selected>some wide option</option>
+    </select>
+    <br>
+    <!-- Wide thing is 1st, and selected (implicitly): -->
+    <select>
+      <option>some wide option</option>
+      <option></option>
+    </select>
+    <br>
+    <!-- Wide thing is 1st, and not selected: -->
+    <select>
+      <option>some wide option</option>
+      <option selected></option>
+    </select>
+  </div>
+
+  <!-- This is the same as above, but now with a custom border on the
+       select elements: -->
+  <div class="customBorder">
+    <!-- Wide thing is 2nd, and not selected: -->
+    <select>
+      <option></option>
+      <option>some wide option</option>
+    </select>
+    <br>
+    <!-- Wide thing is 2nd, and selected: -->
+    <select>
+      <option></option>
+      <option selected>some wide option</option>
+    </select>
+    <br>
+    <!-- Wide thing is 1st, and selected (implicitly): -->
+    <select>
+      <option>some wide option</option>
+      <option></option>
+    </select>
+    <br>
+    <!-- Wide thing is 1st, and not selected: -->
+    <select>
+      <option>some wide option</option>
+      <option selected></option>
+    </select>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html
new file mode 100644
index 0000000000..5dc26a78db
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <span>THIS TEXT SHOULD BE UPPER-CASE.</span><br />
+
+  <input type="text" value="this text should be lower-case."><br />
+
+  <select>
+    <option>this text should be lower-case.</option>
+  </select><br />
+  <select multiple>
+    <option>this text should be lower-case.</option>
+  </select><br />
+  <select multiple>
+    <optgroup label="this text should be lower-case.">
+      <option>this text should be lower-case.</option>
+    </optgroup>
+  </select><br />
+
+  <select>
+    <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+  </select><br />
+  <select multiple>
+    <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+  </select><br />
+  <select multiple>
+    <optgroup label="THIS TEXT SHOULD BE UPPER-CASE.">
+      <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+    </optgroup>
+  </select><br />
+
+  <button>this text should be lower-case.</button><br />
+
+  <textarea>this text should be lower-case.</textarea><br />
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html
new file mode 100644
index 0000000000..f57f092982
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="match" href="text-transform-ref.html">
+</head>
+<body style="text-transform: uppercase;">
+  <span>this text should be upper-case.</span><br />
+
+  <input type="text" value="this text should be lower-case."><br />
+
+  <select>
+    <option>this text should be lower-case.</option>
+  </select><br />
+  <select multiple>
+    <option>this text should be lower-case.</option>
+  </select><br />
+  <select multiple>
+    <optgroup label="this text should be lower-case.">
+      <option>this text should be lower-case.</option>
+    </optgroup>
+  </select><br />
+
+  <select style="text-transform: uppercase;">
+    <option>this text should be upper-case.</option>
+  </select><br />
+  <select multiple style="text-transform: uppercase;">
+    <option>this text should be upper-case.</option>
+  </select><br />
+  <select multiple style="text-transform: uppercase;">
+    <optgroup label="this text should be upper-case.">
+      <option>this text should be upper-case.</option>
+    </optgroup>
+  </select><br />
+
+  <button>this text should be lower-case.</button><br />
+
+  <textarea>this text should be lower-case.</textarea><br />
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html
new file mode 100644
index 0000000000..8093efe5e8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<title>Reference: toggle 'display' test</title>
+
+<div id="tests">
+ <input type="hidden">
+ <input type="text">
+ <input type="text" value="a">
+ <input type="search">
+ <input type="search" value="a">
+ <input type="tel">
+ <input type="tel" value="123456789">
+ <input type="url">
+ <input type="url" value="http://a">
+ <input type="email">
+ <input type="email" value="a">
+ <input type="password">
+ <input type="password" value="a">
+ <input type="date">
+ <input type="month">
+ <input type="week">
+ <input type="time">
+ <input type="datetime-local">
+ <input type="number">
+ <input type="range">
+ <input type="color">
+ <input type="checkbox">
+ <input type="radio">
+ <input type="file">
+ <input type="submit">
+ <input type="image">
+ <input type="reset">
+ <input type="button">
+ <input type="button" value="a">
+ <select><optgroup><option></select>
+ <select><optgroup><option>a</select>
+ <select multiple></select>
+ <select multiple><optgroup>a</optgroup><option>b</option></select>
+ <optgroup></optgroup>
+ <option></option>
+ <button></button>
+ <button>a</button>
+ <textarea></textarea>
+ <textarea>a</textarea>
+</div>
+
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html
new file mode 100644
index 0000000000..127679b2ad
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>toggle 'display' test</title>
+<meta charset="utf-8">
+<link rel="match" href="toggle-display-ref.html">
+
+<div id="tests">
+ <input type="hidden">
+ <input type="text">
+ <input type="text" value="a">
+ <input type="search">
+ <input type="search" value="a">
+ <input type="tel">
+ <input type="tel" value="123456789">
+ <input type="url">
+ <input type="url" value="http://a">
+ <input type="email">
+ <input type="email" value="a">
+ <input type="password">
+ <input type="password" value="a">
+ <input type="date">
+ <input type="month">
+ <input type="week">
+ <input type="time">
+ <input type="datetime-local">
+ <input type="number">
+ <input type="range">
+ <input type="color">
+ <input type="checkbox">
+ <input type="radio">
+ <input type="file">
+ <input type="submit">
+ <input type="image">
+ <input type="reset">
+ <input type="button">
+ <input type="button" value="a">
+ <select><optgroup><option></select>
+ <select><optgroup><option>a</select>
+ <select multiple></select>
+ <select multiple><optgroup>a</optgroup><option>b</option></select>
+ <optgroup></optgroup>
+ <option></option>
+ <button></button>
+ <button>a</button>
+ <textarea></textarea>
+ <textarea>a</textarea>
+</div>
+
+<script>
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      let tests = document.querySelector('#tests');
+      tests.style.display = 'none';
+      requestAnimationFrame(() => {
+        tests.style.display = '';
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html
new file mode 100644
index 0000000000..e1bcf508e5
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<link rel=help href="https://html.spec.whatwg.org/#hidden-elements">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div hidden></div>
+<embed hidden>
+<embed hidden=until-found>
+<script>
+const kNotHiddenElementLocalNames = [
+  "source", "track",
+];
+
+const kHiddenElementLocalNames = [
+  "area", "base", "basefont", "datalist", "head", "link", "meta", "noembed",
+  "noframes", "param", "rp", "script", "style", "template", "title",
+];
+
+for (let name of kNotHiddenElementLocalNames) {
+  test(function() {
+    let element = document.createElement(name);
+    document.body.appendChild(element);
+    assert_equals(getComputedStyle(element).display, "inline");
+  }, `${name} should not be hidden`);
+}
+
+for (let name of kHiddenElementLocalNames) {
+  test(function() {
+    let element = document.createElement(name);
+    document.body.appendChild(element);
+    assert_equals(getComputedStyle(element).display, "none");
+  }, `${name} should be hidden`);
+}
+
+test(function() {
+  assert_equals(getComputedStyle(document.querySelector("div[hidden]")).display, "none");
+}, `div[hidden] element should be hidden`);
+
+test(function() {
+  const el = document.querySelector("embed[hidden='']");
+  assert_equals(getComputedStyle(el).display, "inline");
+  assert_equals(getComputedStyle(el).width, "0px");
+  assert_equals(getComputedStyle(el).height, "0px");
+}, `embed[hidden=''] element should be inline 0x0`);
+
+test(function() {
+  const el = document.querySelector("embed[hidden='until-found']");
+  assert_equals(getComputedStyle(el).display, "inline");
+  assert_equals(getComputedStyle(el).width, "0px");
+  assert_equals(getComputedStyle(el).height, "0px");
+  assert_equals(getComputedStyle(el).contentVisibility, "visible");
+}, `embed[hidden='until-found'] element should be inline 0x0`);
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html
new file mode 100644
index 0000000000..6d79efc384
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<ol><div><li>A</div></ol>
+<ol><div><li>A</div> <li>B</ol>
+<ol><div><li>A</div><div><li>B</div></ol>
+<ol reversed><div><li>A</div> <li>B</ol>
+<ol><div style=display:list-item>A</div><li>B</ol>
+<ol reversed><div style=display:list-item>A</div><li>B</ol>
+<ol reversed>
+  <div><li>Two</li></div>
+  <li>One</li>
+  <li>Zero</li>
+</ol>
+<ol reversed>
+  <li>Three</li>
+  <li style="display: none"></li>
+  <li>Two</li>
+</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html
new file mode 100644
index 0000000000..710b39ceca
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<dir>
+  <li>A
+</dir>
+<dir>
+  <li>B
+</dir>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html
new file mode 100644
index 0000000000..d1f0ae3fe3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>&lt;dir&gt; doesn't map the type and start attributes to CSS</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1831863">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<link rel="match" href="dir-type-ref.html">
+<dir type="square">
+  <li>A
+</dir>
+<dir type="decimal" start="5">
+  <li>B
+</dir>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html
new file mode 100644
index 0000000000..0fc01f275c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>text-align: match-parent on li</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<ul dir=rtl><li dir=ltr></li></ul>
+<ul dir=ltr><li dir=rtl></li></ul>
+<script>
+  test(() => {
+    const li = document.querySelector('li[dir=ltr]');
+    assert_equals(getComputedStyle(li).textAlign, 'right');
+  }, '<ul dir=rtl><li dir=ltr>');
+
+  test(() => {
+    const li = document.querySelector('li[dir=rtl]');
+    assert_equals(getComputedStyle(li).textAlign, 'left');
+  }, '<ul dir=ltr><li dir=rtl>');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html
new file mode 100644
index 0000000000..0de7ff329c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: supported types</title>
+<style>
+  .decimal { list-style-type: decimal; }
+  .lower-alpha { list-style-type: lower-alpha; }
+  .upper-alpha { list-style-type: upper-alpha; }
+  .lower-roman { list-style-type: lower-roman; }
+  .upper-roman { list-style-type: upper-roman; }
+  .disc { list-style-type: disc; }
+  .circle { list-style-type: circle; }
+  .square { list-style-type: square; }
+  .none { list-style-type: none; }
+</style>
+<li class="decimal">first item</li>
+<li class="lower-alpha">second item</li>
+<li class="upper-alpha">third item</li>
+<li class="lower-roman">fourth item</li>
+<li class="upper-roman">fifth item</li>
+<li class="disc">sixth item</li>
+<li class="circle">seventh item</li>
+<li class="square">eighth item</li>
+<li class="none">ninth item</li>
+<ol>
+  <li class="decimal">first ordered item</li>
+  <li class="lower-alpha">second ordered item</li>
+  <li class="upper-alpha">third ordered item</li>
+  <li class="lower-roman">fourth ordered item</li>
+  <li class="upper-roman">fifth ordered item</li>
+  <li class="disc">sixth ordered item</li>
+  <li class="circle">seventh ordered item</li>
+  <li class="square">eighth ordered item</li>
+  <li class="none">ninth ordered item</li>
+</ol>
+<ul>
+  <li class="decimal">first unordered item</li>
+  <li class="lower-alpha">second unordered item</li>
+  <li class="upper-alpha">third unordered item</li>
+  <li class="lower-roman">fourth unordered item</li>
+  <li class="upper-roman">fifth unordered item</li>
+  <li class="disc">sixth unordered item</li>
+  <li class="circle">seventh unordered item</li>
+  <li class="square">eighth unordered item</li>
+  <li class="none">ninth unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml
new file mode 100644
index 0000000000..7a7640e03f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>li@type: supported types</title>
+<link rel="match" href="li-type-supported-ref.html"/>
+</head>
+<body>
+<li type="1">first item</li>
+<li type="a">second item</li>
+<li type="A">third item</li>
+<li type="i">fourth item</li>
+<li type="I">fifth item</li>
+<li type="disc">sixth item</li>
+<li type="circle">seventh item</li>
+<li type="square">eighth item</li>
+<li type="none">ninth item</li>
+<ol>
+  <li type="1">first ordered item</li>
+  <li type="a">second ordered item</li>
+  <li type="A">third ordered item</li>
+  <li type="i">fourth ordered item</li>
+  <li type="I">fifth ordered item</li>
+  <li type="disc">sixth ordered item</li>
+  <li type="circle">seventh ordered item</li>
+  <li type="square">eighth ordered item</li>
+  <li type="none">ninth ordered item</li>
+</ol>
+<ul>
+  <li type="1">first unordered item</li>
+  <li type="a">second unordered item</li>
+  <li type="A">third unordered item</li>
+  <li type="i">fourth unordered item</li>
+  <li type="I">fifth unordered item</li>
+  <li type="disc">sixth unordered item</li>
+  <li type="circle">seventh unordered item</li>
+  <li type="square">eighth unordered item</li>
+  <li type="none">ninth unordered item</li>
+</ul>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html
new file mode 100644
index 0000000000..ddd9024c11
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: supported types</title>
+<link rel=match href=li-type-supported-ref.html>
+<li type=1>first item</li>
+<li type=a>second item</li>
+<li type=A>third item</li>
+<li type=i>fourth item</li>
+<li type=I>fifth item</li>
+<li type=disc>sixth item</li>
+<li type=circle>seventh item</li>
+<li type=square>eighth item</li>
+<li type=none>ninth item</li>
+<ol>
+  <li type=1>first ordered item</li>
+  <li type=a>second ordered item</li>
+  <li type=A>third ordered item</li>
+  <li type=i>fourth ordered item</li>
+  <li type=I>fifth ordered item</li>
+  <li type=disc>sixth ordered item</li>
+  <li type=circle>seventh ordered item</li>
+  <li type=square>eighth ordered item</li>
+  <li type=none>ninth ordered item</li>
+</ol>
+<ul>
+  <li type=1>first unordered item</li>
+  <li type=a>second unordered item</li>
+  <li type=A>third unordered item</li>
+  <li type=i>fourth unordered item</li>
+  <li type=I>fifth unordered item</li>
+  <li type=disc>sixth unordered item</li>
+  <li type=circle>seventh unordered item</li>
+  <li type=square>eighth unordered item</li>
+  <li type=none>ninth unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html
new file mode 100644
index 0000000000..81babe7888
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: unsupported type: lower-alpha</title>
+<link rel=match href=li-type-unsupported-ref.html>
+<li type=lower-alpha>first item</li>
+<li type=LOWER-ALPHA>second item</li>
+<ol>
+  <li type=lower-alpha>first ordered item</li>
+  <li type=LOWER-ALPHA>second ordered item</li>
+</ol>
+<ul>
+  <li type=lower-alpha>first unordered item</li>
+  <li type=LOWER-ALPHA>second unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html
new file mode 100644
index 0000000000..e01cfdb72d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: unsupported type: lower-roman</title>
+<link rel=match href=li-type-unsupported-ref.html>
+<li type=lower-roman>first item</li>
+<li type=LOWER-ROMAN>second item</li>
+<ol>
+  <li type=lower-roman>first ordered item</li>
+  <li type=LOWER-ROMAN>second ordered item</li>
+</ol>
+<ul>
+  <li type=lower-roman>first unordered item</li>
+  <li type=LOWER-ROMAN>second unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html
new file mode 100644
index 0000000000..4fbc5aca97
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: unsupported types</title>
+<li>first item</li>
+<li>second item</li>
+<ol>
+  <li>first ordered item</li>
+  <li>second ordered item</li>
+</ol>
+<ul>
+  <li>first unordered item</li>
+  <li>second unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html
new file mode 100644
index 0000000000..2efb65dbda
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: unsupported type: upper-alpha</title>
+<link rel=match href=li-type-unsupported-ref.html>
+<li type=upper-alpha>first item</li>
+<li type=UPPER-ALPHA>second item</li>
+<ol>
+  <li type=upper-alpha>first ordered item</li>
+  <li type=UPPER-ALPHA>second ordered item</li>
+</ol>
+<ul>
+  <li type=upper-alpha>first unordered item</li>
+  <li type=UPPER-ALPHA>second unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html
new file mode 100644
index 0000000000..bd8dafc9c2
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>li@type: unsupported type: upper-roman</title>
+<link rel=match href=li-type-unsupported-ref.html>
+<li type=upper-roman>first item</li>
+<li type=UPPER-ROMAN>second item</li>
+<ol>
+  <li type=upper-roman>first ordered item</li>
+  <li type=UPPER-ROMAN>second ordered item</li>
+</ol>
+<ul>
+  <li type=upper-roman>first unordered item</li>
+  <li type=UPPER-ROMAN>second unordered item</li>
+</ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html
new file mode 100644
index 0000000000..396055f73b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#lists:presentational-hints">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case">
+<meta name="assert" content="ul@type + li@type values are ASCII case-insensitive">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<ul type="circle"><li type="disc"></ul>
+<ul type="circle"><li type="DiSc"></ul>
+<ul type="circle"><li type="diſc"></ul>
+<ul type="circle"><li type="square"></ul>
+<ul type="circle"><li type="SqUaRe"></ul>
+<ul type="circle"><li type="ſquare"></ul>
+<script>
+const li = document.querySelectorAll("li");
+
+test(() => {
+  assert_equals(getComputedStyle(li[0]).getPropertyValue("list-style-type"),
+  	"disc", "lowercase valid");
+  assert_equals(getComputedStyle(li[1]).getPropertyValue("list-style-type"),
+  	"disc", "mixed case valid");
+  assert_equals(getComputedStyle(li[2]).getPropertyValue("list-style-type"),
+  	"circle", "non-ASCII invalid");
+}, "keyword disc");
+
+test(() => {
+  assert_equals(getComputedStyle(li[3]).getPropertyValue("list-style-type"),
+  	"square", "lowercase valid");
+  assert_equals(getComputedStyle(li[4]).getPropertyValue("list-style-type"),
+  	"square", "mixed case valid");
+  assert_equals(getComputedStyle(li[5]).getPropertyValue("list-style-type"),
+  	"circle", "non-ASCII invalid");
+}, "keyword square");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html
new file mode 100644
index 0000000000..a5f011cecc
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<title>default styles and preshints for ol, ul, menu, li, dir, dl, dt, dd</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+dir, dd, dl, dt, menu, ol, ul { display: block; }
+li { display: list-item; text-align: match-parent; }
+
+dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }
+
+:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
+  margin-block-start: 0; margin-block-end: 0;
+}
+
+dd { margin-inline-start: 40px; }
+dir, menu, ol, ul { padding-inline-start: 40px; }
+
+ol, ul, menu { counter-reset: list-item; }
+ol { list-style-type: decimal; }
+
+dir, menu, ul {
+  list-style-type: disc;
+}
+:is(dir, menu, ol, ul) :is(dir, menu, ul) {
+  list-style-type: circle;
+}
+:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
+  list-style-type: square;
+}
+
+/* preshints */
+ol[type="1"], li[type="1"] { list-style-type: decimal; }
+/* use classes due to lack of support for "s" annotation */
+ol[class=type-a], li[class=type-a] { list-style-type: lower-alpha; }
+ol[class=type-A], li[class=type-A] { list-style-type: upper-alpha; }
+ol[class=type-i], li[class=type-i] { list-style-type: lower-roman; }
+ol[class=type-I], li[class=type-I] { list-style-type: upper-roman; }
+ul[type=none i], li[type=none i] { list-style-type: none; }
+ul[type=disc i], li[type=disc i] { list-style-type: disc; }
+ul[type=circle i], li[type=circle i] { list-style-type: circle; }
+ul[type=square i], li[type=square i] { list-style-type: square; }
+
+li[value="10"], li[value="10xyz"], li[value="10e10"] { counter-set: list-item 10; }
+ol[start="10"], ol[start="10xyz"], ol[start="10e10"] { counter-reset: list-item 9; }
+ol[reversed] { counter-reset: reversed(list-item); }
+ol[reversed][start="20"], ol[reversed][start="20xyz"], ol[reversed][start="20e10"] { counter-reset: reversed(list-item) 21; }
+
+/* dir="" */
+[dir=ltr] { direction: ltr; }
+[dir=rtl] { direction: rtl; }
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <li></li>
+  <dir>
+   <li></li>
+  </dir>
+  <dt></dt>
+  <dd></dd>
+  <dl>
+   <dt></dt>
+   <dd></dd>
+  </dl>
+  <menu>
+   <li></li>
+  </menu>
+  <ol>
+   <li></li>
+  </ol>
+  <ul>
+   <li></li>
+  </ul>
+  <dir data-skip><dir></dir></dir>
+  <dir data-skip><menu></menu></dir>
+  <dir data-skip><ul></ul></dir>
+  <menu data-skip><dir></dir></menu>
+  <menu data-skip><menu></menu></menu>
+  <menu data-skip><ul></ul></menu>
+  <ol data-skip><dir></dir></ol>
+  <ol data-skip><menu></menu></ol>
+  <ol data-skip><ul></ul></ol>
+  <ul data-skip><dir></dir></ul>
+  <ul data-skip><menu></menu></ul>
+  <ul data-skip><ul></ul></ul>
+
+  <dir data-skip><dir data-skip><dir></dir></dir></dir>
+  <dir data-skip><dir data-skip><menu></menu></dir></dir>
+  <dir data-skip><dir data-skip><ul></ul></dir></dir>
+  <dir data-skip><menu data-skip><dir></dir></menu></dir>
+  <dir data-skip><menu data-skip><menu></menu></menu></dir>
+  <dir data-skip><menu data-skip><ul></ul></menu></dir>
+  <dir data-skip><ol data-skip><dir></dir></ol></dir>
+  <dir data-skip><ol data-skip><menu></menu></ol></dir>
+  <dir data-skip><ol data-skip><ul></ul></ol></dir>
+  <dir data-skip><ul data-skip><dir></dir></ul></dir>
+  <dir data-skip><ul data-skip><menu></menu></ul></dir>
+  <dir data-skip><ul data-skip><ul></ul></ul></dir>
+
+  <menu data-skip><dir data-skip><dir></dir></dir></menu>
+  <menu data-skip><dir data-skip><menu></menu></dir></menu>
+  <menu data-skip><dir data-skip><ul></ul></dir></menu>
+  <menu data-skip><menu data-skip><dir></dir></menu></menu>
+  <menu data-skip><menu data-skip><menu></menu></menu></menu>
+  <menu data-skip><menu data-skip><ul></ul></menu></menu>
+  <menu data-skip><ol data-skip><dir></dir></ol></menu>
+  <menu data-skip><ol data-skip><menu></menu></ol></menu>
+  <menu data-skip><ol data-skip><ul></ul></ol></menu>
+  <menu data-skip><ul data-skip><dir></dir></ul></menu>
+  <menu data-skip><ul data-skip><menu></menu></ul></menu>
+  <menu data-skip><ul data-skip><ul></ul></ul></menu>
+
+  <ol data-skip><dir data-skip><dir></dir></dir></ol>
+  <ol data-skip><dir data-skip><menu></menu></dir></ol>
+  <ol data-skip><dir data-skip><ul></ul></dir></ol>
+  <ol data-skip><menu data-skip><dir></dir></menu></ol>
+  <ol data-skip><menu data-skip><menu></menu></menu></ol>
+  <ol data-skip><menu data-skip><ul></ul></menu></ol>
+  <ol data-skip><ol data-skip><dir></dir></ol></ol>
+  <ol data-skip><ol data-skip><menu></menu></ol></ol>
+  <ol data-skip><ol data-skip><ul></ul></ol></ol>
+  <ol data-skip><ul data-skip><dir></dir></ul></ol>
+  <ol data-skip><ul data-skip><menu></menu></ul></ol>
+  <ol data-skip><ul data-skip><ul></ul></ul></ol>
+
+  <ul data-skip><dir data-skip><dir></dir></dir></ul>
+  <ul data-skip><dir data-skip><menu></menu></dir></ul>
+  <ul data-skip><dir data-skip><ul></ul></dir></ul>
+  <ul data-skip><menu data-skip><dir></dir></menu></ul>
+  <ul data-skip><menu data-skip><menu></menu></menu></ul>
+  <ul data-skip><menu data-skip><ul></ul></menu></ul>
+  <ul data-skip><ol data-skip><dir></dir></ol></ul>
+  <ul data-skip><ol data-skip><menu></menu></ol></ul>
+  <ul data-skip><ol data-skip><ul></ul></ol></ul>
+  <ul data-skip><ul data-skip><dir></dir></ul></ul>
+  <ul data-skip><ul data-skip><menu></menu></ul></ul>
+  <ul data-skip><ul data-skip><ul></ul></ul></ul>
+
+  <ol type="1"></ol>
+  <ul type="1"></ul>
+  <li type="1"></li>
+  <ol type="a" class="type-a"></ol>
+  <ul type="a" class="type-a"></ul>
+  <li type="a" class="type-a"></li>
+  <ol type="A" class="type-A"></ol>
+  <ul type="A" class="type-A"></ul>
+  <li type="A" class="type-A"></li>
+  <ol type="i" class="type-i"></ol>
+  <ul type="i" class="type-i"></ul>
+  <li type="i" class="type-i"></li>
+  <ol type="I" class="type-I"></ol>
+  <ul type="I" class="type-I"></ul>
+  <li type="I" class="type-I"></li>
+  <ol type="none"></ol>
+  <ul type="none"></ul>
+  <li type="none"></li>
+  <ol type="NONE"></ol>
+  <ul type="NONE"></ul>
+  <li type="NONE"></li>
+  <ol type="disc"></ol>
+  <ul type="disc"></ul>
+  <li type="disc"></li>
+  <ol type="DISC"></ol>
+  <ul type="DISC"></ul>
+  <li type="DISC"></li>
+  <ol type="circle"></ol>
+  <ul type="circle"></ul>
+  <li type="circle"></li>
+  <ol type="CIRCLE"></ol>
+  <ul type="CIRCLE"></ul>
+  <li type="CIRCLE"></li>
+  <ol type="square"></ol>
+  <ul type="square"></ul>
+  <li type="square"></li>
+  <ol type="SQUARE"></ol>
+  <ul type="SQUARE"></ul>
+  <li type="SQUARE"></li>
+
+  <ol>
+    <li value="10"></li>
+    <li value="10xyz"></li>
+    <li value="10e10"></li>
+    <li value="xyz"></li>
+  </ol>
+
+  <ol start="10"><li></li></ol>
+  <ol start="10xyz"><li></li></ol>
+  <ol start="10e10"><li></li></ol>
+  <ol start="xyz"><li></li></ol>
+  <ol reversed><li></li></ol>
+  <ol reversed start="20"><li></li></ol>
+  <ol reversed start="20xyz"><li></li></ol>
+  <ol reversed start="20e10"><li></li></ol>
+  <ol reversed start="xyz"><li></li></ol>
+
+  <ul data-skip dir="rtl"><li dir="ltr"></li></ul>
+  <ul data-skip dir="ltr"><li dir="rtl"></li></ul>
+
+</div>
+
+<div id="refs"></div>
+
+<script>
+  const props = [
+    'display',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'list-style-type',
+    'counter-set',
+    'counter-reset',
+    'counter-increment',
+    'text-align',
+  ];
+  runUAStyleTests(props);
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html
new file mode 100644
index 0000000000..f9fce33313
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Reference for: display: contents; on &lt;ol ...></title>
+<style>
+ li { margin-left: 40px; list-style-type: decimal; }
+</style>
+<li value="1">The list item marker on this line should be "1."</li>
+<li value="2">The list item marker on this line should be "2."</li>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html
new file mode 100644
index 0000000000..226570e935
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>display: contents; on &lt;ol start></title>
+<meta rel=match href=ol-display-contents-ref.html>
+<ol start=5 style="display: contents">
+  <li style="margin-left: 40px">The list item marker on this line should be "1."</li>
+  <li style="margin-left: 40px">The list item marker on this line should be "2."</li>
+</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html
new file mode 100644
index 0000000000..dd6fff0fd8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>display: contents; on &lt;ol start reversed></title>
+<meta rel=match href=ol-display-contents-ref.html>
+<ol start=5 reversed style="display: contents">
+  <li style="margin-left: 40px">The list item marker on this line should be "1."</li>
+  <li style="margin-left: 40px">The list item marker on this line should be "2."</li>
+</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html
new file mode 100644
index 0000000000..fb61db3261
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: supported types</title>
+<style>
+.decimal {
+  list-style-type: decimal;
+}
+.lower-alpha {
+  list-style-type: lower-alpha;
+}
+.upper-alpha {
+  list-style-type: upper-alpha;
+}
+.lower-roman {
+  list-style-type: lower-roman;
+}
+.upper-roman {
+  list-style-type: upper-roman;
+}
+</style>
+<ol class=decimal><li>1<li>2</ol>
+<ol class=lower-alpha><li>a<li>b</ol>
+<ol class=upper-alpha><li>A<li>B</ol>
+<ol class=lower-roman><li>i<li>ii</ol>
+<ol class=upper-roman><li>I<li>II</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml
new file mode 100644
index 0000000000..d7b949dab1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>ol@type: supported types</title>
+<link rel="match" href="ol-type-supported-ref.html"/>
+</head>
+<body>
+<ol type="1"><li>1</li><li>2</li></ol>
+<ol type="a"><li>a</li><li>b</li></ol>
+<ol type="A"><li>A</li><li>B</li></ol>
+<ol type="i"><li>i</li><li>ii</li></ol>
+<ol type="I"><li>I</li><li>II</li></ol>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html
new file mode 100644
index 0000000000..86ed3be383
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: supported types</title>
+<link rel=match href=ol-type-supported-ref.html>
+<ol type=1><li>1<li>2</ol>
+<ol type=a><li>a<li>b</ol>
+<ol type=A><li>A<li>B</ol>
+<ol type=i><li>i<li>ii</ol>
+<ol type=I><li>I<li>II</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html
new file mode 100644
index 0000000000..f3c52e43bd
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: circle</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=circle><li>1<li>2</ol>
+<ol type=CIRCLE><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html
new file mode 100644
index 0000000000..a0f41f3b1c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: disc</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=disc><li>1<li>2</ol>
+<ol type=DISC><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html
new file mode 100644
index 0000000000..6c1198ef50
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: invalid</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=disk><li>1<li>2</ol>
+<ol type=DISK><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html
new file mode 100644
index 0000000000..2fd656100f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: lower-alpha</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=lower-alpha><li>1<li>2</ol>
+<ol type=LOWER-ALPHA><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html
new file mode 100644
index 0000000000..49f5b2888e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: lower-roman</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=lower-roman><li>1<li>2</ol>
+<ol type=LOWER-ROMAN><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html
new file mode 100644
index 0000000000..bf800e1b11
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: none</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=none><li>1<li>2</ol>
+<ol type=NONE><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html
new file mode 100644
index 0000000000..530f8ef6c7
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported types</title>
+<ol><li>1<li>2</ol>
+<ol><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html
new file mode 100644
index 0000000000..10a573687b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: round</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=round><li>1<li>2</ol>
+<ol type=ROUND><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html
new file mode 100644
index 0000000000..b3e8937fb3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: square</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=square><li>1<li>2</ol>
+<ol type=SQUARE><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html
new file mode 100644
index 0000000000..6a1ff97dbf
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: upper-latin</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=upper-alpha><li>1<li>2</ol>
+<ol type=UPPER-ALPHA><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html
new file mode 100644
index 0000000000..04cf451c67
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ol@type: unsupported type: upper-roman</title>
+<link rel=match href=ol-type-unsupported-ref.html>
+<ol type=upper-roman><li>1<li>2</ol>
+<ol type=UPPER-ROMAN><li>1<li>2</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html
new file mode 100644
index 0000000000..59a0400cc8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: supported types</title>
+<style>
+.disc {
+  list-style-type: disc;
+}
+.circle {
+  list-style-type: circle;
+}
+.square {
+  list-style-type: square;
+}
+.none {
+  list-style-type: none;
+}
+</style>
+<ul class="disc"><li>first disc</li><li>second disc</li></ul>
+<ul class="circle"><li>first circle</li><li>second circle</li></ul>
+<ul class="square"><li>first square</li><li>second square</li></ul>
+<ul class="none"><li>first none</li><li>second none</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml
new file mode 100644
index 0000000000..a2e5e0bbf6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>ul@type: supported types</title>
+<link rel="match" href="ul-type-supported-ref.html"/>
+</head>
+<body>
+<ul type="disc"><li>first disc</li><li>second disc</li></ul>
+<ul type="circle"><li>first circle</li><li>second circle</li></ul>
+<ul type="square"><li>first square</li><li>second square</li></ul>
+<ul type="none"><li>first none</li><li>second none</li></ul>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html
new file mode 100644
index 0000000000..c2449d7acd
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: supported types</title>
+<link rel=match href=ul-type-supported-ref.html>
+<ul type=disc><li>first disc</li><li>second disc</li></ul>
+<ul type=circle><li>first circle</li><li>second circle</li></ul>
+<ul type=square><li>first square</li><li>second square</li></ul>
+<ul type=none><li>first none</li><li>second none</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html
new file mode 100644
index 0000000000..0fb0e14abb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: decimal</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=decimal><li>first item</li><li>second item</li></ul>
+<ul type=DECIMAL><li>first item</li><li>second item</li></ul>
+<ul type=1><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html
new file mode 100644
index 0000000000..c6ee14eac8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: invalid</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=disk><li>first item</li><li>second item</li></ul>
+<ul type=DISK><li>first item</li><li>second item</li></ul>
+<ul type=x><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html
new file mode 100644
index 0000000000..f31cc247ca
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: lower-alpha</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=lower-alpha><li>first item</li><li>second item</li></ul>
+<ul type=LOWER-ALPHA><li>first item</li><li>second item</li></ul>
+<ul type=a><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html
new file mode 100644
index 0000000000..bd86861c9d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: lower-roman</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=lower-roman><li>first item</li><li>second item</li></ul>
+<ul type=LOWER-ROMAN><li>first item</li><li>second item</li></ul>
+<ul type=i><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html
new file mode 100644
index 0000000000..c53fe947f2
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported types</title>
+<ul><li>first item</li><li>second item</li></ul>
+<ul><li>first item</li><li>second item</li></ul>
+<ul><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html
new file mode 100644
index 0000000000..3f880f1dcd
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: upper-alpha</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=upper-alpha><li>first item</li><li>second item</li></ul>
+<ul type=UPPER-ALPHA><li>first item</li><li>second item</li></ul>
+<ul type=A><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html
new file mode 100644
index 0000000000..d7f1295d63
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>ul@type: unsupported type: upper-roman</title>
+<link rel=match href=ul-type-unsupported-ref.html>
+<ul type=upper-roman><li>first item</li><li>second item</li></ul>
+<ul type=UPPER-ROMAN><li>first item</li><li>second item</li></ul>
+<ul type=I><li>first item</li><li>second item</li></ul>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js
new file mode 100644
index 0000000000..496bae3a10
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js
@@ -0,0 +1,7 @@
+test(function() {
+  var testStyle = getComputedStyle(document.getElementById('test'));
+  var refStyle = getComputedStyle(document.getElementById('ref'));
+  for (var prop in testStyle) {
+    assert_equals(testStyle[prop], refStyle[prop], prop);
+  }
+});
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html
new file mode 100644
index 0000000000..905d7bc7cb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html
@@ -0,0 +1,7 @@
+<title>multicol default styles (quirks mode)</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#multicol">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<multicol id=test></multicol>
+<asdfasdf id=ref></asdfasdf>
+<script src="compare-computed-style.js"></script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html
new file mode 100644
index 0000000000..999cf42c76
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>multicol default styles (standards mode)</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#multicol">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<multicol id=test></multicol>
+<asdfasdf id=ref></asdfasdf>
+<script src="compare-computed-style.js"></script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html
new file mode 100644
index 0000000000..d814c0a076
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel=stylesheet href=/fonts/ahem.css>
+<link rel=match href=/css/reference/pass_if_square_96px_black.html>
+<link rel=help href=https://github.com/whatwg/html/issues/2291>
+<link rel=help href=https://drafts.csswg.org/css-content/#content-property>
+<style>
+.test, .ref {
+  font: 16px/1 Ahem;
+  margin: 0;
+}
+.test br {
+  /* This should have no affect. Per css-content, <string> when applied to elements. */
+  content: "";
+}
+</style>
+<p>Test passes if there is a square below.</p>
+<p class=test>xxxxxx<br>xxxxxx<br>xxxxxx</p>
+<p class=ref>xxxxxx<br>xxxxxx<br>xxxxxx</p>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html
new file mode 100644
index 0000000000..2ac6f44649
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<link rel=match href=001-ref.html>
+<title>The font element text decoration color quirk, 001, almost standards mode</title>
+<style>[id] > * { color:fuchsia }</style>
+<div>Quirks should not apply:</div>
+<div><u>foo <font style="color:fuchsia">style</font> bar</u></div>
+<div><u>foo <font color="fuchsia">color</font> bar</u></div>
+<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div>
+<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div>
+<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div>
+<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div>
+<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div>
+<div><s>foo <font color="fuchsia">line-through</font> bar</s></div>
+<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div>
+<div><u>foo <span style="color:fuchsia">span</span> bar</u></div>
+<div><u id="no-namespace">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('no-namespace');
+a.textContent = 'foo ';
+var elm = document.createElementNS('', 'font');
+elm.textContent = 'no-namespace font element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
+<div><u id="uppercase">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('uppercase');
+a.textContent = 'foo ';
+var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT');
+elm.textContent = 'uppercase FONT element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html
new file mode 100644
index 0000000000..846cb6e8af
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html
@@ -0,0 +1,32 @@
+<link rel=match href=001-ref.html>
+<title>The font element text decoration color quirk, 001, quirks mode</title>
+<style>[id] > * { color:fuchsia }</style>
+<div>Quirks should not apply:</div>
+<div><u>foo <font style="color:fuchsia">style</font> bar</u></div>
+<div><u>foo <font color="fuchsia">color</font> bar</u></div>
+<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div>
+<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div>
+<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div>
+<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div>
+<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div>
+<div><s>foo <font color="fuchsia">line-through</font> bar</s></div>
+<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div>
+<div><u>foo <span style="color:fuchsia">span</span> bar</u></div>
+<div><u id="no-namespace">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('no-namespace');
+a.textContent = 'foo ';
+var elm = document.createElementNS('', 'font');
+elm.textContent = 'no-namespace font element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
+<div><u id="uppercase">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('uppercase');
+a.textContent = 'foo ';
+var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT');
+elm.textContent = 'uppercase FONT element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html
new file mode 100644
index 0000000000..fb632e693d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html
@@ -0,0 +1,20 @@
+<title>Reference for The font element text decoration color quirk, 001</title>
+<style>
+span, div > div { color:fuchsia }
+.under { text-decoration:underline }
+.over { text-decoration:overline }
+.strike { text-decoration:line-through }
+</style>
+<div>Quirks should not apply:</div>
+<div class="under">foo <span>style</span> bar</div>
+<div class="under">foo <span>color</span> bar</div>
+<div class="under">foo <span>color and style</span> bar</div>
+<div class="under">foo <span>color=x and style</span> bar</div>
+<div class="under">foo <span>color=transparent and style</span> bar</div>
+<div class="under">foo <span>color="" and style</span> bar</div>
+<div class="under">foo<div>block</div>bar</div>
+<div class="strike">foo <span>line-through</span> bar</div>
+<div class="over">foo <span>overline</span> bar</div>
+<div class="under">foo <span>span</span> bar</div>
+<div class="under">foo <span>no-namespace font element</span> bar</div>
+<div class="under">foo <span>uppercase FONT element</span> bar</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html
new file mode 100644
index 0000000000..d781fab289
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<link rel=match href=001-ref.html>
+<title>The font element text decoration color quirk, 001, standards mode</title>
+<style>[id] > * { color:fuchsia }</style>
+<div>Quirks should not apply:</div>
+<div><u>foo <font style="color:fuchsia">style</font> bar</u></div>
+<div><u>foo <font color="fuchsia">color</font> bar</u></div>
+<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div>
+<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div>
+<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div>
+<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div>
+<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div>
+<div><s>foo <font color="fuchsia">line-through</font> bar</s></div>
+<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div>
+<div><u>foo <span style="color:fuchsia">span</span> bar</u></div>
+<div><u id="no-namespace">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('no-namespace');
+a.textContent = 'foo ';
+var elm = document.createElementNS('', 'font');
+elm.textContent = 'no-namespace font element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
+<div><u id="uppercase">FAIL (script didn't run)</u></div>
+<script>
+var a = document.getElementById('uppercase');
+a.textContent = 'foo ';
+var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT');
+elm.textContent = 'uppercase FONT element';
+a.appendChild(elm);
+a.appendChild(document.createTextNode(' bar'));
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml
new file mode 100644
index 0000000000..623b346eea
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<link rel="match" href="001-ref.html"/>
+<title>The font element text decoration color quirk, 001, XHTML</title>
+<style>[id] > * { color:fuchsia }</style>
+</head>
+<body>
+<div>Quirks should not apply:</div>
+<div><u>foo <font style="color:fuchsia">style</font> bar</u></div>
+<div><u>foo <font color="fuchsia">color</font> bar</u></div>
+<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div>
+<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div>
+<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div>
+<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div>
+<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div>
+<div><s>foo <font color="fuchsia">line-through</font> bar</s></div>
+<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div>
+<div><u>foo <span style="color:fuchsia">span</span> bar</u></div>
+<div><u id="no-namespace">foo <font xmlns="">no-namespace font element</font> bar</u></div>
+<div><u id="uppercase">foo <FONT>uppercase FONT element</FONT> bar</u></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html
new file mode 100644
index 0000000000..a37da3c45f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>font face</title>
+<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk">
+<link rel="author" title="Intel" href="http://www.intel.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+
+const types = ["serif", "sans-serif", "cursive", "fantasy", "monospace"];
+for (let type of types) {
+  test(() => {
+    let elem = document.createElement("font");
+    elem.setAttribute("face", type);
+    document.body.appendChild(elem);
+    let exp_type = window.getComputedStyle(elem, null).getPropertyValue("font-family");
+    assert_equals(exp_type, type);
+  }, `font face attribute ${type} is correct`);
+}
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html
new file mode 100644
index 0000000000..8e8b9f28eb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>font size</title>
+<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk">
+<link rel="author" title="Intel" href="http://www.intel.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+
+<script>
+
+const modes = ["", "+", "-"];
+const values = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
+const rels = [
+  ["1", "x-small"],
+  ["2", "small"],
+  ["3", "medium"],
+  ["4", "large"],
+  ["5", "x-large"],
+  ["6", "xx-large"],
+  ["7", "xxx-large"]
+];
+let results = getCSSFontSize(rels);
+
+function cal(n) {
+  //If value is greater than 7, let it be 7
+  //If value is less than 1, let it be 1
+  return n > 7 ? 7 : (n < 1 ? 1 : n);
+}
+
+function getRealInput(mode, value) {
+  switch(mode) {
+    case "+":
+      //If mode is relative-plus, then increment value by 3
+      return cal(3 + parseInt(value));
+    case "-":
+      // If mode is relative-minus, then let value be the result of subtracting value from 3
+      return cal(3 - parseInt(value));
+    default:
+      return cal(parseInt(value));
+  }
+}
+
+function getCSSFontSize(rels) {
+  let results = {};
+  for (let [key, value] of rels) {
+    if (key == "7") {
+      //The 'xxx-large' value is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'.
+      let size = parseInt(results["6"]) * 1.5;
+      results[key] = size.toString();
+      return results;
+    }
+    let elem = document.createElement("span");
+    document.body.appendChild(elem);
+    elem.setAttribute("style", `font-size: ${value}`);
+    let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size");
+    results[key] = exp_size.slice(0, -2);
+  }
+  return results;
+}
+
+for (let mode of modes) {
+  for (let value of values) {
+    test(() => {
+      let size = getRealInput(mode, value);
+      let elem = document.createElement("font");
+      elem.setAttribute("size", `${mode}${value}`);
+      document.body.appendChild(elem);
+      let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size");
+      assert_equals(exp_size.slice(0, -2), results[size]);
+    }, `font size attribute ${mode}${value} is correct`);
+  }
+}
+
+test(() => {
+  let span_elem = document.createElement("span");
+  document.body.appendChild(span_elem);
+  span_elem.setAttribute("style", "font-size: medium");
+  let span_size = window.getComputedStyle(span_elem, null).getPropertyValue("font-size");
+
+  let font_elem = document.createElement("font");
+  document.body.appendChild(font_elem);
+  let font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
+  assert_equals(font_size, span_size);
+
+  font_elem.setAttribute("size", "");
+  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
+  assert_equals(font_size, span_size);
+
+  font_elem.setAttribute("size", " ");
+  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
+  assert_equals(font_size, span_size);
+
+  font_elem.setAttribute("size", " 3");
+  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
+  assert_equals(font_size, span_size);
+
+  font_elem.setAttribute("size", "3");
+  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
+  assert_equals(font_size, span_size);
+}, "font size default value is 3");
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html
new file mode 100644
index 0000000000..63e6a83e88
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<title>default styles for h1..h6, hgroup, article, aside, nav, section</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
+  display: block;
+}
+
+h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; font-size: 2.00em; font-weight: bold; }
+h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; font-weight: bold; }
+h3 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; font-weight: bold; }
+h4 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; font-weight: bold; }
+h5 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; font-weight: bold; }
+h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; font-weight: bold; }
+
+:is(article, aside, nav, section) h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
+:is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
+:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
+:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
+:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }
+
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <h1></h1>
+  <h2></h2>
+  <h3></h3>
+  <h4></h4>
+  <h5></h5>
+  <h6></h6>
+  <hgroup></hgroup>
+  <article></article>
+  <aside></aside>
+  <nav></nav>
+  <section></section>
+  <article data-skip>
+    <h1></h1>
+    <article data-skip>
+      <h1></h1>
+      <article data-skip>
+        <h1></h1>
+        <article data-skip>
+          <h1></h1>
+          <article data-skip>
+            <h1></h1>
+            <hgroup data-skip>
+             <h1></h1>
+             <h2></h2>
+             <h3></h3>
+             <h4></h4>
+             <h5></h5>
+            </hgroup>
+          </article>
+        </article>
+      </article>
+    </article>
+  </article>
+  <aside data-skip>
+    <h1></h1>
+    <aside data-skip>
+      <h1></h1>
+      <aside data-skip>
+        <h1></h1>
+        <aside data-skip>
+          <h1></h1>
+          <aside data-skip>
+            <h1></h1>
+            <hgroup data-skip>
+             <h1></h1>
+             <h2></h2>
+             <h3></h3>
+             <h4></h4>
+             <h5></h5>
+            </hgroup>
+          </aside>
+        </aside>
+      </aside>
+    </aside>
+  </aside>
+  <nav data-skip>
+    <h1></h1>
+    <nav data-skip>
+      <h1></h1>
+      <nav data-skip>
+        <h1></h1>
+        <nav data-skip>
+          <h1></h1>
+          <nav data-skip>
+            <h1></h1>
+            <hgroup data-skip>
+             <h1></h1>
+             <h2></h2>
+             <h3></h3>
+             <h4></h4>
+             <h5></h5>
+            </hgroup>
+          </nav>
+        </nav>
+      </nav>
+    </nav>
+  </nav>
+  <section data-skip>
+    <h1></h1>
+    <section data-skip>
+      <h1></h1>
+      <section data-skip>
+        <h1></h1>
+        <section data-skip>
+          <h1></h1>
+          <section data-skip>
+            <h1></h1>
+            <hgroup data-skip>
+             <h1></h1>
+             <h2></h2>
+             <h3></h3>
+             <h4></h4>
+             <h5></h5>
+            </hgroup>
+          </section>
+        </section>
+      </section>
+    </section>
+  </section>
+</div>
+
+<div id="refs"></div>
+
+<script>
+  const props = [
+    'display',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'font-size',
+    'font-weight',
+  ];
+  runUAStyleTests(props);
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml
new file mode 100644
index 0000000000..7d21ce1180
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml
new file mode 100644
index 0000000000..8610f37938
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml
new file mode 100644
index 0000000000..3f02219973
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml
new file mode 100644
index 0000000000..6af44139a0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>UA style for form in table elements - XHTML</title>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2" />
+    <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <table><form></form></table>
+    <table><thead><form></form></thead></table>
+    <table><tbody><form></form></tbody></table>
+    <table><tfoot><form></form></tfoot></table>
+    <table><tr><form></form></tr></table>
+    <script>
+      for (const form of document.querySelectorAll("form")) {
+        test(function() {
+          assert_equals(getComputedStyle(form).display, "block");
+        }, `Computed display of form inside ${form.parentNode.nodeName} in xhtml should be 'block'`);
+      }
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html
new file mode 100644
index 0000000000..611c8305b9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>UA style for form in table elements</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .block { display: block !important }
+</style>
+<div id="display">
+  <table><form></form></table>
+  <table><thead><form></form></thead></table>
+  <table><tbody><form></form></tbody></table>
+  <table><tfoot><form></form></tfoot></table>
+  <table><tr><form></form></tr></table>
+</div>
+<div id="important">
+  <table><form class="block"></form></table>
+  <table><thead><form class="block"></form></thead></table>
+  <table><tbody><form class="block"></form></tbody></table>
+  <table><tfoot><form class="block"></form></tfoot></table>
+  <table><tr><form class="block"></form></tr></table>
+</div>
+<script>
+  for (const form of display.querySelectorAll("form")) {
+    test(function() {
+      assert_equals(getComputedStyle(form).display, "none");
+    }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none'`);
+  }
+  for (const form of important.querySelectorAll("form")) {
+    test(function() {
+      assert_equals(getComputedStyle(form).display, "none");
+    }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none' (!important UA style))`);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html
new file mode 100644
index 0000000000..f06c3dc9b4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>UA style for hidden attribute on table elements</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<table hidden></table>
+<table><caption hidden></caption></table>
+<table><colgroup hidden></table>
+<table><col hidden></table>
+<table><thead hidden></table>
+<table><tbody hidden></table>
+<table><tfoot hidden></table>
+<table><tr hidden></table>
+<table><tr><td hidden></table>
+<table><tr><th hidden></table>
+<script>
+const expectedDisplay = {
+  'table': 'none',
+  'caption': 'none',
+  'colgroup': 'table-column-group',
+  'col': 'table-column',
+  'thead': 'table-header-group',
+  'tbody': 'table-row-group',
+  'tfoot': 'table-footer-group',
+  'tr': 'table-row',
+  'td': 'none',
+  'th': 'none',
+};
+for (const el of document.querySelectorAll("[hidden]")) {
+  test(function() {
+    const style = getComputedStyle(el);
+    assert_equals(style.display, expectedDisplay[el.localName]);
+    if (el instanceof HTMLTableElement ||
+        el instanceof HTMLTableCaptionElement ||
+        el instanceof HTMLTableCellElement) {
+      assert_equals(style.visibility, 'visible');
+    } else {
+      assert_equals(style.visibility, 'collapse');
+    }
+  }, `Computed display and visibility of ${el.localName}`);
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png
new file mode 100644
index 0000000000..42f8a2100b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png
new file mode 100644
index 0000000000..9bf59ebdf1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png
new file mode 100644
index 0000000000..7902bc31e0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png
new file mode 100644
index 0000000000..191e13ea11
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png
new file mode 100644
index 0000000000..a45f8111b4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html
new file mode 100644
index 0000000000..54acff0350
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table attribute test</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="author" title="Intel" href="http://www.intel.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  .div_tbl table {
+    width: 400px;
+    height: 300px;
+    border-spacing: 0px;
+  }
+  .div_tbl td {
+    padding: 0px;
+  }
+  .div_tbl th {
+    padding: 0px;
+  }
+  .div_200 {
+    height: 200px;
+  }
+</style>
+
+<div id="div">
+  <table id="table">
+    <thead id="thead">
+      <tr>
+        <th id="th">Month</th>
+        <th>Savings</th>
+      </tr>
+    </thead>
+    <tbody id="tbody">
+      <tr id="tr">
+        <td>January</td>
+        <td>$60</td>
+      </tr>
+      <tr>
+        <td id="td">February</td>
+        <td>$80</td>
+      </tr>
+    </tbody>
+    <tfoot id="tfoot">
+      <tr>
+        <td>Sum</td>
+        <td>$140</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+<script>
+
+const ids = ["table", "thead", "tbody", "tfoot", "tr", "td", "th"];
+const alignIds = ["thead", "tbody", "tfoot", "tr", "td", "th"];
+const heightIds = ["tr", "td", "th"];
+const div = document.getElementById("div");
+const table = document.getElementById("table");
+const aligns = [
+  ["center", "center"],
+  ["middle", "center"],
+  ["left", "left"],
+  ["right", "right"],
+  ["justify", "justify"]
+];
+
+function commonTest(id, attr, value, cssProp, expected) {
+  test(t => {
+    let elem = document.getElementById(id);
+    t.add_cleanup(() => {
+      elem.removeAttribute(attr);
+    });
+    elem.setAttribute(attr, value);
+    let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp);
+    assert_equals(css, expected);
+  }, `${id} ${attr} attribute is correct`);
+}
+
+function commonAlignTest(id, attr, value, cssProp, expected) {
+  test(t => {
+    let elem = document.getElementById(id);
+    t.add_cleanup(() => {
+      elem.removeAttribute(attr);
+    });
+    elem.setAttribute(attr, value);
+    let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp);
+    assert_equals(css, expected);
+  }, `table ${id} align attribute ${value} is correct`);
+}
+
+function commonHeightTest(id, attr, value, cssProp, expected, type="", divClass) {
+  test(t => {
+    let elem = document.getElementById(id);
+    t.add_cleanup(() => {
+      elem.removeAttribute(attr);
+      div.classList.remove(divClass);
+    });
+    elem.setAttribute(attr, value);
+    div.classList.add(divClass);
+    let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp);
+    assert_equals(css, expected);
+  }, `${id} ${attr} attribute ${type} is correct`);
+}
+
+// table#bordercolor
+commonTest("table", "bordercolor", "red", "border-color", "rgb(255, 0, 0)");
+// table#cellspacing
+commonTest("table", "cellspacing", "10", "border-spacing", "10px 10px", "10");
+
+// {table, thead, body, tfoot, tr, td, th}#background
+// {table, thead, body, tfoot, tr, td, th}#bgcolor
+const url = new URL('/images/threecolors.png', window.location.href).href;
+for (let id of ids) {
+  commonTest(id, "background", "/images/threecolors.png", "background-image", `url(\"${url}\")`);
+
+  commonTest(id, "bgcolor", "red", "background-color", "rgb(255, 0, 0)");
+}
+
+// {thead, body, tfoot, tr, td, th}#align#{center, middle, left, right, justify}
+for (let id of alignIds) {
+  for (let [value, expected] of aligns) {
+    commonAlignTest(id, "align", value, "text-align", expected);
+  }
+}
+
+// {tr, td, th}#height#pixel
+for (let id of heightIds) {
+  commonHeightTest(id, "height", "60", "height", "60px", "pixel", "div_tbl");
+}
+
+// {tr, td, th}#height#percentage
+let tbl = document.createElement("table");
+tbl.innerHTML = '<tr id="table_tr"><th id="table_th"></th></tr><tr><td id="table_td"></td></tr>';
+div.appendChild(tbl);
+const heightPercIds = ["table_tr", "table_td", "table_th"];
+for (let id of heightPercIds) {
+  commonHeightTest(id, "height", "20%", "height", "60px", "percentage", "div_tbl");
+}
+div.removeChild(tbl);
+
+// table#height#{pixel, percentage}
+commonHeightTest("table", "height", "180", "height", "180px", "pixel", "div_200");
+commonHeightTest("table", "height", "90%", "height", "180px", "90%", "div_200");
+commonHeightTest("table", "height", "110%", "height", "220px", "110%", "div_200");
+
+// table#cellpadding
+test(t => {
+  t.add_cleanup(() => {
+    table.removeAttribute("cellpadding");
+  });
+  table.setAttribute("cellpadding", "10");
+
+  let th = document.getElementById("th");
+  let th_css = window.getComputedStyle(th, null).getPropertyValue("padding");
+  assert_equals(th_css, "10px");
+
+  let td = document.getElementById("td");
+  let td_css = window.getComputedStyle(td, null).getPropertyValue("padding");
+  assert_equals(td_css, "10px");
+}, "table cellpadding attribute is correct");
+
+// th default text-align property is center
+test(t => {
+  let elem = document.getElementById("th");
+  let css = window.getComputedStyle(elem, null).getPropertyValue("text-align");
+  assert_equals(css, "center");
+}, "th default align attribute is center");
+
+// col#width#{pixel, percentage}
+test(t => {
+  let colgroup = document.createElement("colgroup");
+  let col1 = document.createElement("col");
+  let col2 = document.createElement("col");
+  t.add_cleanup(() => {
+    table.removeChild(colgroup);
+    div.classList.remove("div_tbl");
+  });
+  colgroup.appendChild(col1);
+  colgroup.appendChild(col2);
+  table.insertBefore(colgroup, table.firstChild);
+  div.classList.add("div_tbl");
+
+  col1.setAttribute("width", "100");
+  let td = document.getElementById("td");
+  let css = window.getComputedStyle(td, null).getPropertyValue("width");
+  assert_equals(css, "100px");
+
+  col1.setAttribute("width", "50%");
+  css = window.getComputedStyle(td, null).getPropertyValue("width");
+  assert_equals(css, "200px");
+}, "table col width attribute is correct");
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html
new file mode 100644
index 0000000000..3aa0abd320
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<table style="background-image: url('resources/aqua-yellow-32x32.png')">
+  <thead style="background-image: url('resources/blue-16x20-green-16x20.png')">
+    <tr>
+      <td>
+        Foo
+      </td>
+      <td style="background-image: url('resources/yellow-32x32.png')">
+        Bar
+      </td>
+    </tr>
+  </thead>
+  <tbody style="background-image: url('resources/red-32x32.png')">
+    <tr>
+      <th style="background-image: url('resources/fuchsia-32x32.png')">
+        Foo
+      </th>
+      <th>
+        Bar
+      </th>
+    </tr>
+    <tr style="background-image: url('resources/fuchsia-32x32.png')">
+      <td>
+        Foo
+      </td>
+      <td style="background-image: url('resources/yellow-32x32.png')">
+        Bar
+      </td>
+    </tr>
+  </tbody>
+  <tfoot style="background-image: url('resources/yellow-32x32.png')">
+    <tr>
+      <td>
+        Baz
+      </td>
+    </tr>
+  </tfoot>
+</table>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html
new file mode 100644
index 0000000000..0cbaca6019
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<link rel="match" href="table-background-print-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="help" href="https://drafts.csswg.org/css-break/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=816498">
+<body>
+<table background="resources/aqua-yellow-32x32.png">
+  <thead background="resources/blue-16x20-green-16x20.png">
+    <tr>
+      <td>
+        Foo
+      </td>
+      <td background="resources/yellow-32x32.png">
+        Bar
+      </td>
+    </tr>
+  </thead>
+  <tbody background="resources/red-32x32.png">
+    <tr>
+      <th background="resources/fuchsia-32x32.png">
+        Foo
+      </th>
+      <th>
+        Bar
+      </th>
+    </tr>
+    <tr background="resources/fuchsia-32x32.png">
+      <td>
+        Foo
+      </td>
+      <td background="resources/yellow-32x32.png">
+        Bar
+      </td>
+    </tr>
+  </tbody>
+  <tfoot background="resources/yellow-32x32.png">
+    <tr>
+      <td>
+        Baz
+      </td>
+    </tr>
+  </tfoot>
+</table>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html
new file mode 100644
index 0000000000..ceac88e9a3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table borders</title>
+<style>
+table {
+  border-width: 1px;
+  border-style: outset;
+}
+td {
+  border-width: 1px;
+  border-style: inset;
+}
+</style>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html
new file mode 100644
index 0000000000..3338813995
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="match" href="table-border-1-ref.html">
+<title>Table borders</title>
+<table border>
+<tr><td>Test
+</table>
+<table border="">
+<tr><td>Test
+</table>
+<table border=null>
+<tr><td>Test
+</table>
+<table border=undefined>
+<tr><td>Test
+</table>
+<table border=foo>
+<tr><td>Test
+</table>
+<table border=1>
+<tr><td>Test
+</table>
+<table border=1foo>
+<tr><td>Test
+</table>
+<table border=1%>
+<tr><td>Test
+</table>
+<table border=-1>
+<tr><td>Test
+</table>
+<table border=-1foo>
+<tr><td>Test
+</table>
+<table border=-1%>
+<tr><td>Test
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html
new file mode 100644
index 0000000000..7558e5271a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table borders</title>
+<style>
+table {
+  border-width: 1px;
+  border-style: outset;
+}
+td {
+  border-width: 1px;
+  border-style: inset;
+}
+</style>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html
new file mode 100644
index 0000000000..36d1e45106
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table borders</title>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
+<table>
+<tr><td>Test
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html
new file mode 100644
index 0000000000..6f4f39b113
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="match" href="table-border-2-ref.html">
+<title>Table borders</title>
+<table border=0>
+<tr><td>Test
+</table>
+<table border=0foo>
+<tr><td>Test
+</table>
+<table border=0%>
+<tr><td>Test
+</table>
+<table border=+0>
+<tr><td>Test
+</table>
+<table border=+0foo>
+<tr><td>Test
+</table>
+<table border=+0%>
+<tr><td>Test
+</table>
+<table border=-0>
+<tr><td>Test
+</table>
+<table border=-0foo>
+<tr><td>Test
+</table>
+<table border=-0%>
+<tr><td>Test
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html
new file mode 100644
index 0000000000..e465fd433c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<head>
+  <title>Reference for default 'border-color' on table (with 'color' set)</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    * {
+      border-color: teal;
+      /* This only affects the elements that we specify 'border-style' on: */
+      border-width: 6px;
+    }
+
+    table {
+      height: 30px;
+      width: 30px;
+      border-spacing: 0;
+
+      /* To test in "rows": */
+      float: left;
+      margin: 1px;
+    }
+    br {
+      clear: both;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+    .dashed {
+      border-style: dashed;
+    }
+    .solid {
+      border-style: solid;
+    }
+    .double {
+      border-style: double;
+    }
+    .groove {
+      border-style: groove;
+    }
+    .ridge {
+      border-style: ridge;
+    }
+    .inset {
+      border-style: inset;
+    }
+    .outset {
+      border-style: outset;
+    }
+  </style>
+</head>
+
+<table class="dotted"><td></td></table>
+<table><th class="dotted"></th></table>
+<table><td class="dotted"></td></table>
+<br>
+
+<table class="dashed"><td></td></table>
+<table><th class="dashed"></th></table>
+<table><td class="dashed"></td></table>
+<br>
+
+<table class="solid"><td></td></table>
+<table><th class="solid"></th></table>
+<table><td class="solid"></td></table>
+<br>
+
+<table class="double"><td></td></table>
+<table><th class="double"></th></table>
+<table><td class="double"></td></table>
+<br>
+
+<table class="groove"><td></td></table>
+<table><th class="groove"></th></table>
+<table><td class="groove"></td></table>
+<br>
+
+<table class="ridge"><td></td></table>
+<table><th class="ridge"></th></table>
+<table><td class="ridge"></td></table>
+<br>
+
+<table class="inset"><td></td></table>
+<table><th class="inset"></th></table>
+<table><td class="inset"></td></table>
+<br>
+
+<table class="outset"><td></td></table>
+<table><th class="outset"></th></table>
+<table><td class="outset"></td></table>
+<br>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html
new file mode 100644
index 0000000000..4b481194dc
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html
@@ -0,0 +1,95 @@
+<!-- Intentionally omitting doctype, to test quirks mode. -->
+<head>
+  <title>Testing default 'border-color' on table (with 'color' set), in quirks mode</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+  <link rel="match" href="table-border-3-ref.html">
+  <style>
+    * {
+      /* This sets the used value of 'currentColor', which is what should be
+         used for all border-coloring in this test: */
+      color: teal;
+      /* This only affects the elements that we specify 'border-style' on: */
+      border-width: 6px;
+    }
+
+    table {
+      height: 30px;
+      width: 30px;
+      border-spacing: 0;
+
+      /* To test in "rows": */
+      float: left;
+      margin: 1px;
+    }
+    br {
+      clear: both;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+    .dashed {
+      border-style: dashed;
+    }
+    .solid {
+      border-style: solid;
+    }
+    .double {
+      border-style: double;
+    }
+    .groove {
+      border-style: groove;
+    }
+    .ridge {
+      border-style: ridge;
+    }
+    .inset {
+      border-style: inset;
+    }
+    .outset {
+      border-style: outset;
+    }
+  </style>
+</head>
+
+<table class="dotted"><td></td></table>
+<table><th class="dotted"></th></table>
+<table><td class="dotted"></td></table>
+<br>
+
+<table class="dashed"><td></td></table>
+<table><th class="dashed"></th></table>
+<table><td class="dashed"></td></table>
+<br>
+
+<table class="solid"><td></td></table>
+<table><th class="solid"></th></table>
+<table><td class="solid"></td></table>
+<br>
+
+<table class="double"><td></td></table>
+<table><th class="double"></th></table>
+<table><td class="double"></td></table>
+<br>
+
+<table class="groove"><td></td></table>
+<table><th class="groove"></th></table>
+<table><td class="groove"></td></table>
+<br>
+
+<table class="ridge"><td></td></table>
+<table><th class="ridge"></th></table>
+<table><td class="ridge"></td></table>
+<br>
+
+<table class="inset"><td></td></table>
+<table><th class="inset"></th></table>
+<table><td class="inset"></td></table>
+<br>
+
+<table class="outset"><td></td></table>
+<table><th class="outset"></th></table>
+<table><td class="outset"></td></table>
+<br>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html
new file mode 100644
index 0000000000..c4c019c8eb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<head>
+  <title>Testing default 'border-color' on table (with 'color' set), in standards mode</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+  <link rel="match" href="table-border-3-ref.html">
+  <style>
+    * {
+      /* This sets the used value of 'currentColor', which is what should be
+         used for all border-coloring in this test: */
+      color: teal;
+      /* This only affects the elements that we specify 'border-style' on: */
+      border-width: 6px;
+    }
+
+    table {
+      height: 30px;
+      width: 30px;
+      border-spacing: 0;
+
+      /* To test in "rows": */
+      float: left;
+      margin: 1px;
+    }
+    br {
+      clear: both;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+    .dashed {
+      border-style: dashed;
+    }
+    .solid {
+      border-style: solid;
+    }
+    .double {
+      border-style: double;
+    }
+    .groove {
+      border-style: groove;
+    }
+    .ridge {
+      border-style: ridge;
+    }
+    .inset {
+      border-style: inset;
+    }
+    .outset {
+      border-style: outset;
+    }
+  </style>
+</head>
+
+<table class="dotted"><td></td></table>
+<table><th class="dotted"></th></table>
+<table><td class="dotted"></td></table>
+<br>
+
+<table class="dashed"><td></td></table>
+<table><th class="dashed"></th></table>
+<table><td class="dashed"></td></table>
+<br>
+
+<table class="solid"><td></td></table>
+<table><th class="solid"></th></table>
+<table><td class="solid"></td></table>
+<br>
+
+<table class="double"><td></td></table>
+<table><th class="double"></th></table>
+<table><td class="double"></td></table>
+<br>
+
+<table class="groove"><td></td></table>
+<table><th class="groove"></th></table>
+<table><td class="groove"></td></table>
+<br>
+
+<table class="ridge"><td></td></table>
+<table><th class="ridge"></th></table>
+<table><td class="ridge"></td></table>
+<br>
+
+<table class="inset"><td></td></table>
+<table><th class="inset"></th></table>
+<table><td class="inset"></td></table>
+<br>
+
+<table class="outset"><td></td></table>
+<table><th class="outset"></th></table>
+<table><td class="outset"></td></table>
+<br>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html
new file mode 100644
index 0000000000..c8d6a20726
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+table {
+  display: inline-table;
+  font-family: Ahem;
+}
+table, table * {
+  border-width: 3px;
+}
+</style>
+<p>For every three tables below, the first two should have borders between some cells, but not the third:
+<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table>
+<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table>
+<table><tr><td>X<tr><td>X<tr><td>X</table>
+<br><br>
+<table rules="cols"><tr><td>X<td>X<td>X</table>
+<table rules="cols"><tr><td>X<td>X<td>X</table>
+<table><tr><td>X<td>X<td>X</table>
+<br><br>
+<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<table><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<br><br>
+<p>For every three tables below, the first two should have borders on some edges, but not the third:
+<table frame="hsides"><tr><td>X</table>
+<table frame="hsides"><tr><td>X</table>
+<table><tr><td>X</table>
+<br><br>
+<table frame="lhs"><tr><td>X</table>
+<table frame="lhs"><tr><td>X</table>
+<table><tr><td>X</table>
+<br><br>
+<table frame="rhs"><tr><td>X</table>
+<table frame="rhs"><tr><td>X</table>
+<table><tr><td>X</table>
+<br><br>
+<table frame="vsides"><tr><td>X</table>
+<table frame="vsides"><tr><td>X</table>
+<table><tr><td>X</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html
new file mode 100644
index 0000000000..45c9da925d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case">
+<link rel="match" href="table-border-presentational-hints-ascii-case-insensitive-ref.html">
+<meta name="assert" content="@rules + @frame values are ASCII case-insensitive">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+table {
+  display: inline-table;
+  font-family: Ahem;
+}
+table, table * {
+  border-width: 3px;
+}
+</style>
+<p>For every three tables below, the first two should have borders between some cells, but not the third:
+<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table>
+<table rules="RoWs"><tr><td>X<tr><td>X<tr><td>X</table>
+<table rules="rowſ"><tr><td>X<tr><td>X<tr><td>X</table>
+<br><br>
+<table rules="cols"><tr><td>X<td>X<td>X</table>
+<table rules="CoLs"><tr><td>X<td>X<td>X</table>
+<table rules="colſ"><tr><td>X<td>X<td>X</table>
+<br><br>
+<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<table rules="GrOuPs"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<table rules="groupſ"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table>
+<br><br>
+<p>For every three tables below, the first two should have borders on some edges, but not the third:
+<table frame="hsides"><tr><td>X</table>
+<table frame="HsIdEs"><tr><td>X</table>
+<table frame="hſideſ"><tr><td>X</table>
+<br><br>
+<table frame="lhs"><tr><td>X</table>
+<table frame="LhS"><tr><td>X</table>
+<table frame="lhſ"><tr><td>X</table>
+<br><br>
+<table frame="rhs"><tr><td>X</table>
+<table frame="RhS"><tr><td>X</table>
+<table frame="rhſ"><tr><td>X</table>
+<br><br>
+<table frame="vsides"><tr><td>X</table>
+<table frame="VsIdEs"><tr><td>X</table>
+<table frame="vſideſ"><tr><td>X</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html
new file mode 100644
index 0000000000..1b128e6171
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference case for table bordercolor attribute behaving like border-color property</title>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<style>
+  table { margin: 5px }
+</style>
+<table>
+  <td>I should not have a border.</td>
+</table>
+<table>
+  <td>I should not have a border.</td>
+</table>
+<table>
+  <td>I should not have a border.</td>
+</table>
+<table>
+  <td>I should not have a border.</td>
+</table>
+<table style="border-color: lime; border-style: solid">
+  <td>I should have a border.</td>
+</table>
+<table style="border-color: lime; border-style: solid">
+  <td>I should have a border.</td>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html
new file mode 100644
index 0000000000..014abe3567
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test for table bordercolor attribute behaving like border-color property</title>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="match" href="table-bordercolor-001-ref.html">
+<meta name="assert" content="bordercolor is treated as a presentation hint, equivalent to setting the border-color property">
+<style>
+  table { margin: 5px }
+</style>
+<table bordercolor="red">
+  <td>I should not have a border.</td>
+</table>
+<table style="border-color: red">
+  <td>I should not have a border.</td>
+</table>
+<table bordercolor="red" style="border-width: 10px">
+  <td>I should not have a border.</td>
+</table>
+<table style="border-color: red; border-width: 10px">
+  <td>I should not have a border.</td>
+</table>
+<table bordercolor="lime" style="border-style: solid">
+  <td>I should have a border.</td>
+</table>
+<table style="border-color: lime; border-style: solid">
+  <td>I should have a border.</td>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html
new file mode 100644
index 0000000000..5b2ea91fe5
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background: green;"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html
new file mode 100644
index 0000000000..65962ac273
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/#tables-2">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=821915">
+<link rel="match" href="table-cell-nowrap-with-fixed-width-ref.html">
+<title>A td element with the nowrap attribute should unconditionally apply white-space:nowrap</title>
+<style>
+table { border-spacing: 0; }
+td { width: 10px; padding: 0; }
+div { display: inline-block; background: green; width: 50px; height: 100px; }
+</style>
+<table>
+  <td nowrap>
+    <div></div><div></div>
+  </td>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html
new file mode 100644
index 0000000000..b5ba0443f3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html
@@ -0,0 +1,37 @@
+<style>
+body {
+  margin: 0;
+}
+
+.row {
+  clear: both;
+}
+
+.row div {
+  float: left;
+}
+
+.red {
+  background-color: red;
+}
+</style>
+
+<div class="row">
+  <div class="red" style="width: 200px">a</div>
+  <div style="width: 200px">a</div>
+</div>
+
+<div class="row">
+  <div class="red" style="width: 200px">a</div>
+  <div style="width: 200px">a</div>
+</div>
+
+<div class="row">
+  <div class="red" style="width: 100px">a</div>
+  <div style="width: 300px">a</div>
+</div>
+
+<div class="row">
+  <div class="red" style="width: 100px">a</div>
+  <div style="width: 300px">a</div>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html
new file mode 100644
index 0000000000..0fe0e2c25a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<link rel="match" href="table-cell-width-ref.html">
+<style>
+body {
+  margin: 0;
+}
+
+table {
+  width: 400px;
+  border-collapse: collapse;
+}
+
+th {
+  font-weight: normal;
+  text-align: left;
+}
+
+td, th {
+  padding: 0;
+}
+
+td:first-child, th:first-child {
+  background-color: red;
+}
+</style>
+
+<!-- width=0 should be treated as 'auto' -->
+<table>
+  <tr>
+    <th width=0>a</th>
+    <th>a</th>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td width=0>a</td>
+    <td>a</td>
+  </tr>
+</table>
+
+<!-- test valid width attribute value-->
+<table>
+  <tr>
+    <th width=100>a</th>
+    <th>a</th>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td width=100>a</td>
+    <td>a</td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html
new file mode 100644
index 0000000000..f66244ab10
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html
@@ -0,0 +1,54 @@
+<link rel="match" href="table-cell-width-ref.html">
+<style>
+body {
+  margin: 0;
+}
+
+table {
+  width: 400px;
+  border-collapse: collapse;
+}
+
+th {
+  font-weight: normal;
+  text-align: left;
+}
+
+td, th {
+  padding: 0;
+}
+
+td:first-child, th:first-child {
+  background-color: red;
+}
+</style>
+
+<!-- width=0 should be treated as 'auto' -->
+<table>
+  <tr>
+    <th width=0>a</th>
+    <th>a</th>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td width=0>a</td>
+    <td>a</td>
+  </tr>
+</table>
+
+<!-- test valid width attribute value-->
+<table>
+  <tr>
+    <th width=100>a</th>
+    <th>a</th>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td width=100>a</td>
+    <td>a</td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html
new file mode 100644
index 0000000000..1eb7c00d21
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="border: 1px solid green; width: 0">Text</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html
new file mode 100644
index 0000000000..6358e14a39
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<link rel="match" href="table-column-width-ref.html">
+<table style="display: block">
+  <colgroup style="display: block">
+    <col style="border: 1px solid green; display: block" width="0"></col>
+  </colgroup>
+</table>
+<script>
+  document.querySelector("col").append("Text");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html
new file mode 100644
index 0000000000..2bbd6c0477
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Table direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table:
+<table>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
+
+<hr>
+
+RTL table:
+<table>
+  <tr>
+    <td class="special"></td>
+    <td></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html
new file mode 100644
index 0000000000..a3de4136f1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="match" href="table-direction-ref.html">
+<title>Table direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table:
+<table>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
+
+<hr>
+
+RTL table:
+<table style="direction: rtl">
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html
new file mode 100644
index 0000000000..ef1378185a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table layout attribute</title>
+<table border width=100% style=table-layout:fixed>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
+<table border width=100% style=table-layout:fixed>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html
new file mode 100644
index 0000000000..d76a48c4ab
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table layout attribute</title>
+<table border width=100%>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
+<table border width=100%>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html
new file mode 100644
index 0000000000..7dfacf2279
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Table layout attribute</title>
+<link rel="match" href="table-layout-ref.html">
+<meta name="assert"
+      content="The layout attribute on table elements should have no effect.">
+<table border width=100% layout=fixed>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
+<table border width=100% layout=auto>
+<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html
new file mode 100644
index 0000000000..dab31636d9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>Table row direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table with LTR and RTL rows:
+<table>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
+
+<hr>
+
+RTL table with LTR and RTL rows:
+<table>
+  <tr>
+    <td class="special"></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td class="special"></td>
+    <td></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html
new file mode 100644
index 0000000000..64ed5a667a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="match" href="table-row-direction-ref.html">
+<title>Table row direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table with LTR and RTL rows:
+<table>
+  <tr style="direction: ltr">
+    <td></td>
+    <td class="special"></td>
+  </tr>
+  <tr style="direction: rtl">
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
+
+<hr>
+
+RTL table with LTR and RTL rows:
+<table style="direction: rtl">
+  <tr style="direction: ltr">
+    <td></td>
+    <td class="special"></td>
+  </tr>
+  <tr style="direction: rtl">
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html
new file mode 100644
index 0000000000..0f3e03f9ba
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>Table row-group direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table with LTR and RTL row groups:
+<table>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+  <tr>
+    <td></td>
+    <td class="special"></td>
+  </tr>
+</table>
+
+<hr>
+
+RTL table with LTR and RTL row groups:
+<table>
+  <tr>
+    <td class="special"></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td class="special"></td>
+    <td></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html
new file mode 100644
index 0000000000..385672f127
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<link rel="match" href="table-row-group-direction-ref.html">
+<title>Table row-group direction</title>
+
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 2px solid black;
+    width: 20px;
+    height: 20px;
+  }
+
+  td.special {
+    border-left: 5px solid green;
+    border-right: 5px solid blue;
+  }
+</style>
+
+Normal table with LTR and RTL row groups:
+<table>
+  <tbody style="direction: ltr">
+    <tr>
+      <td></td>
+      <td class="special"></td>
+    </tr>
+  </tbody>
+  <tbody style="direction: rtl">
+    <tr>
+      <td></td>
+      <td class="special"></td>
+    </tr>
+  </tbody>
+</table>
+
+<hr>
+
+RTL table with LTR and RTL row groups:
+<table style="direction: rtl">
+  <tbody style="direction: ltr">
+    <tr>
+      <td></td>
+      <td class="special"></td>
+    </tr>
+  </tbody>
+  <tbody style="direction: rtl">
+    <tr>
+      <td></td>
+      <td class="special"></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html
new file mode 100644
index 0000000000..e5279080f0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<table style="border: 1px solid red">
+  <thead style="display: block; height: 100px">
+    <tr>
+      <td>
+        thead text
+      </td>
+    </tr>
+  </tr>
+</table>
+
+<table style="border: 1px solid red">
+  <tbody style="display: block; height: 100px">
+    <tr>
+      <td>
+        tbody text
+      </td>
+    </tr>
+  </tr>
+</table>
+
+<table style="border: 1px solid red">
+  <tfoot style="display: block; height: 100px">
+    <tr>
+      <td>
+        tfoot text
+      </td>
+    </tr>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html
new file mode 100644
index 0000000000..b58311dd72
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<link rel="match" href="table-row-group-height-ref.html">
+<table style="border: 1px solid red">
+  <thead style="display: block" height="100">
+    <tr>
+      <td>
+        thead text
+      </td>
+    </tr>
+  </tr>
+</table>
+
+<table style="border: 1px solid red">
+  <tbody style="display: block" height="100">
+    <tr>
+      <td>
+        tbody text
+      </td>
+    </tr>
+  </tr>
+</table>
+
+<table style="border: 1px solid red">
+  <tfoot style="display: block" height="100">
+    <tr>
+      <td>
+        tfoot text
+      </td>
+    </tr>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html
new file mode 100644
index 0000000000..63f882c689
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<div style="border: 1px solid green; height: 0; border-spacing: 2px">
+  <div style="display: table-cell; padding: 1px">Hey</div>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html
new file mode 100644
index 0000000000..8ecc0dd454
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<link rel="match" href="table-row-height-ref.html">
+<table style="display: block">
+  <tbody style="display: block">
+    <tr style="display: block; border: 1px solid green" height="0">
+      <td>Hey</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html
new file mode 100644
index 0000000000..2aa94109ad
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Testing row split</title>
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+  color:black;
+  background-color:white;
+  font-size:16px;
+  padding:0;
+  margin:0;
+  height:100%;
+}
+div { height:160%; }
+p { height: 50%; margin:0; }
+</style>
+</head>
+<body>
+
+<div>
+<p></p>
+<p>1</p>
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html
new file mode 100644
index 0000000000..3a14558a8b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<link rel="match" href="table-row-pagination-001-print-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="help" href="https://drafts.csswg.org/css-break/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+<meta charset="utf-8">
+<title>Testing row split</title>
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+  color:black;
+  background-color:white;
+  font-size:16px;
+  padding:0;
+  margin:0;
+  height:100%;
+}
+table { height:160%; width:100%; }
+td { height:50%; width:100%; }
+</style>
+</head>
+<body>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<tr><td></td></tr>
+<tr><td valign="top">1</td></tr>
+</table>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html
new file mode 100644
index 0000000000..91400fcc1e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+@page { size:5in 3in; margin:0.5in; }
+</style>
+</head>
+<body>
+  <div style="height:3in">Tall div. (Scroll to end.)</div>
+  <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div>
+  <div>[clear:left]</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html
new file mode 100644
index 0000000000..bc1c42088f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="match" href="table-row-pagination-002-print-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="help" href="https://drafts.csswg.org/css-break/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=963441">
+<style>
+@page { size:5in 3in; margin:0.5in; }
+</style>
+</head>
+<body>
+  <div style="float: left">
+    <table cellpadding=0 cellspacing=0>
+      <tr>
+        <td>
+          <div style="height:3in">Tall div. (Scroll to end.)</div>
+          <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div style="clear: left">[clear:left]</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html
new file mode 100644
index 0000000000..dc3e45f5a4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test for table element's UA-stylesheet-provided styles</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="refElem"></div>
+<!-- Note: this test puts the table inside of an element with a non-default
+     'text-indent' and 'border-collapse' values, so that we can verify that
+     the table does indeed use the initial value for these properties, rather
+     than simply inheriting. -->
+<div style="text-indent: 100px; border-collapse: collapse">
+  <table id="tableElem"></table>
+</div>
+
+<script>
+/* These styles come from the default `table` styling here:
+ *  https://html.spec.whatwg.org/multipage/rendering.html#tables-2
+ * We can't check for these values directly, because they may be
+ * serialized slightly differently when read from the computed style.
+ * So, for each property here, we apply it to a "reference" div and then
+ * read back the computed value, and we validate that a table element
+ * has that same computed value by default. */
+const defaultTablePropVals = {
+  'display':         'table',
+  'box-sizing':      'border-box',
+  'border-spacing':  '2px',
+  'border-collapse': 'separate',
+  'text-indent':     'initial',
+};
+
+for (var propName in defaultTablePropVals) {
+  test(function() {
+    refElem.style[propName] = defaultTablePropVals[propName];
+    let expectedComputedVal = getComputedStyle(refElem, "")[propName];
+
+    let actualComputedVal = getComputedStyle(tableElem, "")[propName];
+    assert_equals(actualComputedVal, expectedComputedVal);
+  }, `Computed '${propName}' on table should match html spec`);
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html
new file mode 100644
index 0000000000..f64bb9aa08
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case">
+<meta name="assert" content="@valign values on table-related elements are ASCII case-insensitive">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<table><tr><td valign="baseline">X</table>
+<table><tr><td valign="BaSeLiNe">X</table>
+<table><tr><td valign="baſeline">X</table>
+<script>
+const td = document.querySelectorAll("td");
+
+test(() => {
+  assert_equals(getComputedStyle(td[0]).getPropertyValue("vertical-align"),
+  	"baseline", "lowercase valid");
+  assert_equals(getComputedStyle(td[1]).getPropertyValue("vertical-align"),
+  	"baseline", "mixed case valid");
+  assert_equals(getComputedStyle(td[2]).getPropertyValue("vertical-align"),
+  	"middle", "non-ASCII invalid");
+}, "keyword baseline");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html
new file mode 100644
index 0000000000..9f462b5768
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>table vspace hspace (standards mode)</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div>x</div>
+<table vspace=25 hspace=25><tr><td>x</table>
+<div>x</div>
+<script>
+test(function() {
+  var style = getComputedStyle(document.querySelector('table'));
+  ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) {
+    assert_equals(style[m], '0px', m);
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html
new file mode 100644
index 0000000000..c081775b87
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html
@@ -0,0 +1,16 @@
+<!-- quirks -->
+<meta charset=utf-8>
+<title>table vspace hspace (quirks mode)</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div>x</div> <!-- prevent margin collapsing quirks -->
+<table vspace=25 hspace=25><tr><td>x</table>
+<div>x</div> <!-- prevent margin collapsing quirks -->
+<script>
+test(function() {
+  var style = getComputedStyle(document.querySelector('table'));
+  ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) {
+    assert_equals(style[m], '0px', m);
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html
new file mode 100644
index 0000000000..820c360e39
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>Test for capping percentages</title>
+<style>
+div { width:300px; background:yellow; height:50px; }
+table { width:150%; }
+td { background:blue; }
+</style>
+<div>
+  <table cellspacing="0" cellpadding="0" border="0">
+    <tr><td>parent div float=left</td></tr>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html
new file mode 100644
index 0000000000..9a5e108505
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>Test for capping percentages</title>
+<link rel="match" href="table-width-150percent-ref.html">
+<style>
+div { width:300px; background:yellow; height:50px; }
+td { background:blue; }
+</style>
+<div>
+  <table width="150%" cellspacing="0" cellpadding="0" border="0">
+    <tr><td>parent div float=left</td></tr>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html
new file mode 100644
index 0000000000..2b0f9e445c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html
@@ -0,0 +1,13 @@
+<style>
+p {
+  padding: 0;
+  margin: 0;
+}
+</style>
+
+<p>a b</p>
+
+<hr>
+
+<p>a</p>
+<p>b</p>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html
new file mode 100644
index 0000000000..5b987e7919
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<link rel="match" href="table-width-ref.html">
+
+<style>
+table {
+  border-collapse: collapse;
+}
+
+td {
+  padding: 0;
+}
+</style>
+
+<!-- width=0 should be treated as 'auto' -->
+<table width=0>
+  <tr>
+    <td>
+      a b
+    </td>
+  </tr>
+</table>
+
+<hr>
+
+<table width=1>
+  <tr>
+    <td>
+      a b
+    </td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html
new file mode 100644
index 0000000000..59c5ca70d4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html
@@ -0,0 +1,30 @@
+<link rel="match" href="table-width-ref.html">
+
+<style>
+table {
+  border-collapse: collapse;
+}
+
+td {
+  padding: 0;
+}
+</style>
+
+<!-- width=0 should be treated as 'auto' -->
+<table width=0>
+  <tr>
+    <td>
+      a b
+    </td>
+  </tr>
+</table>
+
+<hr>
+
+<table width=1>
+  <tr>
+    <td>
+      a b
+    </td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html
new file mode 100644
index 0000000000..2cbcd6a347
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+td { width: 100px; height: 100px; background: green; }
+</style>
+<table>
+  <tr><td></td></tr>
+  <tr><td></td></tr>
+</table>
+There should be 2 green boxes above.
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html
new file mode 100644
index 0000000000..0f37d635a5
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="match" href="tr-transform-and-will-change-ref.html">
+<style>
+tbody { background: green; }
+td { width: 100px; height: 100px; }
+tr { transform: translateX(5px); will-change: transform; }
+</style>
+<table>
+  <tbody>
+    <tr><td></td></tr>
+    <tr><td></td></tr>
+  </tbody>
+</table>
+There should be 2 green boxes above.
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html
new file mode 100644
index 0000000000..2f313f3395
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+table {
+  border-collapse: collapse;
+}
+td {
+  border: 5px solid black;
+  width: 100px;
+  height: 100px;
+}
+</style>
+Passes if there is a grid containing 2x2 squares.
+<table>
+  <tbody>
+    <tr><td></td><td></td></tr>
+    <tr><td></td><td></td></tr>
+  </tbody>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html
new file mode 100644
index 0000000000..5f131e6658
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>Test for transformed tbody and tr with collapsed borders</title>
+<link rel="match" href="transformed-tbody-tr-collapsed-border-ref.html">
+<style>
+table {
+  border-collapse: collapse;
+}
+tbody, tr {
+  transform: translateY(0);
+}
+td {
+  border: 5px solid black;
+  width: 100px;
+  height: 100px;
+}
+</style>
+Passes if there is a grid containing 2x2 squares.
+<table>
+  <tbody>
+    <tr><td></td><td></td></tr>
+    <tr><td></td><td></td></tr>
+  </tbody>
+</table>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml
new file mode 100644
index 0000000000..f5b533c377
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml
@@ -0,0 +1,4 @@
+suggested_reviewers:
+  - emilio
+  - mstensho
+  - zcorpan
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html
new file mode 100644
index 0000000000..f82faee114
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+div {
+  display: block;
+  font-size: 32px;
+  background: lime;
+  width: 10em;
+}
+</style>
+
+<div>legend</div>
+<div>legend</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html
new file mode 100644
index 0000000000..56d296977c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>Absolute/fixed-positioned boxes in LEGEND should be painted on the fieldset content</title>
+<link rel=match href=absolute-fixed-in-legend-ref.html>
+<style>
+.absolute-container {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.absolute-container .legend-content {
+  display: block;
+  font-size: 32px;
+  position: absolute;
+  left: 0px;
+  background: lime;
+  width: 10em;
+}
+
+.fixed-container {
+  contain: paint;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.fixed-container .legend-content {
+  display: block;
+  font-size: 32px;
+  position: fixed;
+  left: 0px;
+  background: lime;
+  width: 10em;
+}
+
+.fieldset-content {
+  background: red;
+  font-size: 32px;
+  width: 10em;
+}
+</style>
+
+<fieldset class="absolute-container">
+  <legend><span class="legend-content">legend</span></legend>
+  <div class="fieldset-content">content</div>
+</fieldset>
+
+<fieldset class="fixed-container">
+  <legend><span class="legend-content">legend</span></legend>
+  <div class="fieldset-content">content</div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html
new file mode 100644
index 0000000000..39acf9eca1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html class="test-wait">
+<head>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+#f {
+  overflow-y: scroll;
+  width: 100px;
+  height: 100px;
+}
+</style>
+</head>
+<body>
+<fieldset id="f">
+  <p>test</p>
+  <p>test</p>
+  <p>test</p>
+  <p>test</p>
+  <p>test</p>
+  <p>test</p>
+</fieldset>
+<script>
+onload = async () => {
+  const actions = new test_driver.Actions();
+  const button = {button: actions.ButtonType.MIDDLE};
+  await actions.
+      pointerMove(50, 50).
+      pointerDown(button).
+      pointerUp(button).
+      send();
+  document.documentElement.className = "";
+};
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html
new file mode 100644
index 0000000000..7fa15da174
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<div style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html
new file mode 100644
index 0000000000..c968ed3f13
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements">
+<link rel="match" href="empty-scrollable-ref.html">
+<fieldset style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html
new file mode 100644
index 0000000000..ff583435a6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+span {
+  border: solid 2px;
+  padding: 10px;
+  margin: 5px;
+}
+</style>
+<div>
+  text <span style="display: inline-block;">line1<br>line2</span>
+</div>
+<div>
+  text <span style="display: inline-flex;">line1<br>line2</span>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html
new file mode 100644
index 0000000000..23f5ad76f3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305890">
+<link rel="match" href="fieldset-baseline-ref.html">
+<style>
+fieldset {
+  border: solid 2px;
+  padding: 10px;
+  margin: 5px;
+}
+</style>
+<div>
+  text <fieldset style="display: inline-block;">line1<br>line2</fieldset>
+</div>
+<div>
+  text <fieldset style="display: inline-flex;">line1<br>line2</fieldset>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html
new file mode 100644
index 0000000000..c38944ae79
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>The fieldset element: block formatting context</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+fieldset { border: none; }
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  background-color: orange;
+}
+</style>
+
+<div class=float></div>
+<fieldset><div class=float></div></fieldset>
+
+<script>
+test(() => {
+  const fieldset = document.querySelector('fieldset');
+  assert_equals(fieldset.offsetTop, 0, 'fieldset.offsetTop');
+  assert_equals(fieldset.offsetLeft, 50, 'fieldset.offsetLeft');
+  assert_equals(fieldset.clientHeight, 50, 'fieldset.clientHeight');
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html
new file mode 100644
index 0000000000..e1247637db
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements">
+<!-- A test for the following paragraph:
+For the purpose of calculating the used 'block-size', if the computed
+'block-size' is not 'auto', the space allocated for the rendered legend's
+margin box that spills out past the border, if any, is expected to be
+subtracted from the 'block-size'. If the content box's block-size would be
+negative, then let the content box's block-size be zero instead.
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 2px solid black;
+}
+legend {
+  height: 102px;
+  background-color: yellow;
+}
+.content {
+  background-color: lime;
+}
+</style>
+<fieldset style="block-size: 200px;">
+<legend>Legend</legend>
+<div class="content" style="height:100%"></div>
+</fieldset>
+
+<fieldset style="block-size: 40px;">
+<legend>Legend</legend>
+<div class="content" style="height:100%"></div>
+</fieldset>
+
+<script>
+test(() => {
+  let cs = document.querySelectorAll('.content');
+  assert_equals(cs[0].offsetHeight, Math.max(202 - 102, 0));
+  assert_equals(cs[1].offsetHeight, Math.max(42 - 102, 0));
+}, 'Test content\'s block-size');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html
new file mode 100644
index 0000000000..563a2aa68d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>fieldset border gap with negative margin</title>
+<link rel=match href=no-red-ref.html>
+<style>
+fieldset { border:none; border-left: 100px solid red; margin: 0; padding: 0; height:100px; }
+legend { padding: 0; margin-left: -100px; width: 100px; height: 100px; transform: rotate(45deg); }
+</style>
+<p>There should be no red.</p>
+<fieldset>
+ <legend></legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html
new file mode 100644
index 0000000000..95e2347121
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>Reference for fieldset border gap</title>
+<style>
+div { position: relative; top: 25px; width: 100px; height: 50px; background: lime; }
+</style>
+<p>There should be no red.</p>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html
new file mode 100644
index 0000000000..1dbef479a9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>fieldset border gap</title>
+<link rel=match href=fieldset-border-gap-position-relative-ref.html>
+<style>
+fieldset, legend { margin: 0; padding: 0; }
+fieldset { border: none; border-top: 100px solid red; width: 100px; }
+legend { width: 100px; height: 50px; background: lime; }
+</style>
+<p>There should be no red.</p>
+<fieldset><legend></legend></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html
new file mode 100644
index 0000000000..9ab10159d8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>fieldset, border-radius and hit testing</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+fieldset { width: 80px; height: 80px; border-radius: 100px; border: 10px solid; background: lime; }
+</style>
+<fieldset>
+</fieldset>
+<script>
+test(() => {
+  assert_equals(document.elementFromPoint(20, 20), document.body);
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html
new file mode 100644
index 0000000000..5cfe13c40d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+div {
+    background-color: green;
+    height: 110px;
+    position: absolute;
+    width: 150px;
+    top: 70px;
+}
+</style>
+<p>There should be no red.</p>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html
new file mode 100644
index 0000000000..7a942076fb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Fieldset with a border-radius and non-opaque border-color</title>
+<link rel="match" href="fieldset-border-radius-with-alpha-ref.html">
+<style>
+fieldset {
+    background-color: green;
+    border: 3px solid rgba(255, 0, 0, 0.9);
+    border-radius: 4px;
+    height: 100px;
+    width: 100px;
+}
+legend {
+    height: 50px;
+    width: 50px;
+}
+div {
+    background-color: green;
+    height: 110px;
+    position: absolute;
+    width: 150px;
+    top: 70px;
+}
+</style>
+<p>There should be no red.</p>
+<fieldset><legend></legend></fieldset>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html
new file mode 100644
index 0000000000..4a9f261895
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>fieldset calculating min-/max-content</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+fieldset { margin: 0; padding: 0; }
+.min-content { width: 0; }
+legend { padding: 0; }
+fieldset, #ref-max-content, #ref-min-content { float: left; clear: left; border: 1px solid; }
+#log { clear: left; }
+</style>
+<fieldset class=max-content><legend>foo fooo</legend>x x</fieldset>
+<fieldset class=max-content><legend>x x</legend>foo fooo</fieldset>
+<div id=ref-max-content>foo fooo</div>
+
+<fieldset class=min-content><legend>foo fooo</legend>x x</fieldset>
+<fieldset class=min-content><legend>x x</legend>foo fooo</fieldset>
+<div id=ref-min-content>fooo</div>
+
+<script>
+test(() => {
+  const ref = document.querySelector('#ref-max-content');
+  for (const e of document.querySelectorAll('.max-content')) {
+    assert_equals(e.clientWidth, ref.clientWidth);
+  }
+}, 'max-content');
+
+test(() => {
+  const ref = document.querySelector('#ref-min-content');
+  for (const e of document.querySelectorAll('.min-content')) {
+    assert_equals(e.clientWidth, ref.clientWidth);
+  }
+}, 'min-content');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html
new file mode 100644
index 0000000000..282c0d4ef1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>Reference for fieldset containing block</title>
+<style>
+p { margin: 0; height: 100px }
+.div1 { position: absolute; top: 108px; width: 100px; height: 100px; background: lime; }
+.div2 { position: absolute; top: 158px; width: 200px; height: 100px; background: lime; }
+</style>
+<p>There should be no red.</p>
+<div class="div1"></div>
+<div class="div2"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html
new file mode 100644
index 0000000000..cefb3584ea
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>fieldset containing block</title>
+<link rel=match href=fieldset-containing-block-ref.html>
+<style>
+p { margin: 0; height: 100px }
+fieldset { position: relative; border: none; padding: 0; margin: 0; }
+legend { padding: 0; width: 100px; height: 50px; background: lime; }
+div { position: absolute; top: 0; width: 100px; height: 50px; background: lime; }
+.behind { height:100px; top: 108px; background: red; }
+
+.fixed-container {
+  filter: invert();
+  overflow: hidden;
+  width: 200px;
+  height: 200px;
+}
+.fixed {
+  position: fixed;
+  width: 400px;
+  height: 100px;
+  background: linear-gradient(to right, #ff00ff 50%, #00ffff 50%);
+}
+.has-fixed {
+  width: 0px;
+  height: 0px;
+}
+</style>
+<p>There should be no red.</p>
+<div class="behind"></div>
+<fieldset><legend></legend><div></div></fieldset>
+
+<fieldset class="fixed-container">
+<legend class="has-fixed"><div style="position:fixed; width:0; height0;"></div></legend>
+<div class="fixed"></div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html
new file mode 100644
index 0000000000..5bd1fbc161
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<title>fieldset content before legend</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+fieldset {
+  /* Paddings might have fractional values by default, and they can cause
+     rounding differences between the test element and the reference element. */
+  padding: 0;
+}
+</style>
+
+<fieldset id=test>
+  X
+  <legend>legend</legend>
+  Y
+</fieldset>
+<fieldset id=ref>
+  <legend>legend</legend>
+  X Y
+</fieldset>
+
+<fieldset id="test2">
+  P<span id="hidden" style="display:none;">AS</span><legend>legend</legend>S
+</fieldset>
+
+<script>
+  test(() => {
+    const testElm = document.getElementById('test');
+    const refElm = document.getElementById('ref');
+    assert_equals(testElm.clientHeight, refElm.clientHeight);
+  });
+
+  test(() => {
+    const testElm = document.getElementById('test2');
+    testElm.clientHeight;
+    const span = document.getElementById('hidden');
+    span.style.display = 'inline';
+    testElm.clientHeight;
+  }, 'Showing a node just before the rendered legend should not crash');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html
new file mode 100644
index 0000000000..6195d8bb05
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1140595">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="height:100px;">
+  <fieldset style="margin:0; padding:0; border:none;">
+    <div id="inner" style="height:59%;"></div>
+  </fieldset>
+</div>
+<script>
+test(() => {
+  let innerDiv = document.querySelector('#inner');
+  assert_equals(innerDiv.clientHeight, 0);
+}, 'A percentage height for an element in an auto-height fieldset should be ignored');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html
new file mode 100644
index 0000000000..b7c080bfac
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<head>
+<meta charset="utf-8">
+<style>
+.control {
+  background: blue;
+  width: 200px;
+  height: 1em;
+}
+.container {
+  border: 2px groove ThreeDFace;
+  margin: 0;
+  padding: 1em;
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <label>Label</label>
+  <div class="control" id="ctrl-d"></div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html
new file mode 100644
index 0000000000..0f12c6f92a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<head>
+<meta charset="utf-8">
+<title>crbug.com/1130174; Non-auto-width block should be right-aligned in an RTL fieldset</title>
+<link rel="match" href="fieldset-content-rtl-ref.html">
+<style>
+.control {
+  background: blue;
+  width: 200px;
+  height: 1em;
+}
+fieldset {
+  border: 2px groove ThreeDFace;
+  margin: 0;
+  padding: 1em;
+}
+</style>
+</head>
+<body>
+<fieldset>
+  <label>Label</label>
+  <div class="control"></div>
+</fieldset>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html
new file mode 100644
index 0000000000..111dcbe533
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1039241">
+<div style="width: min-content;">
+  <div style="writing-mode:vertical-lr;">
+    <fieldset>
+      <div style="width:10%;"></div>
+    </fieldset>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html
new file mode 100644
index 0000000000..9a711383e6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<title>fieldset default style</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+#ref {
+  display: block;
+  margin-left: 2px;
+  margin-right: 2px;
+  /* TODO replace above declarations with these when they are widely supported.
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
+  */
+  border: groove 2px;
+  padding: 0.35em 0.75em 0.625em 0.75em;
+  /* TODO replace above declarations with these when they are widely supported.
+  padding-block-start: 0.35em;
+  padding-inline-end: 0.75em;
+  padding-block-end: 0.625em;
+  padding-inline-start: 0.75em;
+  */
+  min-width: min-content;
+  /* TODO change the above to min-inline-size when it's widely supported. */
+}
+</style>
+<fieldset id=test></fieldset>
+<div id=ref></div>
+<script>
+  const testElm = document.querySelector('#test');
+  const refElm = document.querySelector('#ref');
+  const props = ['display',
+                 'margin-top',
+                 'margin-right',
+                 'margin-bottom',
+                 'margin-left',
+                 'border-top-style',
+                 'border-right-style',
+                 'border-bottom-style',
+                 'border-left-style',
+                 'border-top-width',
+                 'border-right-width',
+                 'border-bottom-width',
+                 'border-left-width',
+                 'padding-top',
+                 'padding-right',
+                 'padding-bottom',
+                 'padding-left',
+                 'min-width',
+                 ];
+  const testStyle = getComputedStyle(testElm);
+  const refStyle = getComputedStyle(refElm);
+  props.forEach(prop => {
+    test(() => {
+      assert_equals(testStyle[prop], refStyle[prop]);
+    }, `${prop}`);
+  });
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html
new file mode 100644
index 0000000000..a8a553c836
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>fieldset and CSS display</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ #inline-ref { display: inline-block; }
+</style>
+<fieldset id="block-ref">x</fieldset>
+<fieldset id="inline-ref">x</fieldset>
+<fieldset id="test">x</fieldset>
+<script>
+  const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width;
+  const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width;
+  const testElm = document.querySelector('#test');
+  // Please only add canonical values to these lists:
+  const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
+                  'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow-root', 'run-in', 'block ruby'];
+  const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container'];
+
+  function test_display(val, expectedWidth) {
+    test(() => {
+      testElm.style.removeProperty('display');
+      testElm.style.display = val;
+      const computed = getComputedStyle(testElm);
+      assert_equals(computed.display, val, `display: ${val} is not supported`);
+      assert_equals(computed.width, expectedWidth);
+    }, `fieldset with display: ${val}`);
+  }
+
+  for (const val of blocks) {
+    test_display(val, blockWidth);
+  }
+
+  for (const val of inlines) {
+    test_display(val, inlineWidth);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html
new file mode 100644
index 0000000000..5d17b91290
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>fieldset and div with display: contents</title>
+<link rel=fieldset-foo-ref.html>
+<style>
+div { display: contents; }
+</style>
+<p>There should be a normal fieldset below with the legend "Foo".</p>
+<fieldset>
+ <div>
+  <legend>Foo</legend>
+ </div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html
new file mode 100644
index 0000000000..c34096f270
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+baseline
+<fieldset style="display: inline-block;">
+  <div style="position: relative;">
+    line1<br>line2
+  </div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html
new file mode 100644
index 0000000000..88aeed28c1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1307140">
+<link rel="match" href="fieldset-dynamic-baseline-ref.html">
+baseline
+<fieldset style="display: inline-block;">
+  <div style="position: relative;">
+    line1<br>line2<div id="target" style="position: absolute;"></div>
+  </div>
+</fieldset>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.top = '10px';
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html
new file mode 100644
index 0000000000..a2b999fa00
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>No crash after stop being an asbolute container.</title>
+<link rel="help" href="https://crbug.com/1395688">
+<style>
+.c2 {
+  transform: rotate3d(0, 1, 0, 45deg);
+  column-width: 100px;
+}
+.c19 {
+  overflow: auto;
+  padding-left: 65536px;
+  column-count: 3;
+}
+
+q {
+  position: absolute;
+  column-width: 1px;
+}
+
+body {
+  column-count: 3;
+}
+</style>
+<script>
+function animationFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
+async function doTest() {
+  document.documentElement.appendChild(document.createElement('body'));
+  await animationFrame();
+  document.body.innerHTML = '<fieldset class=c2><q>q</q></fieldset>';
+  window.scrollBy(28, 71);
+  await animationFrame();
+  document.querySelector('fieldset').setAttribute('class', 'c19');
+  await animationFrame();
+  document.body.remove();
+  await animationFrame();
+  await animationFrame();
+  document.documentElement.classList.remove('test-wait');
+}
+
+doTest();
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html
new file mode 100644
index 0000000000..5bdf78db55
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+*::after { content:"after text"; border:3px solid black;}
+*::before { content:"before text"; border:3px solid black; }
+</style>
+</head>
+<body>
+<fieldset><legend>Legend</legend></fielset>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html
new file mode 100644
index 0000000000..c5fbf53000
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!--
+Chrome had a crash bug in a case of dynamic addition of pseudo elements.
+crbug.com/1242229
+-->
+<html class="reftest-wait">
+<head>
+<link rel="match" href="fieldset-dynamic-pseudo-ref.html">
+<style>
+*::after { content:"after text"; border:3px solid black;}
+*::before { content:"before text"; border:3px solid black; }
+</style>
+</head>
+<body>
+<fieldset><legend>Legend</legend></fielset>
+<script>
+document.styleSheets[0].disabled = true;
+
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    document.styleSheets[0].disabled = false;
+    document.documentElement.className = '';
+  });
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html
new file mode 100644
index 0000000000..9e1c9ed152
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<title>fieldset and CSS Flexbox</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+#test, #ref, #test-inline, #ref-inline {
+  display: flex;
+  justify-content: space-around;
+  margin: 0;
+  padding: 0;
+  border: none
+}
+#test-inline, #ref-inline { display: inline-flex }
+legend {
+  float: left; /* Makes it not the "rendered legend" */
+  padding: 0;
+}
+</style>
+<fieldset id=test>
+ <legend>1</legend>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</fieldset>
+<hr>
+<div id=ref>
+ <legend>1</legend>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</div>
+<hr>
+<fieldset id=test-inline>
+ <legend>1</legend>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</fieldset>
+<div id=ref-inline>
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</div>
+<script>
+  test(() => {
+    const testElm = document.getElementById('test');
+    const refElm = document.getElementById('ref');
+    assert_equals(getComputedStyle(testElm).height,
+                  getComputedStyle(refElm).height, 'height');
+    assert_equals(testElm.querySelector('legend').offsetTop,
+                  testElm.querySelector('div').offsetTop, 'offsetTop')
+  }, "Flex");
+
+  test(() => {
+    const testElm = document.getElementById('test-inline');
+    const refElm = document.getElementById('ref-inline');
+    assert_equals(getComputedStyle(testElm).height,
+                  getComputedStyle(refElm).height, 'height');
+    assert_equals(testElm.querySelector('legend').offsetTop,
+                  testElm.querySelector('div').offsetTop, 'offsetTop')
+
+  }, "Inline flex");
+
+test(() => {
+  const testElm = document.getElementById('test');
+  testElm.style.flexDirection = 'row';
+  const item0 = testElm.querySelectorAll('div')[0];
+  const item1 = testElm.querySelectorAll('div')[1];
+  assert_equals(item0.offsetTop, item1.offsetTop);
+
+  testElm.style.flexDirection = 'column';
+  assert_true(item0.offsetTop < item1.offsetTop);
+}, "Dynamic change of flex-direction");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html
new file mode 100644
index 0000000000..cace814a8c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>Reference with a fieldset and legend "Foo"</title>
+<p>There should be a normal fieldset below with the legend "Foo".</p>
+<fieldset>
+  <legend>Foo</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html
new file mode 100644
index 0000000000..25a36bc42c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>fieldset generated content</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  /* Use Ahem to avoid fractional letter widths. */
+  font: 20px/1 Ahem;
+}
+
+fieldset {
+  display: inline-block;
+  /* Paddings might have fractional values by default, and they can cause
+     rounding differences between the test element and the reference element. */
+  padding: 0;
+}
+
+#test::before, #test::after { content:"X"; }
+</style>
+<fieldset id=test><legend>A</legend>Y</fieldset>
+<fieldset id=ref><legend>A</legend>XYX</fieldset>
+<script>
+test(() => {
+  const testElm = document.querySelector('#test');
+  const refElm = document.querySelector('#ref');
+  assert_equals(testElm.clientWidth, refElm.clientWidth, 'clientWidth');
+  assert_equals(testElm.clientHeight, refElm.clientHeight, 'clientHeight');
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html
new file mode 100644
index 0000000000..bbb71dfa70
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<title>fieldset and CSS Grid</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+#test, #ref, #test-inline, #ref-inline {
+  display: grid;
+  grid-template-columns: auto 50px auto;
+  grid-template-rows: auto 50px auto;
+  margin: 0;
+  padding: 0;
+  border: none
+}
+#test-inline, #ref-inline { display: inline-grid }
+legend {
+  float: left; /* Makes it not the "rendered legend" */
+  padding: 0;
+}
+</style>
+<fieldset id=test>
+ <legend>1</legend>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</fieldset>
+<hr>
+<div id=ref>
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</div>
+<hr>
+<fieldset id=test-inline>
+ <legend>1</legend>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</fieldset>
+<div id=ref-inline>
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+</div>
+<script>
+  test(() => {
+    const testElm = document.getElementById('test');
+    const refElm = document.getElementById('ref');
+    assert_equals(getComputedStyle(testElm).height,
+                  getComputedStyle(refElm).height, 'height');
+    assert_equals(testElm.querySelector('legend').offsetTop,
+                  testElm.querySelector('div').offsetTop, 'offsetTop')
+  }, "Grid");
+
+  test(() => {
+    const testElm = document.getElementById('test-inline');
+    const refElm = document.getElementById('ref-inline');
+    assert_equals(getComputedStyle(testElm).height,
+                  getComputedStyle(refElm).height, 'height');
+    assert_equals(testElm.querySelector('legend').offsetTop,
+                  testElm.querySelector('div').offsetTop, 'offsetTop')
+
+  }, "Inline grid");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html
new file mode 100644
index 0000000000..05b8ca4770
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>Reference for fieldset and dipslay: list-item</title>
+<style>
+  fieldset { margin: 0 40px; }
+</style>
+<p>There should be no bullet points below.</p>
+<fieldset>
+  <legend>X</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html
new file mode 100644
index 0000000000..7726947bec
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>fieldset and dipslay: list-item</title>
+<link rel=match href=fieldset-list-item-ref.html>
+<style>
+  fieldset { margin: 0 40px; display: list-item; }
+</style>
+<p>There should be no bullet points below.</p>
+<fieldset>
+  <legend>X</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html
new file mode 100644
index 0000000000..07c9da85b5
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<style>
+.fieldset {
+  border: 2px solid gray;
+  margin: 1em;
+  padding: 0;
+  width: 20em;
+}
+
+.f1 {
+  overflow: auto;
+  max-height: 3em;
+}
+.f2 {
+  max-height: 0;
+}
+</style>
+
+<div class="fieldset f1">
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+</div>
+
+<div class="fieldset f1">
+<div>foo</div>
+</div>
+
+<div class="fieldset f2">
+<div>foo</div>
+</div>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html
new file mode 100644
index 0000000000..170dedd606
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="help" href="http://crbug.com/1151858">
+<link rel="match" href="fieldset-max-block-size-ref.html">
+<style>
+fieldset {
+  border: 2px solid gray;
+  margin: 1em;
+  padding: 0;
+  width: 20em;
+}
+
+.f1 {
+  overflow: auto;
+  max-height: 3em;
+}
+.f2 {
+  max-height: 0;
+}
+</style>
+
+<fieldset class="f1">
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+<div>foo</div>
+</fieldset>
+
+<fieldset class="f1">
+<div>foo</div>
+</fieldset>
+
+<fieldset class="f2">
+<div>foo</div>
+</fieldset>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html
new file mode 100644
index 0000000000..bdb2c2fd94
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>fieldset multicol</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ #test { margin: 0; padding: 0; border: none }
+ #test, #ref { columns: 5 }
+ p { margin: 0 }
+</style>
+<fieldset id=test>
+  <p>1
+  <p>2
+  <p>3
+  <p>4
+  <p>5
+</fieldset>
+<div id=ref>
+  <p>1
+  <p>2
+  <p>3
+  <p>4
+  <p>5
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.getElementById('test')).height,
+                  getComputedStyle(document.getElementById('ref')).height);
+  });
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html
new file mode 100644
index 0000000000..c47c7cdd5d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+fieldset {
+  height: 200px;
+  overflow: scroll;
+  padding: 0;
+}
+
+.content {
+  height: 400px;
+}
+</style>
+
+<fieldset>
+  <legend>Legend</legend>
+  <div class="content"></div>
+</fieldset>
+
+<script>
+test(() => {
+  const fieldset = document.querySelector('fieldset');
+  assert_equals(getComputedStyle(fieldset)['overflow-x'], 'scroll');
+  assert_equals(getComputedStyle(fieldset)['overflow-y'], 'scroll');
+  assert_equals(fieldset.scrollHeight, 400);
+  fieldset.scrollTop = 500;
+  assert_greater_than_equal(fieldset.scrollTop, 200);
+}, 'Test cssom-view API for FIELDSET');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html
new file mode 100644
index 0000000000..9fe632f7c2
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>Reference for fieldset and overflow</title>
+<p>It should say PASS below.</p>
+PASS
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html
new file mode 100644
index 0000000000..cacbdbae00
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>fieldset and overflow</title>
+<link rel=match href=fieldset-overflow-hidden-ref.html>
+<style>
+fieldset { margin:0; padding: 0; overflow: hidden; border: none; border-top: 1em solid transparent; }
+legend { padding: 0; }
+</style>
+<p>It should say PASS below.</p>
+<fieldset>
+ <legend>PASS</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html
new file mode 100644
index 0000000000..42ecb22aef
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<title>Reference for fieldset overflow</title>
+<style>
+.fieldset, .legend {
+  border: 1em solid;
+  background: lime;
+}
+.fieldset {
+  height: 1em;
+  margin-top: 2em;
+}
+.legend {
+  height: 1em;
+  width: 5em;
+  line-height: 1;
+  margin-top: -4em;
+  margin-left: 1em;
+  margin-bottom: 1em;
+}
+
+.fieldset2 {
+  background: lime;
+  padding: 50px;
+  max-height: 50px;
+  overflow: scroll;
+}
+
+.fieldset3 {
+  width: 20em;
+  max-height: 250px;
+  padding: 7px;
+  margin: 0;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1em solid transparent;
+  border-top: 40px solid transparent;
+}
+</style>
+<p>There should be no red.</p>
+<div class=fieldset>
+</div>
+<div class=legend></div>
+
+<div class=fieldset2>
+  <div style="height:200px; background:blue"></div>
+</div>
+
+<div class="fieldset3">
+  <p>
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+  </p>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html
new file mode 100644
index 0000000000..83813f9020
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<title>fieldset overflow</title>
+<link rel=match href=fieldset-overflow-ref.html>
+<style>
+fieldset, legend {
+  border: 1em solid;
+  margin: 0;
+  padding: 0;
+  background: lime
+}
+#f1 {
+  overflow: auto;
+  height: 2em;
+}
+legend {
+  height: 1em;
+  width: 5em;
+}
+div {
+  background: red;
+  height: 2em;
+}
+
+#f2 {
+  border: none;
+  padding: 50px;
+  max-height: 50px;
+  overflow: scroll;
+}
+
+#f3 {
+  width: 20em;
+  max-height: 250px;
+  padding: 7px;
+  overflow: auto;
+  box-sizing: border-box;
+  border-color: transparent;
+  background: transparent;
+}
+
+#f3 legend {
+  height: 40px;
+  border: none;
+  color: transparent;
+  background: transparent;
+}
+</style>
+<p>There should be no red.</p>
+<fieldset id="f1">
+ <legend></legend>
+ <div></div>
+ <div id=last></div>
+</fieldset>
+
+<!-- crbug.com/1247733 -->
+<fieldset id="f2">
+  <div style="height:200px; background:blue"></div>
+</fieldset>
+<script>
+ document.getElementById('last').scrollIntoView();
+</script>
+
+<!-- crbug.com/1282408 -->
+<fieldset id="f3">
+  <legend>Legend</legend>
+  <p>
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+  </p>
+</fieldset>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html
new file mode 100644
index 0000000000..13b262a804
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>Reference for fieldset painting order</title>
+<style>
+div { width: 200px; height: 200px; }
+#a { background: green; }
+#b { background: lime; position: relative; top: -100px; left: 100px; }
+</style>
+<p>There should be no red.</p>
+<div id=a></div>
+<div id=b></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html
new file mode 100644
index 0000000000..7bd2cedb1b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>fieldset painting order</title>
+<link rel=match href=fieldset-painting-order-ref.html>
+<style>
+fieldset, legend { margin: 0; padding: 0; }
+fieldset {
+  border: 100px solid red;
+  width: 0;
+  min-width: 0;
+  height: 0;
+}
+legend { width: 200px; height: 200px; margin-left: -100px; background: green; }
+legend > span { float: right; margin-top: 100px; width: 100px; height: 100px; background: red; }
+fieldset > div { margin-top: -100px; background: lime; width: 200px; height: 200px; }
+</style>
+<p>There should be no red.</p>
+<fieldset><legend><span></span></legend><div></div></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html
new file mode 100644
index 0000000000..e98de892d3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<title>fieldset percentage block size</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; }
+ .rendered-legend { block-size: 80%; background: lime; padding: 0; }
+ .second-legend { block-size: 100%; background: yellow; padding: 0; }
+ fieldset > div { block-size: 100%; background: fuchsia; }
+</style>
+<div style="writing-mode: horizontal-tb">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<div style="writing-mode: vertical-lr">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<div style="writing-mode: vertical-rl">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<table cellspacing="0" cellpadding="0" style="width:100px; height:60px;">
+  <tr>
+    <td>
+      <fieldset style="border:none; padding:0; height:100%; margin:0; margin-top:13px;">
+        <div><div id="elm"></div></div>
+      </fieldset>
+    </td>
+  </tr>
+</table>
+
+<script>
+ for (const div of document.querySelectorAll('div[style]')) {
+   for (const el of div.firstElementChild.children) {
+     test(() => {
+       const expected = el.textContent === 'rendered legend' ? '80px' : '30px';
+       // 30px because: 100px - (max(0, legend-block-size - border-block-start))
+       assert_equals(getComputedStyle(el).blockSize, expected);
+     }, `${el.textContent} (${div.getAttribute('style')})`);
+   }
+ }
+
+// crbug.com/1138204. Though the specification doesn't mention this behavior,
+// there must be no doubt about the expected behavior.
+test(() => {
+  const fieldset = document.querySelector('table fieldset');
+  const initialHeight = fieldset.offsetHeight;
+  document.querySelector('#elm').style.display = 'none';
+  assert_equals(fieldset.offsetHeight, initialHeight);
+}, 'Fieldset with a percentage height should not increase the height on every reflow.');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html
new file mode 100644
index 0000000000..61ad4ed4c9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>fieldset percentage padding</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ body { margin: 0; }
+ .outer { width: 500px; position: relative; }
+ fieldset { width: 100px; padding: 10%; margin: 0; border: none; }
+ .overflow { overflow: auto; }
+</style>
+<div class=outer>
+ <fieldset>
+  <div id=no-overflow>x</div>
+ </fieldset>
+</div>
+<div class=outer>
+ <fieldset class=overflow>
+  <div id=with-overflow>x</div>
+ </fieldset>
+</div>
+<script>
+const noOverflow = document.getElementById('no-overflow');
+const withOverflow = document.getElementById('with-overflow');
+for (const div of [noOverflow, withOverflow]) {
+  test(() => {
+    assert_equals(div.offsetLeft, 50, "offsetLeft");
+    assert_equals(div.clientWidth, 100, "clientWidth");
+    assert_equals(div.offsetTop, 50, "offsetTop");
+  }, div.id);
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html
new file mode 100644
index 0000000000..e77bb69d7f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<style>
+  div {
+    border: 1px solid;
+    padding: 10px;
+    resize: both;
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html
new file mode 100644
index 0000000000..6a34a7465c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>resize property on fieldset</title>
+<link rel="match" href="fieldset-resize-ref.html">
+<style>
+  fieldset {
+    margin: 0;
+    border: 1px solid;
+    padding: 10px;
+    resize: both;
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<fieldset></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html
new file mode 100644
index 0000000000..3b46eb03c6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>fieldset and shadow DOM</title>
+<link rel=fieldset-foo-ref.html>
+<p>There should be a normal fieldset below with the legend "Foo".</p>
+<template id="my-fieldset">
+  <fieldset><slot name="my-text"></slot></fieldset>
+</template>
+
+<my-fieldset>
+  <legend slot="my-text">Foo</legend>
+</my-fieldset>
+
+<script>
+customElements.define('my-fieldset',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      const template = document.getElementById('my-fieldset');
+      const templateContent = template.content;
+
+      this.attachShadow({mode: 'open'}).appendChild(
+        templateContent.cloneNode(true)
+      );
+    }
+  }
+);
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html
new file mode 100644
index 0000000000..8200e67194
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>Reference for Fieldset and transform: translateZ(0)</title>
+<style>
+fieldset { background: #eee; margin: 0 0 10px; }
+</style>
+<p>It should say PASS below without anything obscuring the text.</p>
+
+<fieldset>
+  <legend>PASS</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html
new file mode 100644
index 0000000000..df30468b00
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Fieldset and transform: translateZ(0)</title>
+<link rel=match href=fieldset-transform-translatez-ref.html>
+<style>
+#outer { transform: translateZ(0); }
+fieldset { background: #eee; overflow: hidden; margin: 0 0 10px; }
+#inner { position: relative; }
+</style>
+<p>It should say PASS below without anything obscuring the text.</p>
+<div id=outer>
+  <fieldset>
+    <legend>
+      <div id="inner">PASS</div>
+    </legend>
+  </fieldset>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html
new file mode 100644
index 0000000000..29c28ea5f8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Reference for fieldset vertical</title>
+<link rel=stylesheet href=resources/fieldset-vertical.css>
+<p>vertical-lr
+<div style="writing-mode: vertical-lr">
+ <div class=fieldset><div class="legend top">foo bar</div>normal</div>
+ <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div>
+ <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div>
+ <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div>
+ <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div>
+ <div class=fieldset><div class="legend top">foo bar</div>align=left</div>
+ <div class=fieldset><div class="legend center">foo bar</div>align=center</div>
+ <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div>
+</div>
+<hr>
+<p>vertical-rl
+<div style="writing-mode: vertical-rl">
+ <div class=fieldset><div class="legend top">foo bar</div>normal</div>
+ <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div>
+ <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div>
+ <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div>
+ <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div>
+ <div class=fieldset><div class="legend top">foo bar</div>align=left</div>
+ <div class=fieldset><div class="legend center">foo bar</div>align=center</div>
+ <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html
new file mode 100644
index 0000000000..c11b466669
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>fieldset vertical</title>
+<link rel=stylesheet href=resources/fieldset-vertical.css>
+<link rel=match href=fieldset-vertical-ref.html>
+<p>vertical-lr
+<div style="writing-mode: vertical-lr">
+ <fieldset><legend>foo bar</legend>normal</fieldset>
+ <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset>
+ <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset>
+ <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset>
+ <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset>
+ <fieldset><legend align=left>foo bar</legend>align=left</fieldset>
+ <fieldset><legend align=center>foo bar</legend>align=center</fieldset>
+ <fieldset><legend align=right>foo bar</legend>align=right</fieldset>
+</div>
+<hr>
+<p>vertical-rl
+<div style="writing-mode: vertical-rl">
+ <fieldset><legend>foo bar</legend>normal</fieldset>
+ <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset>
+ <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset>
+ <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset>
+ <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset>
+ <fieldset><legend align=left>foo bar</legend>align=left</fieldset>
+ <fieldset><legend align=center>foo bar</legend>align=center</fieldset>
+ <fieldset><legend align=right>foo bar</legend>align=right</fieldset>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html
new file mode 100644
index 0000000000..f6eead471c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<title>
+  legend and float and position: absolute/fixed when the display type of
+  the fieldset is flex.
+</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ body { margin: 0; }
+ fieldset {
+   border: 10px solid;
+   display: flex;
+   margin: 0;
+   padding: 20px;
+   width: 300px;
+ }
+ legend { height: 10px; }
+ #legend1 { float: left; }
+ #legend2 { float: right; }
+ #legend3 { position: absolute; }
+ #legend4 { position: fixed; }
+</style>
+<fieldset id=fieldset>
+  <div>div</div>
+  <legend id=legend1>legend1</legend>
+  <legend id=legend2>legend2</legend>
+  <legend id=legend3>legend3</legend>
+  <legend id=legend4>legend4</legend>
+  <legend id=legend5>legend5</legend>
+</fieldset>
+<script>
+ const fieldset = document.getElementById('fieldset');
+ const legends = document.getElementsByTagName('legend');
+ const [legend1, legend2, legend3, legend4, legend5] = legends;
+ const expectedTop = 0;
+ const expectedLeft = 10 + 20;
+
+ function assert_rendered_legend(legend) {
+   assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`);
+   assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`);
+   for (const other of legends) {
+     if (other === legend) {
+       continue;
+     }
+     if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) {
+       assert_unreached(`${other.id} should not be the "rendered legend"`);
+     }
+   }
+ }
+
+ test(t => {
+   assert_rendered_legend(legend5);
+ }, 'no dynamic changes');
+
+ test(t => {
+   const legend = document.createElement('legend');
+   t.add_cleanup(() => {
+     legend.remove();
+   });
+   legend.id = 'script-inserted';
+   legend.textContent = 'script-inserted legend';
+   fieldset.insertBefore(legend, legend1);
+   assert_rendered_legend(legend);
+   legend.remove();
+   assert_rendered_legend(legend5);
+ }, 'inserting a new legend and removing it again');
+
+ test(t => {
+   t.add_cleanup(() => {
+     legend1.id = 'legend1';
+     legend2.id = 'legend2';
+   });
+   legend2.id = '';
+   assert_rendered_legend(legend2);
+   legend1.id = '';
+   assert_rendered_legend(legend1);
+   legend1.id = 'legend1';
+   assert_rendered_legend(legend2);
+   legend2.id = 'legend2';
+   assert_rendered_legend(legend5);
+ }, 'dynamic changes to float');
+
+ test(t => {
+   t.add_cleanup(() => {
+     legend3.id = 'legend3';
+     legend4.id = 'legend4';
+   });
+   legend4.id = '';
+   assert_rendered_legend(legend4);
+   legend3.id = '';
+   assert_rendered_legend(legend3);
+   legend3.id = 'legend3';
+   assert_rendered_legend(legend4);
+   legend4.id = 'legend4';
+   assert_rendered_legend(legend5);
+ }, 'dynamic changes to position');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html
new file mode 100644
index 0000000000..954bcab573
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p>There should be a green box below.</p>
+<div style="background: green; width: 100px; height: 100px;"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html
new file mode 100644
index 0000000000..aa51ebac62
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="match" href="grid-template-propagation-ref.html">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222988">
+<link rel="help" href="https://html.spec.whatwg.org/C/#anonymous-fieldset-content-box">
+<style>
+fieldset {
+  display: grid;
+  grid-template: auto / 1fr;
+  grid-template-areas: "a";
+  width: 100px;
+  height: 100px;
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+</style>
+<p>There should be a green box below.</p>
+<fieldset>
+  <div style="background: green; grid-area: a"></div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html
new file mode 100644
index 0000000000..aad552dbe2
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1211926">
+<fieldset id="fieldset">
+  <legend id="legend"></legend>
+  <div></div>
+</fieldset>
+<script>
+  document.body.offsetTop;
+  fieldset.style.columns = "2";
+  legend.style.position = "relative";
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html
new file mode 100644
index 0000000000..29df29d177
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>legend align to justify-self</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<fieldset><legend>x</legend></fieldset>
+<fieldset><legend align=left>x</legend></fieldset>
+<fieldset><legend align=center>x</legend></fieldset>
+<fieldset><legend align=right>x</legend></fieldset>
+<fieldset><legend align=lEfT>x</legend></fieldset>
+<fieldset><legend align=cEnTeR>x</legend></fieldset>
+<fieldset><legend align=rIgHt>x</legend></fieldset>
+<!-- invalid values -->
+<fieldset><legend align=justify>x</legend></fieldset>
+<fieldset><legend align="left ">x</legend></fieldset>
+<!-- dir -->
+<fieldset><legend dir=ltr>x</legend></fieldset>
+<fieldset><legend dir=rtl>x</legend></fieldset>
+<fieldset dir=rtl><legend dir=ltr>x</legend></fieldset>
+<fieldset dir=rtl><legend dir=rtl>x</legend></fieldset>
+<script>
+for (const fieldset of document.querySelectorAll('fieldset')) {
+  test(() => {
+  	const legend = fieldset.firstChild;
+  	const align = legend.align.toLowerCase();
+  	let expected = 'auto';
+    switch (align) {
+      case 'left': expected = 'left'; break;
+      case 'center': expected = 'center'; break;
+      case 'right': expected = 'right'; break;
+    }
+    assert_equals(getComputedStyle(legend).justifySelf, expected);
+  }, `${fieldset.outerHTML}`)
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html
new file mode 100644
index 0000000000..01483bf8ad
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>legend align does not map to text-align</title>
+<!-- See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1488228 -->
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ legend { width: 13em }
+</style>
+<fieldset><legend>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset>
+<fieldset><legend align=left>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset>
+<fieldset><legend align=center>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset>
+<fieldset><legend align=right>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset>
+<fieldset><legend align=justify>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset>
+<script>
+function test_align(selectorTest, expectedAlign) {
+  const testElm = document.querySelector(selectorTest);
+  test(() => {
+    assert_equals(getComputedStyle(testElm).textAlign, expectedAlign);
+  }, selectorTest);
+}
+
+test_align('legend', 'start');
+
+for (const val of ['left', 'center', 'right', 'justify']) {
+  test_align(`legend[align=${val}]`, 'start');
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html
new file mode 100644
index 0000000000..e774599819
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<title>legend align</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<fieldset><legend align=left>x</legend></fieldset>
+<fieldset><legend align=center>x</legend></fieldset>
+<fieldset><legend align=right>x</legend></fieldset>
+<fieldset><legend align=justify>x</legend></fieldset>
+<div align=left>
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<div align=center>
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<div align=right>
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<div align=justify>
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<div style="text-align: center">
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<div style="text-align: center" align=center>
+ <fieldset><legend>x</legend></fieldset>
+</div>
+<fieldset><legend style="margin: 0 auto">x</legend></fieldset>
+<fieldset><legend style="margin: 0 0 0 auto">x</legend></fieldset>
+<fieldset dir=rtl><legend>x</legend></fieldset>
+<fieldset dir=rtl><legend style="text-align: left">x</legend></fieldset>
+<script>
+function test_align(selectorTest, selectorRef) {
+  const testElm = document.querySelector(selectorTest);
+  const refElm = document.querySelector(selectorRef);
+  test(() => {
+    assert_equals(testElm.offsetLeft, refElm.offsetLeft, `expected ${selectorRef}`);
+  }, selectorTest);
+}
+
+for (const val of ['left', 'center', 'right', 'justify']) {
+  test_align(`div[align=${val}] legend`, `legend[align=left]`);
+}
+
+test_align(`div[style="text-align: center"] legend`, `legend[align=left]`);
+test_align(`div[style="text-align: center"][align=center] legend`, `legend[align=left]`);
+test_align(`legend[style="margin: 0 auto"]`, `legend[align=center]`);
+test_align(`legend[style="margin: 0 0 0 auto"]`, `legend[align=right]`);
+test_align(`fieldset[dir=rtl] legend`, `legend[align=right]`);
+test_align(`fieldset[dir=rtl] legend[style="text-align: left"]`, `legend[align=right]`);
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html
new file mode 100644
index 0000000000..8b1258727f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>legend inline auto margins</title>
+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301">
+<style>
+body, html { padding:0; margin: 0; }
+div {
+  border: 1px solid black;
+  border-width: 10px 17px 7px 23px;
+  padding: 0;
+  margin: 0;
+  width: 448px;
+  height: 5px;
+  margin-top: 5px;
+  position: relative;
+}
+span {
+  position: absolute;
+  top: -15px;
+  width: 200px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  background: grey;
+}
+center { width: 200px; height: 20px; background: red; }
+</style>
+</head>
+<body>
+  <div><span style="right:17px"></span></div>
+  <div><span style="left:31px"></span></div>
+  <div><span style="left:131px"></span></div>
+  <div><span style="right:32px"></span></div>
+  <div><span style="left:46px"></span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html
new file mode 100644
index 0000000000..dd1964ba25
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>legend inline auto margins</title>
+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301">
+<link rel="match" href="legend-auto-margins-ref.html">
+<style>
+body, html { padding:0; margin: 0; }
+fieldset {
+  border: 1px solid black;
+  border-width: 10px 17px 7px 23px;
+  padding: 0 17px 0 31px;
+  margin: 0;
+  width: 400px;
+}
+legend {
+  width: 200px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  background: grey;
+}
+</style>
+</head>
+<body>
+  <fieldset><legend style="margin-left:auto"></legend></fieldset>
+  <fieldset><legend style="margin-right:auto"></legend></fieldset>
+  <fieldset><legend style="margin:0 auto"></legend></fieldset>
+  <fieldset><legend style="margin:0 15px 0 auto"></legend></fieldset>
+  <fieldset><legend style="margin:0 auto 0 15px"></legend></fieldset>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html
new file mode 100644
index 0000000000..4e95391797
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<title>The legend element: block formatting context</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+/* Set margin and padding for fieldset to 0 to make things simpler */
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+.wrapper {
+  height: 200px;
+  position: relative;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  background-color: orange;
+}
+</style>
+
+<div class=wrapper>
+ <div class=float></div>
+ <legend id=in-body><div class=float></div></legend>
+ <div class=float></div>
+</div>
+
+<div class=wrapper>
+ <fieldset>
+  <div class=float></div>
+  <legend id=rendered-legend><div class=float></div></legend>
+  <legend id=in-fieldset-second-child><div class=float></div></legend>
+  <div><legend id=in-fieldset-descendant><div class=float></div></legend></div>
+ </fieldset>
+</div>
+
+<script>
+const fieldsetBorderWidth = 2;
+const legendPadding = 2;
+
+test(() => {
+  const legend = document.getElementById('in-body');
+  assert_equals(legend.offsetLeft, 0, 'legend.offsetLeft');
+  assert_equals(legend.offsetTop, 0, 'legend.offsetTop');
+  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');
+  const divAfter = legend.nextElementSibling;
+  assert_equals(divAfter.offsetLeft, 100, 'divAfter.offsetLeft');
+  assert_equals(divAfter.offsetTop, 0, 'divAfter.offsetTop');
+}, 'in-body');
+
+test(() => {
+  const legend = document.getElementById('rendered-legend');
+  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');
+  assert_equals(legend.offsetTop, 0, 'legend.offsetTop');
+  assert_equals(legend.clientHeight, 50, 'legend.clientHeight');
+  const divChild = legend.firstChild;
+  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + legendPadding, 'divChild.offsetLeft');
+  assert_equals(divChild.offsetTop, 0, 'divChild.offsetTop');
+}, 'rendered-legend');
+
+test(() => {
+  const legend = document.getElementById('in-fieldset-second-child');
+  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');
+  assert_equals(legend.offsetTop, 50, 'legend.offsetTop');
+  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');
+  const divChild = legend.firstChild;
+  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50, 'divChild.offsetLeft');
+  assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop');
+}, 'in-fieldset-second-child');
+
+test(() => {
+  const legend = document.getElementById('in-fieldset-descendant');
+  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');
+  assert_equals(legend.offsetTop, 50, 'legend.offsetTop');
+  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');
+  const divChild = legend.firstChild;
+  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50 + 50, 'divChild.offsetLeft');
+  assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop');
+}, 'in-fieldset-descendant');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html
new file mode 100644
index 0000000000..1680cc8884
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html
@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference for legend block-axis margins</title>
+<style>
+.fieldset {
+  display: block;
+  position: relative;
+  width: 40px;
+  border: 2px solid blue;
+  padding: 4px;
+}
+.legend {
+  display: block;
+  position: absolute;
+  width: 10px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  background: grey;
+}
+
+.t2 .fieldset { border-top-width: 12px; }
+.t3 .fieldset { border-top-width: 12px; }
+.t3 .legend { height: 12px; background:white; }
+.legend > x { display:block; position:relative; height:6px; background:grey; margin-top:3px; }
+
+div { border: 1px solid;  margin: 0 2px 10px 0; }
+c { display:block; height:10px; background: lightgrey; }
+f { float: left; }
+</style>
+</head>
+<body>
+
+<f>
+<div>
+  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:19px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-12px"></span><c style="margin-top:8px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:19px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:29px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-2px; z-index:1"></span><c style="position:relative; z-index:1"></c></span>
+</div>
+</f>
+
+<f class=t2>
+<div>
+  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:14px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:14px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:24px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="top:-12px; height:16px"></span><c></c></span>
+</div>
+</f>
+
+<f class=t3>
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset" style="margin-top: 4px"><span class="legend" style="margin-top: -16px"><x style="top:3px"></x></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:4px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:14px"></c></span>
+</div>
+
+<div>
+  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
+</div>
+</f>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html
new file mode 100644
index 0000000000..9ca9e18adf
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html
@@ -0,0 +1,139 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>legend block-axis margins</title>
+  <link rel="match" href="legend-block-margins-2-ref.html">
+<style>
+fieldset {
+  width: 40px;
+  border: 2px solid blue;
+  padding: 4px;
+  margin: 0;
+}
+legend {
+  width: 10px;
+  height: 20px;
+  padding: 0;
+  background: grey;
+
+}
+
+.t2 fieldset { border-top-width: 12px; }
+.t3 fieldset { border-top-width: 12px; }
+.t3 legend { height: 6px; }
+
+div { border: 1px solid;  margin: 0 2px 10px 0; }
+c { display:block; height:10px; background: lightgrey; }
+f { float: left; }
+</style>
+</head>
+<body>
+
+<f>
+<div>
+  <fieldset><legend></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset>
+</div>
+</f>
+
+<f class=t2>
+<div>
+  <fieldset><legend></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset>
+</div>
+</f>
+
+<f class=t3>
+<div>
+  <fieldset><legend></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset>
+</div>
+
+<div>
+  <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset>
+</div>
+</f>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html
new file mode 100644
index 0000000000..f2701d26f3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Reference for legend block margins</title>
+<style>
+body { margin: 0; }
+.fieldset { margin: 2em 1em 1em 1em; border: 1em solid green; }
+.legend { position: absolute; margin-top: -1em; margin-left: 1em; background: white; height: 1em; }
+.inner { margin: 3em 1em 1em 1em; height: 1em; }
+</style>
+<p>There should be no red.</p>
+<div class=fieldset>
+  <div class=legend>X</div>
+  <div class=inner>Y</div>
+</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html
new file mode 100644
index 0000000000..98cd16c7c1
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>legend block margins</title>
+<link rel=match href=legend-block-margins-ref.html>
+<style>
+ body { margin: 0; }
+ fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; }
+ legend { margin: 1em 1em 2em 1em; height: 1em; padding: 0; }
+ .inner { margin: 1em; height: 1em; }
+ .behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 7em; background: red; z-index: -1; }
+</style>
+<p>There should be no red.</p>
+<div class=behind></div>
+<fieldset>
+  <legend>X</legend>
+  <div class=inner>Y</div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html
new file mode 100644
index 0000000000..a4eda6e3ef
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements">
+<!-- A test for the following paragraph:
+The element is expected to be positioned in the block-flow direction such that
+its border box is centered over the border on the block-start side of the
+fieldset element.
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 100px solid black;
+}
+legend {
+  height: 0px;
+  border-color: yellow;
+  border-style: solid;
+}
+</style>
+<fieldset>
+<legend style="border-width:50px"></legend>
+<br>
+</fieldset>
+<br>
+
+<fieldset>
+<legend style="border-width:25px 50px"></legend>
+<br>
+</fieldset>
+<br>
+
+<fieldset>
+<legend style="border-width:10px 50px 40px 50px"></legend>
+<br>
+</fieldset>
+<br>
+
+<fieldset>
+<legend style="border-width:40px 50px 10px 50px"></legend>
+<br>
+</fieldset>
+
+<script>
+function legendBlockOffset(fieldset) {
+  let legend = fieldset.querySelector('legend');
+  return legend.getBoundingClientRect().y - fieldset.getBoundingClientRect().y;
+}
+
+test(() => {
+  let fieldsets = document.querySelectorAll('fieldset');
+  assert_equals(legendBlockOffset(fieldsets[0]), 0);
+  assert_equals(legendBlockOffset(fieldsets[1]), 25);
+  assert_equals(legendBlockOffset(fieldsets[2]), 25);
+  assert_equals(legendBlockOffset(fieldsets[3]), 25);
+}, 'Legend\'s border-box should be centere on the fieldset border');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html
new file mode 100644
index 0000000000..e6eff47e53
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>Reference for Rendering of display: none legend</title>
+<style>
+ div { border: 2em solid lime; width: 0; }
+</style>
+<p>There should be a green box below.</p>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html
new file mode 100644
index 0000000000..abf3c45df7
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>Rendering of display: none legend</title>
+<link rel=match href=legend-display-none-rendering-ref.html>
+<style>
+ fieldset { border: 2em solid lime; width: 0; margin: 0; padding: 0; }
+ legend { display: none; background: red; }
+</style>
+<p>There should be a green box below.</p>
+<fieldset>
+ <legend>FAIL</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html
new file mode 100644
index 0000000000..689454ac49
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>legend display: none</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ legend { display: none; }
+</style>
+<fieldset>
+ <legend>Foo</legend>
+</fieldset>
+<script>
+ test(() => {
+   const display = getComputedStyle(document.querySelector('legend')).display;
+   assert_equals(display, 'none');
+ });
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html
new file mode 100644
index 0000000000..189b195f61
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>Reference for rendered legend and CSS display rendering</title>
+<style>
+body { margin: 0; }
+div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; }
+.padding { padding-left: 5em; }
+.margin { margin-left: 5em; }
+.cell { display: inline-block; width: 50%; }
+.ruby { display: block; }
+</style>
+<div><span class=cell>table</span><span class=cell>table</span></div>
+<div class=padding>table-row-group</div>
+<div class=padding>table-header-group</div>
+<div class=padding>table-footer-group</div>
+<div class=padding>table-row</div>
+<div class=margin>table-cell</div>
+<div class=padding>table-column-group</div>
+<div class=padding>table-column</div>
+<div>table-caption</div>
+<div>flow</div>
+<div>flow-root</div>
+<div>run-in</div>
+<div>inline</div>
+<div>inline-block</div>
+<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div>
+<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div>
+<div>ruby-base</div>
+<div>ruby-text</div>
+<div>ruby-base-container</div>
+<div>ruby-text-container</div>
+<div><span class=cell>grid</span><span class=cell>grid</span></div>
+<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div>
+<div><span class=cell>flex</span><span class=cell>flex</span></div>
+<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html
new file mode 100644
index 0000000000..ba6610503a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<title>rendered legend and CSS display rendering</title>
+<link rel=match href=legend-display-rendering-ref.html>
+<style>
+body { margin: 0; }
+fieldset { margin: 0; padding: 0; border: none; }
+legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; }
+[style="display: table"] span,
+[style="display: inline-table"] span { display: table-cell; }
+[style="display: table-row-group"],
+[style="display: table-header-group"],
+[style="display: table-footer-group"],
+[style="display: table-row"],
+[style="display: table-column-group"],
+[style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ }
+[style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ }
+.rb { display: ruby-base; }
+.rt { display: ruby-text; }
+[style="display: grid"],
+[style="display: inline-grid"] { grid-template-columns: auto auto; }
+[style="display: flex"] span,
+[style="display: inline-flex"] span { display: block; flex-grow: 1 }
+</style>
+<fieldset>
+ <legend style="display: table"><span>table</span><span>table</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-row-group">table-row-group</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-header-group">table-header-group</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-footer-group">table-footer-group</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-row">table-row</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-cell">table-cell</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-column-group">table-column-group</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-column">table-column</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: table-caption">table-caption</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: flow">flow</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: flow-root">flow-root</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: run-in">run-in</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: inline">inline</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: inline-block">inline-block</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: ruby-base">ruby-base</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: ruby-text">ruby-text</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: ruby-base-container">ruby-base-container</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: ruby-text-container">ruby-text-container</legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: grid"><span>grid</span><span>grid</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: flex"><span>flex</span><span>flex</span></legend>
+</fieldset>
+
+<fieldset>
+ <legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend>
+</fieldset>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html
new file mode 100644
index 0000000000..b6c57a67ba
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<title>rendered legend and CSS display</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+legend { width:initial; }
+</style>
+<fieldset><legend id="ref">x</legend></fieldset>
+<fieldset><legend id="test">x</legend></fieldset>
+<script>
+  const refElm = document.querySelector('#ref');
+  const refStyle = getComputedStyle(refElm);
+  const testElm = document.querySelector('#test');
+  const values = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
+                  'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in','inline',
+                  'inline-block', 'inline-table', 'block ruby', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container',
+                  'grid', 'inline-grid', 'flex', 'inline-flex'];
+  const extraStyle = ['', 'overflow:hidden', 'columns:1', 'overflow:hidden;columns:1'];
+
+  for (const style of extraStyle) {
+    for (const val of values) {
+      test(() => {
+        testElm.style.removeProperty('display');
+        testElm.style = style;
+        testElm.style.display = val;
+        const computed = getComputedStyle(testElm);
+        // Note that computed value is different from the used value.
+        // E.g., if ruby is not supported, the following assertion will
+        // fail as the computed value of display will be block.
+        // If ruby is supported, computed.display will return "ruby",
+        // but the used value is supposed to be "block ruby".
+        // Also, 'flow' is serialized as 'block' for legacy reasons.
+        let expected = val == 'flow' ? 'block' : val;
+        assert_equals(computed.display, expected, `display: ${val} is not supported`);
+        assert_equals(computed.width, refStyle.width, 'width');
+        assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft');
+      }, `rendered legend with display: ${val}` + (style == '' ? '' : "; " + style));
+    }
+  }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html
new file mode 100644
index 0000000000..5dc68244fe
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>legend and dynamic update</title>
+<link rel=fieldset-foo-ref.html>
+<p>There should be a normal fieldset below with the legend "Foo".</p>
+<fieldset>
+  <legend>F</legend>
+</fieldset>
+<script>
+  const legend = document.querySelector('legend');
+  // force layout
+  legend.offsetTop;
+  requestAnimationFrame(() => {
+    legend.textContent += "oo";
+    requestAnimationFrame(() => {
+      document.documentElement.removeAttribute('class');
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html
new file mode 100644
index 0000000000..7979e1d03e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<title>legend and float and position: absolute/fixed</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ body { margin: 0; }
+ fieldset { margin: 0; padding: 20px; border: 10px solid; width: 300px; }
+ legend { height: 10px; }
+ #legend1 { float: left; }
+ #legend2 { float: right; }
+ #legend3 { position: absolute; }
+ #legend4 { position: fixed; }
+</style>
+<fieldset id=fieldset>
+  <div>div</div>
+  <legend id=legend1>legend1</legend>
+  <legend id=legend2>legend2</legend>
+  <legend id=legend3>legend3</legend>
+  <legend id=legend4>legend4</legend>
+  <legend id=legend5>legend5</legend>
+</fieldset>
+<script>
+ const fieldset = document.getElementById('fieldset');
+ const legends = document.getElementsByTagName('legend');
+ const [legend1, legend2, legend3, legend4, legend5] = legends;
+ const expectedTop = 0;
+ const expectedLeft = 10 + 20;
+
+ function assert_rendered_legend(legend) {
+   assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`);
+   assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`);
+   for (const other of legends) {
+     if (other === legend) {
+       continue;
+     }
+     if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) {
+       assert_unreached(`${other.id} should not be the "rendered legend"`);
+     }
+   }
+ }
+
+ test(t => {
+   assert_rendered_legend(legend5);
+ }, 'no dynamic changes');
+
+ test(t => {
+   const legend = document.createElement('legend');
+   t.add_cleanup(() => {
+     legend.remove();
+   });
+   legend.id = 'script-inserted';
+   legend.textContent = 'script-inserted legend';
+   fieldset.insertBefore(legend, legend1);
+   assert_rendered_legend(legend);
+   legend.remove();
+   assert_rendered_legend(legend5);
+ }, 'inserting a new legend and removing it again');
+
+ test(t => {
+   t.add_cleanup(() => {
+     legend1.id = 'legend1';
+     legend2.id = 'legend2';
+   });
+   legend2.id = '';
+   assert_rendered_legend(legend2);
+   legend1.id = '';
+   assert_rendered_legend(legend1);
+   legend1.id = 'legend1';
+   assert_rendered_legend(legend2);
+   legend2.id = 'legend2';
+   assert_rendered_legend(legend5);
+ }, 'dynamic changes to float');
+
+ test(t => {
+   t.add_cleanup(() => {
+     legend3.id = 'legend3';
+     legend4.id = 'legend4';
+   });
+   legend4.id = '';
+   assert_rendered_legend(legend4);
+   legend3.id = '';
+   assert_rendered_legend(legend3);
+   legend3.id = 'legend3';
+   assert_rendered_legend(legend4);
+   legend4.id = 'legend4';
+   assert_rendered_legend(legend5);
+ }, 'dynamic changes to position');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html
new file mode 100644
index 0000000000..c51bca231e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>Reference for floated legend should not disappear</title>
+<style>
+  div { width: 100px; height: 100px; background: lime; }
+</style>
+<p>There should be no red.</p>
+<div></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html
new file mode 100644
index 0000000000..f70e952ed0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>floated legend should not disappear</title>
+<link rel=match href=legend-float-ref.html>
+<style>
+  fieldset { margin: 0; padding: 0; border: none; width: 100px; height: 50px; background: red; }
+  legend { width: 100px; height: 50px; background: lime; padding: 0; }
+  .left { float: left; }
+  .right { float: right; }
+</style>
+<p>There should be no red.</p>
+<fieldset><legend class=left></legend></fieldset>
+<fieldset><legend class=right></legend></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html
new file mode 100644
index 0000000000..edd2600d4a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>legend and flexbox, grid & multicol</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+legend { width: 200px; background: silver }
+#flex { display: flex; }
+#inline-flex { display: inline-flex; }
+#grid { display: grid; }
+#inline-grid { display: inline-grid; }
+#grid, #inline-grid { grid-template-columns: auto auto }
+#multicol { columns: 2; }
+</style>
+<fieldset><legend id=ref>12</legend></fieldset>
+<fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset>
+<fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset>
+<fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset>
+<fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset>
+<fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset>
+<script>
+ const ref = document.getElementById('ref');
+ for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) {
+   test(() => {
+     const elm = document.getElementById(id);
+     assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight');
+     if (id !== "multicol") {
+       assert_equals(getComputedStyle(elm).display, id, 'display');
+     }
+   }, id);
+ }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html
new file mode 100644
index 0000000000..170e3cc874
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+legend:hover {
+  background: lime;
+}
+</style>
+<h1>Header</h1>
+<fieldset>
+  <legend>Legend</legend>
+</fieldset>
+<script>
+// https://crbug.com/1127743
+promise_test(async () => {
+  await test_driver.click(document.querySelector('legend'));
+  assert_not_equals(document.querySelector('legend:hover'), null);
+}, 'The rendered LEGEND should work well for :hover.');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html
new file mode 100644
index 0000000000..ee64e81762
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset>
+  <legend>Is rendered legend</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html
new file mode 100644
index 0000000000..c4ab5a3ea0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="match" href="legend-in-slot-ref.html">
+
+<div id="host">
+  <legend id="legend">Was rendered legend</legend>
+  <legend>Is rendered legend</legend>
+</div>
+<script>
+let root = document.querySelector('#host').attachShadow({mode:"open"});
+root.innerHTML = `
+<fieldset>
+  <slot></slot>
+</fieldset>`;
+document.body.offsetTop;
+document.querySelector('#legend').remove();
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html
new file mode 100644
index 0000000000..0b2624859e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements">
+<!-- A test for the following paragraphs:
+The element's box is expected to be constrained in the inline direction by
+the inline content size of the fieldset as if it had used its computed
+inline padding.
+Example:
+For example, if the fieldset has a specified padding of 50px, then the
+rendered legend will be positioned 50px in from the fieldset's border. The
+padding will further apply to the anonymous fieldset content box instead
+of the fieldset element itself.
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+fieldset {
+  width: 400px;
+  margin: 0;
+  padding: 0 50px;
+  border: 2px solid black;
+}
+legend {
+  width: 100%;
+  padding: 0;
+  background-color: yellow;
+}
+.content {
+  background-color: lime;
+}
+</style>
+<fieldset>
+<legend>Legend</legend>
+</fieldset>
+
+<script>
+test(() => {
+  let fieldset = document.querySelector('fieldset');
+  let legend = document.querySelector('legend');
+  assert_equals(legend.offsetLeft - fieldset.offsetLeft, 52);
+  assert_equals(legend.offsetWidth, 400);
+}, 'Test legend\'s inline-size in a fieldset with inline paddings');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html
new file mode 100644
index 0000000000..f7b4754e09
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference for legend and display: list-item numbering</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+<style>
+ol { margin: 0; padding: 0; border: none; }
+ol > * { margin: 0 40px; padding: 0; }
+</style>
+
+<ol>
+  <li value="2">B</li>
+  <li value="1">A</li>
+  <li value="3">C</li>
+</ol>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html
new file mode 100644
index 0000000000..d7d904b8c7
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Legend and display: list-item numbering</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel=match href="legend-list-item-numbering-ref.html">
+
+<style>
+fieldset { margin: 0; padding: 0; border: none; list-style-type: decimal; }
+fieldset > * { margin: 0 40px; padding: 0; display: list-item; }
+</style>
+
+<fieldset>
+  <div>A</div>
+  <legend>B</legend>
+  <div>C</div>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html
new file mode 100644
index 0000000000..ee76e93b64
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>Reference for legend and dipslay: list-item</title>
+<style>
+  div { margin: 0 40px; display: list-item; }
+</style>
+<p>There should be a bullet point below.</p>
+<div>X</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html
new file mode 100644
index 0000000000..e967643572
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>legend and dipslay: list-item</title>
+<link rel=match href=legend-list-item-ref.html>
+<style>
+  fieldset { margin: 0; padding: 0; border: none; }
+  legend { margin: 0 40px; padding: 0; display: list-item; }
+</style>
+<p>There should be a bullet point below.</p>
+<fieldset>
+  <legend>X</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html
new file mode 100644
index 0000000000..8daf78db99
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<title>legend and margin (inline direction)</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
+ legend { height: 10px; width: 200px; padding: 0; }
+
+ #legend-center { margin-left: auto; margin-right: auto; }
+ #legend-right { margin-left: auto; }
+ #legend-10 { margin-left: 10px; }
+</style>
+<fieldset>
+  <legend id=legend-left>left</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-center>center</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-right>right</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-10>10px</legend>
+</fieldset>
+
+<script>
+ const legends = document.getElementsByTagName('legend');
+ const [legendLeft, legendCenter, legendRight, legend10] = legends;
+
+ const expectedLeft = 8 + 10 + 20;
+ const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
+ const expectedRight = expectedLeft + 500 - 200;
+ const expected10 = expectedLeft + 10;
+
+ test(() => {
+   assert_equals(legendLeft.offsetLeft, expectedLeft);
+ }, 'left');
+
+ test(() => {
+   assert_equals(legendCenter.offsetLeft, expectedCenter);
+ }, 'center');
+
+ test(() => {
+   assert_equals(legendRight.offsetLeft, expectedRight);
+ }, 'right');
+
+ test(() => {
+   assert_equals(legend10.offsetLeft, expected10);
+ }, '10px');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html
new file mode 100644
index 0000000000..94f4991f22
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>Reference for fieldset painting order</title>
+
+<p>There should be a green square below, and no red.</p>
+<div style="width:100px; height:100px; background:green;"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html
new file mode 100644
index 0000000000..ac0bd43037
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Legend painting order</title>
+<link rel=match href=legend-painting-order-ref.html>
+
+<p>There should be a green square below, and no red.</p>
+<div style="float:left; width:0px; height:0px;">
+  <div style="width:100px; height:100px; background:red;"></div>
+</div>
+<fieldset style="margin:0; border:none; padding:0;">
+  <legend style="padding:0;">
+    <div style="float:left; width:100px; height:100px; background:green;"></div>
+  </legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html
new file mode 100644
index 0000000000..da2dd3e1c6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Reference for legend position: relative</title>
+<style>
+#fieldset2 {
+  background: lime;
+  border: 2px solid lime;
+  width: 200px;
+  padding: 0;
+  margin: 0;
+}
+#legend2 {
+  background: #00ffff;
+}
+</style>
+<p>"Legend" should be shown.</p>
+<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html
new file mode 100644
index 0000000000..3fbdbd5c20
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>legend position: relative</title>
+<link ref=help href="http://crbug.com/1151295">
+<link rel=match href=legend-position-relative-2-ref.html>
+<style>
+#fieldset2 {
+  background: lime;
+  border: 2px solid lime;
+  width: 200px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+#legend2 {
+  position: relative;
+  overflow: hidden;
+  background: #00ffff;
+}
+</style>
+<p>"Legend" should be shown.</p>
+<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html
new file mode 100644
index 0000000000..fd6c11a005
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>Reference for legend position: relative</title>
+<style>
+div { display: inline-block; background: lime; }
+.a { width: 100px; height: 200px; }
+.b { width: 100px; height: 100px; }
+.c { width: 200px; height: 200px; }
+</style>
+<p>There should be no red.</p>
+<div class=a></div><div class=b></div><div class=c></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html
new file mode 100644
index 0000000000..9938361261
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>legend position: relative</title>
+<link rel=match href=legend-position-relative-ref.html>
+<style>
+fieldset { border: 100px solid lime; width: 200px; padding: 0; margin: 0 }
+legend { position: relative; left: 100px; width: 100px; height: 100px; padding: 0 }
+.behind { position: absolute; left: 208px; width: 100px; height: 100px; background: red; z-index: -1 }
+</style>
+<p>There should be no red.</p>
+<div class=behind></div>
+<fieldset><legend></legend></fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html
new file mode 100644
index 0000000000..5f27ca5c29
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<title>legend sans fieldset and CSS display</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ * { margin: 0; padding: 0; }
+ .table, table { display: table; width: 200px; border-collapse: collapse; }
+ .tbody { display: table-row-group; }
+ .tr { display: table-row; }
+ .td, td { display: table-cell; }
+ .col { display: table-column; }
+ .caption { display: table-caption; }
+ .li { display: list-item; }
+ .inline { display: inline; }
+ .inline-block { display: inline-block; }
+ .inline-table { display: inline-table; }
+ .ruby { display: ruby; }
+ .rt { display: ruby-text; }
+ rt { font-size: inherit; }
+</style>
+<legend class=table>
+  <legend class=caption>caption</legend>
+  <legend class=col></legend><legend class=col></legend>
+  <legend class=tbody>
+    <legend class=tr>
+      <legend class=td>td</legend><legend class=td>td</legend>
+    </legend>
+  </legend>
+</legend>
+<table>
+  <caption>caption</caption>
+  <col><col>
+  <tbody>
+    <tr>
+      <td>td<td>td
+</table>
+<ul>
+  <legend class=li>li</legend>
+  <li>li</li>
+</ul>
+<p>foo <legend class=inline>inline</legend> <span>inline</span>
+<p>foo <legend class=inline-block>inline-block</legend> <span class=inline-block>inline-block</span>
+<p><legend class=ruby>ruby<legend class=rt>rt</legend></legend> <ruby>ruby<rt>rt</ruby>
+<script>
+  function test_display(testSelector, refSelector) {
+    test(() => {
+      const testElm = document.querySelector(testSelector);
+      const refElm = document.querySelector(refSelector);
+      const testStyle = getComputedStyle(testElm);
+      const refStyle = getComputedStyle(refElm);
+      assert_equals(testStyle.display, refStyle.display, testSelector + ' display');
+      assert_equals(testStyle.width, refStyle.width, testSelector + ' width');
+      assert_equals(testStyle.height, refStyle.height, testSelector + ' height');
+    }, testSelector);
+  }
+
+  test_display('.table', 'table');
+  test_display('.caption', 'caption');
+  test_display('.col', 'col');
+  test_display('.tbody', 'tbody');
+  test_display('.tr', 'tr');
+  test_display('.td', 'td');
+  test_display('.li', 'li');
+  test_display('.inline', 'span');
+  test_display('.inline-block', 'span.inline-block');
+  test_display('.ruby', 'ruby');
+  test_display('.rt', 'rt');
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html
new file mode 100644
index 0000000000..71debf7e44
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="http://crbug.com/1197946">
+<style>
+legend {
+  position: sticky;
+  left: -1em;
+}
+fieldset {
+  position: sticky;
+  left: -1em;
+  overflow-y: auto;
+}
+</style>
+<fieldset>
+<legend>Legend</legend>
+</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html
new file mode 100644
index 0000000000..004ce42129
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Reference for tall legend</title>
+<style>
+body, p { margin: 0; }
+.legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime }
+.fieldset {
+  position: absolute;
+  z-index: -1;
+  margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
+  background: green;
+  height: 40px;
+  left: 0;
+  right: 0;
+}
+.hello { margin-top: 160px; margin-left: 20px; }
+</style>
+<p>There should be no red.</p>
+<div class=legend>X</div>
+<div class=fieldset></div>
+<div class=hello>HELLO</div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html
new file mode 100644
index 0000000000..7b9495946e
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>tall legend</title>
+<link rel=match href=legend-tall-ref.html>
+<style>
+body, p { margin: 0; }
+fieldset { height: 30px; margin: 0; border: 20px solid green; padding: 0px; background: red; }
+legend { height: 160px; background: lime; padding: 0; }
+#behind {
+  position: absolute;
+  z-index: -1;
+  margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
+  background: red;
+  height: 40px;
+  left: 0;
+  right: 0;
+}
+</style>
+<p>There should be no red.</p>
+<div id=behind></div>
+<fieldset><legend>X</legend>HELLO</fieldset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html
new file mode 100644
index 0000000000..1cda91f32b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<title>The legend element</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+#ref {
+  display: block;
+  unicode-bidi: isolate;
+  padding-left: 2px;
+  padding-right: 2px;
+  /* TODO: uncomment this when these properties are widely supported
+  padding-inline-start: 2px; padding-inline-end: 2px;
+  */
+}
+</style>
+
+<legend id=in-body></legend>
+<fieldset>
+ <legend id=rendered-legend></legend>
+ <legend id=in-fieldset-second-child></legend>
+ <div><legend id=in-fieldset-descendant></legend></div>
+</fieldset>
+<div id=ref></div>
+
+<script>
+setup(() => {
+  self.legends = [].slice.call(document.querySelectorAll('legend'));
+  self.refStyle = getComputedStyle(document.getElementById('ref'));
+  self.props = ['display',
+                'unicodeBidi',
+                'marginTop',
+                'marginRight',
+                'marginBottom',
+                'marginLeft',
+                'paddingTop',
+                'paddingRight',
+                'paddingBottom',
+                'paddingLeft',
+                'overflow',
+                // Extra tests
+                'height',
+                'box-sizing',
+               ];
+});
+legends.forEach(legend => {
+  const testStyle = getComputedStyle(legend);
+  props.forEach(prop => {
+    test(() => {
+      assert_equals(testStyle[prop], refStyle[prop]);
+    }, `${legend.id}: ${prop}`);
+  });
+
+  // Test width separately since it differs outside fieldset vs. in fieldset vs. rendered legend
+  test(() => {
+    if (legend.id === 'rendered-legend') {
+      assert_equals(testStyle.width, '0px');
+    } else {
+      assert_not_equals(testStyle.width, '0px');
+    }
+  }, `${legend.id}: width`);
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html
new file mode 100644
index 0000000000..92c3302970
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>fieldset min-inline-size</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ fieldset { width: 0; height: 0 }
+ fieldset > div { width: 100px; height: 100px }
+ #vertical-lr { writing-mode: vertical-lr }
+ #vertical-rl { writing-mode: vertical-rl }
+ .override { min-inline-size: 5px }
+</style>
+<fieldset id=horizontal-tb><div></div></fieldset>
+<fieldset id=vertical-lr><div></div></fieldset>
+<fieldset id=vertical-rl><div></div></fieldset>
+<script>
+  for (const className of ['', 'override']) {
+    const expected = className === '' ? '100px' : '5px';
+    test(() => {
+      const fieldset = document.getElementById('horizontal-tb');
+      fieldset.className = className;
+      assert_equals(getComputedStyle(fieldset).width, expected, 'width');
+      assert_equals(getComputedStyle(fieldset).height, '0px', 'height');
+    }, `horizontal-tb ${className}`);
+
+    test(() => {
+      const fieldset = document.getElementById('vertical-lr');
+      fieldset.className = className;
+      assert_equals(getComputedStyle(fieldset).width, '0px', 'width');
+      assert_equals(getComputedStyle(fieldset).height, expected, 'height');
+    }, `vertical-lr ${className}`);
+
+    test(() => {
+      const fieldset = document.getElementById('vertical-rl');
+      fieldset.className = className;
+      assert_equals(getComputedStyle(fieldset).width, '0px', 'width');
+      assert_equals(getComputedStyle(fieldset).height, expected, 'height');
+    }, `vertical-rl ${className}`);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html
new file mode 100644
index 0000000000..0e7f87232a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1122722">
+<fieldset id="fieldset">
+  <legend id="legend"></legend>
+</fieldset>
+<script>
+  document.body.offsetTop;
+  fieldset.style.columns = "2";
+  legend.style.cssFloat = "left";
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html
new file mode 100644
index 0000000000..32b7d46d6f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>Reference there should be no red</title>
+<p>There should be no red.</p>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css
new file mode 100644
index 0000000000..b358d925a7
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css
@@ -0,0 +1,18 @@
+body > div { display: inline-block }
+fieldset, .fieldset { padding: 0; height:10em; width:2em; border:1em groove; margin: 0em; line-height:1 }
+legend, .legend { padding: 0; width: 1em }
+.legend {
+  background: white; /* overlap the border to emulate the border not being painted */
+  display: table; /* shrink-wrap */
+}
+
+[style="writing-mode: vertical-lr"] .legend {
+  margin-left: -1em;
+}
+[style="writing-mode: vertical-rl"] .legend {
+  margin-right: -1em;
+}
+.top { margin-bottom: auto }
+.center { margin-top: auto; margin-bottom: auto }
+.bottom { margin-top: auto }
+.rtl { direction: rtl }
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html
new file mode 100644
index 0000000000..6e36b3bb5a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119400">
+<fieldset>
+  <legend id="legend1"></legend>
+  <legend id="legend2"><div id="child" style="float:left;"></div></legend>
+</fieldset>
+<script>
+  requestAnimationFrame(()=> {
+      requestAnimationFrame(()=> {
+          legend1.style.display = "none";
+          document.body.offsetTop;
+
+          child.style.width = "22px";
+          document.body.offsetTop;
+
+          child.style.display = "none";
+      });
+  });
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html
new file mode 100644
index 0000000000..a6e8fa7a82
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="help" href="http://crbug.com/1146872">
+<body>
+<fieldset><span><span></span></span></fieldset>
+<div id="host"><span></span></div>
+<script>
+const host = document.querySelector('#host');
+const shadowRoot = host.attachShadow({mode: 'closed'});
+const fieldset = shadowRoot.appendChild(document.createElement('fieldset'));
+fieldset.setAttribute('style', 'overflow: scroll');
+fieldset.innerHTML = '<slot></slot>';
+</script>
+<style>
+*:not(fieldset, div) {
+  position: sticky;
+  bottom: 72pc;
+}
+fieldset {
+  overflow: visible scroll;
+}
+</style>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html
new file mode 100644
index 0000000000..95e3c05cd8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<body>
+<style>
+body {
+  margin: 0;
+}
+
+.fieldset div {
+  height:1000px;
+}
+
+span {
+  background: lime;
+  display: block;
+  height: 40px;
+  position: absolute;
+  top: 4px;
+  left: 0px;
+  width: 40px;
+}
+
+.fieldset {
+  border: none;
+  height: 400px;
+  margin: 0;
+  overflow: scroll;
+  padding: 0;
+}
+</style>
+<div class="fieldset"><div><span></span></div></div>
+<script>
+document.querySelector('.fieldset').scrollTop = 1000;
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html
new file mode 100644
index 0000000000..f60d9ec528
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="http://crbug.com/1146925">
+<link rel="match" href="sticky-content-ref.html">
+<body>
+<style>
+body {
+  margin: 0;
+}
+
+fieldset div {
+  height:1000px;
+}
+
+span {
+  background: lime;
+  display: block;
+  height: 40px;
+  position: sticky;
+  top: 4px;
+  width: 40px;
+}
+
+fieldset {
+  border: none;
+  height: 400px;
+  margin: 0;
+  overflow: scroll;
+  padding: 0;
+}
+</style>
+<fieldset><div><span></span></div></fieldset>
+<script>
+document.querySelector('fieldset').scrollTop = 1000;
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html
new file mode 100644
index 0000000000..c697d4dbbf
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/different-writing-modes-ref.html">
+<style>
+frame {
+  writing-mode: vertical-rl;
+}
+</style>
+<frameset cols="50%,*" rows="50%,*">
+ <frame src="resources/green.html"></frame>
+ <frame src="resources/green.html"></frame>
+ <frame></frame>
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html
new file mode 100644
index 0000000000..85a5b98ae5
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(async () => {
+  await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, {once:true}));
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  // #fs1, #container, and #child were laid out.
+
+  // Move #child.
+  // It makes #container dirty, and it exceeds from #fs1's 1x1 grid.
+  document.querySelector('#fs1').insertBefore(
+      document.querySelector('#child'), document.querySelector('#container'));
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  // Removing #child makes #container visible again.
+  document.querySelector('#child').remove();
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await new Promise(resolve => requestAnimationFrame(resolve));
+}, 'No crash when a dirty FRAMESET exceeds from the grid then fits in it again');
+</script>
+</head>
+<frameset id="fs1">
+<frameset id="container">
+<frameset id="child"></frameset>
+</frameset>
+</frameset>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html
new file mode 100644
index 0000000000..b6c454b03f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="match" href="reference/empty-ref.html">
+<frameset cols="100%" style="visibility: hidden">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html
new file mode 100644
index 0000000000..ba55da8686
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="match" href="reference/green-ref.html">
+<frameset cols="4294967227%,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html
new file mode 100644
index 0000000000..ba55da8686
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="match" href="reference/green-ref.html">
+<frameset cols="4294967227%,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html
new file mode 100644
index 0000000000..f056aa7e30
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353277">
+<script>
+window.onload = () => {
+  test(() => {
+    const frameSet = document.querySelector('frameset');
+    const frames = document.querySelectorAll('frame');
+    assert_less_than(frames[0].offsetWidth, frameSet.offsetWidth);
+    assert_greater_than(frames[0].offsetWidth, frames[1].offsetWidth);
+    assert_greater_than_equal(frames[1].offsetWidth, 0);
+  }, 'A large relative value should not produce weird sizes.');
+};
+</script>
+<frameset cols="4294967227*,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html
new file mode 100644
index 0000000000..7cd86b9455
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="match" href="reference/green-ref.html">
+<frameset rows="4294967227%,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html
new file mode 100644
index 0000000000..7cd86b9455
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="match" href="reference/green-ref.html">
+<frameset rows="4294967227%,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html
new file mode 100644
index 0000000000..c33cd44adf
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353277">
+<script>
+window.onload = () => {
+  test(() => {
+    const frameSet = document.querySelector('frameset');
+    const frames = document.querySelectorAll('frame');
+    assert_less_than(frames[0].offsetHeight, frameSet.offsetHeight);
+    assert_greater_than(frames[0].offsetHeight, frames[1].offsetHeight);
+    assert_greater_than_equal(frames[1].offsetHeight, 0);
+  }, 'A large relative value should not produce weird sizes.');
+};
+</script>
+<frameset rows="4294967227*,*" frameborder="0">
+  <frame src="resources/green.html">
+  <frame src="resources/red.html">
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html
new file mode 100644
index 0000000000..adfb76e15a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="http://crbug.com/1383361">
+<body style="columns:2">
+<div id="parent" style="display:table-caption"></div>
+<script>
+const caption = document.querySelector('#parent');
+const frameset = caption.appendChild(document.createElement('frameset'));
+frameset.setAttribute('rows', '100%');
+frameset.setAttribute('cols', '100%');
+frameset.innerHTML = '<frame srcdoc=""></frame><frame srcdoc=""></frame>';
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html
new file mode 100644
index 0000000000..9d5e5977f0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<frameset cols="50%,*" rows="50%,*">
+ <frame src="../resources/green.html"></frame>
+ <frame src="../resources/green.html"></frame>
+ <frame></frame>
+</frameset>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html
new file mode 100644
index 0000000000..0e76edd65b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html
@@ -0,0 +1 @@
+<!DOCTYPE html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html
new file mode 100644
index 0000000000..62208d72c9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  body { background: green; }
+</style>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html
new file mode 100644
index 0000000000..62208d72c9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  body { background: green; }
+</style>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html
new file mode 100644
index 0000000000..b5e7f79617
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  body { background: red; }
+</style>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html
new file mode 100644
index 0000000000..9e4283e208
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html
@@ -0,0 +1,31 @@
+
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.hr {
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+  width: 100px;
+}
+
+.left {
+  margin-left: 0;
+}
+
+.right {
+  margin-right: 0;
+}
+</style>
+<div class='hr'></div>
+<div class='hr left'></div>
+<div class='hr'></div>
+<div class='hr right'></div>
+<div class='hr'></div>
+
+<div class='hr'></div>
+<div class='hr left'></div>
+<div class='hr'></div>
+<div class='hr right'></div>
+<div class='hr'></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html
new file mode 100644
index 0000000000..1657f2458d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="match" href="align-ref.html">
+<style>
+hr {
+  width: 100px;
+}
+</style>
+
+<hr align=>
+<hr align=left>
+<hr align=center>
+<hr align=right>
+<hr align=foobar>
+
+<script>
+// Test the IDL attribute
+const values = ['', 'left', 'center', 'right', 'foobar'];
+values.forEach(value => {
+  const hr = document.createElement('hr');
+  hr.align = value;
+  document.body.appendChild(hr);
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html
new file mode 100644
index 0000000000..5cd35c83ad
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.hr {
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+}
+
+.green {
+  color: green;
+}
+
+.no-inset {
+  border-style: solid;
+}
+</style>
+<div class='hr'></div>
+<div class='hr no-inset'></div>
+<div class='hr no-inset'></div>
+<div class='hr green no-inset'></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html
new file mode 100644
index 0000000000..750f77e5fb
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel=match href="color-ref.html">
+<hr>
+<hr color="">
+<hr color=transparent>
+<hr color=green>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html
new file mode 100644
index 0000000000..e852216494
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<title>The hr element</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+#ref {
+  display: block;
+  unicode-bidi: isolate;
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+  /* TODO: uncomment this when these properties are widely supported
+  margin-block-start: 0.5em;
+  margin-inline-end: auto;
+  margin-block-end: 0.5em;
+  margin-inline-start: auto;
+  */
+  overflow: hidden;
+}
+</style>
+
+<hr id=test>
+<div id=ref></div>
+
+<script>
+setup(() => {
+  self.testStyle = getComputedStyle(document.getElementById('test'));
+  self.refStyle = getComputedStyle(document.getElementById('ref'));
+});
+['display',
+ 'unicodeBidi',
+ 'color',
+ 'borderTopStyle',
+ 'borderRightStyle',
+ 'borderBottomStyle',
+ 'borderLeftStyle',
+ 'borderTopWidth',
+ 'borderRightWidth',
+ 'borderBottomWidth',
+ 'borderLeftWidth',
+ 'marginTop',
+ 'marginRight',
+ 'marginBottom',
+ 'marginLeft',
+ 'overflow',
+ // Extra tests
+ 'height',
+ 'box-sizing',
+].forEach(prop => {
+  test(() => {
+    assert_equals(testStyle[prop], refStyle[prop]);
+  }, prop);
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html
new file mode 100644
index 0000000000..11e3d63e34
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<title>The hr element: setting 'overflow: visible'</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+/* Use 0 margin for hr instead of default 0.5em to make things simpler */
+hr {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.wrapper {
+  height: 150px;
+  position: relative;
+}
+#test-visible {
+  overflow: visible;
+}
+.float, hr::before {
+  content: "";
+  float: left;
+  width: 50px;
+  height: 50px;
+  background-color: orange;
+}
+.clear {
+  clear: left;
+}
+</style>
+
+<div class=wrapper>
+ <div class=float></div>
+ <hr id=test-control>
+ <div class=float></div>
+</div>
+
+<div class=wrapper>
+ <div class=float></div>
+ <hr id=test-visible>
+ <div class=float></div>
+</div>
+
+<script>
+
+test(() => {
+  const hr = document.getElementById('test-control');
+  assert_equals(hr.offsetLeft, 50, 'hr.offsetLeft');
+  assert_equals(hr.offsetTop, 0, 'hr.offsetTop');
+  assert_equals(hr.clientHeight, 50, 'hr.clientHeight');
+  const divAfter = hr.nextElementSibling;
+  assert_equals(divAfter.offsetLeft, 0, 'divAfter.offsetLeft');
+  assert_equals(divAfter.offsetTop, 50 + 1 + 1 /* hr border */, 'divAfter.offsetTop');
+}, 'control');
+
+test(() => {
+  const hr = document.getElementById('test-visible');
+  assert_equals(hr.offsetLeft, 0, 'hr.offsetLeft');
+  assert_equals(hr.offsetTop, 0, 'hr.offsetTop');
+  assert_equals(hr.clientHeight, 0, 'hr.clientHeight');
+  const divAfter = hr.nextElementSibling;
+  assert_equals(divAfter.offsetLeft, 50 + 50, 'divAfter.offsetLeft');
+  assert_equals(divAfter.offsetTop, 1 + 1 /* hr border */, 'divAfter.offsetTop');
+}, 'overflow: visible');
+
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html
new file mode 100644
index 0000000000..71e7651c1a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html
@@ -0,0 +1,19 @@
+<style>
+.hr {
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+}
+</style>
+<div class=hr></div>
+<div class=hr style="width: 50%"></div>
+<div class=hr style="width: 100px"></div>
+<div class=hr style="width: 100px"></div>
+<div class=hr style="width: 100px"></div>
+<div class=hr style="width: 100.99px"></div>
+<div class=hr style="width: 0%"></div>
+<div class=hr style="width: 0%"></div>
+<div class=hr></div>
+<div class=hr></div>
+<div class=hr></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html
new file mode 100644
index 0000000000..a436d2ae25
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<link rel="match" href="width-ref.html">
+<hr>
+<hr width='50%'>
+<hr width='100'>
+<hr width='100foo'>
+<hr width='  100    '>
+<hr width='100.99'>
+<hr width='0'>
+<hr width='00'>
+<hr width='+0'>
+<hr width='+00'>
+<hr width='++0'>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html
new file mode 100644
index 0000000000..3d9d45ec94
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<iframe src="data:text/html,<!doctype html><body style='margin-left: 100px; margin-right: 100px;'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html
new file mode 100644
index 0000000000..ba891d5021
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginwidth attribute has the right effect in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe src="data:text/html,<!doctype html><body marginwidth='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html
new file mode 100644
index 0000000000..431f74be29
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginwidth attribute has the right effect in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe src="data:text/html,<body marginwidth='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html
new file mode 100644
index 0000000000..84eb4cfe82
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's leftmargin/rightmargin attributes have the right effect in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe src="data:text/html,<!doctype html><body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html
new file mode 100644
index 0000000000..938d4c2c0b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's leftmargin/rightmargin attributes have the right effect in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe src="data:text/html,<body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html
new file mode 100644
index 0000000000..8cc463fb15
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that iframe's marginwidth attribute has the right effect in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="100" src="data:text/html,<!doctype html><body>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html
new file mode 100644
index 0000000000..2f123b392c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that iframe's marginwidth attribute has the right effect in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="100" src="data:text/html,<body>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html
new file mode 100644
index 0000000000..052455390c
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's style margin takes precedence over everything else in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<!doctype html><body marginwidth='30' leftmargin='40' rightmargin='50' style='margin-left: 100px; margin-right: 100px'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html
new file mode 100644
index 0000000000..6778945494
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's style margin takes precedence over everything else in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<body marginwidth='30' leftmargin='40' rightmargin='50' style='margin-left: 100px; margin-right: 100px'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html
new file mode 100644
index 0000000000..95e21e3626
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginwidth attribute takes precedence over other body margin presentational attributes in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<!doctype html><body marginwidth='100' leftmargin='40' rightmargin='50'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html
new file mode 100644
index 0000000000..4f945853d8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginwidth attribute takes precedence over other body margin presentational attributes in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<body marginwidth='100' leftmargin='40' rightmargin='50'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html
new file mode 100644
index 0000000000..c05cd24e2d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's leftmargin/rightmargin attributes take precedence over iframe marginwidth in standards mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<!doctype html><body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html
new file mode 100644
index 0000000000..f53d2c5a1d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's leftmargin/rightmargin attributes take precedence over iframe marginwidth in quirks mode</title>
+<link rel=match href="body-margin-1-ref.html">
+<iframe marginwidth="20" src="data:text/html,<body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html
new file mode 100644
index 0000000000..1bda1a8928
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<iframe src="data:text/html,<!doctype html><body style='margin-top: 100px; margin-bottom: 100px;'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html
new file mode 100644
index 0000000000..9091ab2c78
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginheight attribute has the right effect in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe src="data:text/html,<!doctype html><body marginheight='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html
new file mode 100644
index 0000000000..dd7d74b635
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginheight attribute has the right effect in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe src="data:text/html,<body marginheight='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html
new file mode 100644
index 0000000000..f72e4b6c71
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's topmargin/bottommargin attributes have the right effect in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe src="data:text/html,<!doctype html><body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html
new file mode 100644
index 0000000000..40799b2277
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's topmargin/bottommargin attributes have the right effect in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe src="data:text/html,<body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html
new file mode 100644
index 0000000000..bab012bcf0
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that iframe's marginheight attribute has the right effect in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="100" src="data:text/html,<!doctype html><body>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html
new file mode 100644
index 0000000000..103cde96d9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that iframe's marginheight attribute has the right effect in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="100" src="data:text/html,<body>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html
new file mode 100644
index 0000000000..b87acacefe
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's style margin takes precedence over everything else in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<!doctype html><body marginheight='30' topmargin='40' bottommargin='50' style='margin-top: 100px; margin-bottom: 100px'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html
new file mode 100644
index 0000000000..53f5267f71
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's style margin takes precedence over everything else in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<body marginheight='30' topmargin='40' bottommargin='50' style='margin-top: 100px; margin-bottom: 100px'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html
new file mode 100644
index 0000000000..642972ea33
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginheight attribute takes precedence over other body margin presentational attributes in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<!doctype html><body marginheight='100' topmargin='40' bottommargin='50'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html
new file mode 100644
index 0000000000..f1b1689f1f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's marginheight attribute takes precedence over other body margin presentational attributes in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<body marginheight='100' topmargin='40' bottommargin='50'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html
new file mode 100644
index 0000000000..d11febeb5d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's topmargin/bottommargin attributes take precedence over iframe marginheight in standards mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<!doctype html><body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html
new file mode 100644
index 0000000000..2f947b984f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test that body's topmargin/bottommargin attributes take precedence over iframe marginheight in quirks mode</title>
+<link rel=match href="body-margin-2-ref.html">
+<iframe marginheight="20" src="data:text/html,<body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml
new file mode 100644
index 0000000000..b93435de8a
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml
@@ -0,0 +1,16 @@
+<html xmlns='http://www.w3.org/1999/xhtml'>
+<head>
+<title>body - LINK=yellow</title>
+</head>
+<body link="yellow">
+<p> Test for <b> link="yellow" </b> on body </p>
+
+This <a href="test-body.xhtml">LINK</a> should be displayed in <b>yellow</b><i> if it has not been clicked before </i><br/>
+<p>Once clicked, the link will take default color of visited link.<br /></p>
+<p>To run this test again in browsers, delete your browsing history and navigate to this page.<br /></p>
+
+<p>
+<i>Note - This test checks for User Agent requirement as per HTML5 spec NOT the author requirement</i>
+</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html
new file mode 100644
index 0000000000..c907a119f8
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>[body - TEXT=00ffff] Reference file</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<style>
+  body {
+    color: blue;
+  }
+</style>
+<body>
+  <p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p>
+  <p>This test passes if the color of text above matches the image below.</p>
+  <p><img src="/images/blue.png"/></p>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml
new file mode 100644
index 0000000000..42b8aa3b6b
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml
@@ -0,0 +1,12 @@
+<html xmlns='http://www.w3.org/1999/xhtml'>
+<head>
+<title>body - TEXT=00ffff</title>
+<link rel="match" href="body_text_00ffff-ref.html"/>
+<meta name="assert" content="Test checks that User Agent requirement as per HTML5 spec NOT the author requirement."/>
+</head>
+<body text="0000ff">
+<p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p>
+<p>This test passes if the color of text above matches the image below.</p>
+<p><img src="/images/blue.png" /></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html
new file mode 100644
index 0000000000..b7aea03bf3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html
@@ -0,0 +1,9 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xlink="http://www.w3.org/1999/xlink">
+<meta charset="utf-8">
+<link rel="author" href="mailto:0xdevssh@gmail.com">
+<link rel="help" href="https://crbug.com/1238543">
+<meta name="assert" content="The renderer should not crash.">
+    <body topmargin="62099815446794541154677680790275022478020296315411546776807902750224780254115467768079027502247802349339973475906291022478020296313493399734759062916145353182409398397817693775043304346030250203150386848140862367251147544337900224780202963134933997347590629161453531824093983978176937750433043460302502031503868481408623672511475443379061453531824093983978176937750433043460302502031503868481408623672511475443379012223934551240400478945189095326288308770771506289350685029953926171692408537507190372257890049958209064274944598761777623561353561543911257846386780780067311874929239209275379981860757">
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html
new file mode 100644
index 0000000000..e1f4fb5154
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>iframe and body margin attributes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body marginwidth=20 marginheight=20 topmargin=10 rightmargin=10 bottommargin=10 leftmargin=10>
+<iframe data-desc="iframe marginwidth vs child body leftmargin" src="support/body-topmargin-leftmargin.html" marginwidth=10 marginheight=10></iframe>
+<iframe data-desc="iframe marginwidth vs child body marginwidth" src="support/body-marginwidth-marginheight.html" marginwidth=10 marginheight=10></iframe>
+<script>
+setup({explicit_done: true});
+
+onload = () => {
+  test(() => {
+    const style = getComputedStyle(document.body);
+    assert_style_props(style);
+  }, 'body marginwidth vs body leftmargin');
+
+  [].forEach.call(document.querySelectorAll('iframe'), iframe => {
+    test(() => {
+      const win = iframe.contentWindow;
+      const style = win.getComputedStyle(win.document.body);
+      assert_style_props(style);
+    }, iframe.dataset.desc);
+  });
+  done();
+}
+
+function assert_style_props(style) {
+  for (let prop of ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']) {
+    assert_equals(style[prop], '20px', prop);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html
new file mode 100644
index 0000000000..b09cafbbe4
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>iframe marginwidth and marginheight</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe src="/common/blank.html" marginwidth=0 marginheight=0></iframe>
+<script>
+setup({ single_test: true });
+onload = () => {
+  assert_equals(window[0].document.body.attributes.length, 0, "Number of attributes on the child document's body");
+  done();
+}
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html
new file mode 100644
index 0000000000..424e039e3f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>iframe: changing the scrolling attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<style>
+    iframe {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+
+<p>These two iframes should *both* render with scrollbars:</p>
+<iframe src="support/big-page.html" scrolling="unknown"></iframe>
+<iframe src="support/big-page.html" scrolling="unknown"></iframe>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html
new file mode 100644
index 0000000000..2ead59af39
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>The scrolling attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<style>
+    iframe {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+
+<p>This page tests the behavior of the <tt>scrolling</tt> attribute on
+<tt>&lt;iframe&gt;</tt> elements which contain a page large enough to need to
+be scrolled.</p>
+
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="no"></iframe>
+<iframe src="support/big-page.html" scrolling="no"></iframe>
+<iframe src="support/big-page.html" scrolling="no"></iframe>
+<iframe src="support/big-page.html" scrolling="no"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html
new file mode 100644
index 0000000000..997745ba48
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>The scrolling attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-page">
+<link rel="match" href="iframe-scrolling-attribute-values-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4">
+
+<style>
+    iframe {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+
+<p>This page tests the behavior of the <tt>scrolling</tt> attribute on
+<tt>&lt;iframe&gt;</tt> elements which contain a page large enough to need to
+be scrolled.</p>
+
+<iframe src="support/big-page.html"></iframe>
+<iframe src="support/big-page.html" scrolling></iframe>
+<iframe src="support/big-page.html" scrolling=""></iframe>
+<iframe src="support/big-page.html" scrolling="auto"></iframe>
+<iframe src="support/big-page.html" scrolling="yes"></iframe>
+<iframe src="support/big-page.html" scrolling="no"></iframe>
+<iframe src="support/big-page.html" scrolling="noscroll"></iframe>
+<iframe src="support/big-page.html" scrolling="off"></iframe>
+<iframe src="support/big-page.html" scrolling="NoScRoLl"></iframe>
+<iframe src="support/big-page.html" scrolling="bogus"></iframe>
+<iframe src="support/big-page.html" scrolling="1234"></iframe>
+
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html
new file mode 100644
index 0000000000..d04e2dd56f
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>iframe: changing the scrolling attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-page">
+<link rel="match" href="iframe-scrolling-attribute-ref.html">
+
+<style>
+    iframe {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+
+<p>These two iframes should *both* render with scrollbars:</p>
+<iframe src="support/big-page.html" scrolling="unknown"></iframe>
+<iframe src="support/big-page.html" scrolling="unknown"></iframe>
+
+<script>
+  var iframe = document.getElementsByTagName("iframe")[1];
+  // Setting scrolling=no and then back to scrolling=unknown
+  // should result in a final value of auto.
+  iframe.setAttribute("scrolling", "no");
+  iframe.setAttribute("scrolling", "unknown");
+</script>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html
new file mode 100644
index 0000000000..65f2a65bcf
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html
@@ -0,0 +1,2 @@
+<p>Scroll me</p>
+<div style="width: 400px; height: 400px; background-color: blue"></div>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html
new file mode 100644
index 0000000000..5d825e3455
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<body marginwidth=20 marginheight=20>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html
new file mode 100644
index 0000000000..7ba5e53330
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<body topmargin=20 rightmargin=20 bottommargin=20 leftmargin=20>
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml
new file mode 100644
index 0000000000..cd733b17ba
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml
@@ -0,0 +1,8 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title> This is a test page</title>
+</head>
+<body>
+<p> To rerun this test, delete history and go <a href="body_link.xhtml">back </a> to previous test.</p>
+</body>
+</html>
+\ No newline at end of file
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/rendering/non-replaced-elements
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip