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/quirks
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
60 files changed, 2624 insertions, 0 deletions
diff --git a/testing/web-platform/tests/quirks/META.yml b/testing/web-platform/tests/quirks/META.yml
new file mode 100644
index 0000000000..29f19c5c6a
--- /dev/null
+++ b/testing/web-platform/tests/quirks/META.yml
@@ -0,0 +1,3 @@
+spec: https://quirks.spec.whatwg.org/
+suggested_reviewers:
+  - zcorpan
diff --git a/testing/web-platform/tests/quirks/active-and-hover-manual.html b/testing/web-platform/tests/quirks/active-and-hover-manual.html
new file mode 100644
index 0000000000..10d787dd37
--- /dev/null
+++ b/testing/web-platform/tests/quirks/active-and-hover-manual.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The :active and :hover quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:100%; height:200px; } </style>
+ </head>
+ <body>
+  <p>Click on the boxes below (using a pointing device). <button onclick="timeout()">Abort and show results</button></p>
+  <div id=log></div>
+  <p>quirks:
+  <iframe id=quirks></iframe>
+  <p>almost:
+  <iframe id=almost></iframe>
+  <p>standards:
+  <iframe id=standards></iframe>
+  <script type="text/plain" id=html_tmpl>
+<html id=html class=x lang=en>
+<style>
+.t:not(area), img { display:inline-block; vertical-align:middle; width:50px; height:50px; background-color:#eee; margin:0 0.5em }
+.done.done { background-color:lime }
+link::before { content:'' }
+table, tbody, tr, td { display:inline }
+</style>
+<style>{style}</style>
+<body id=body class=x>
+a<a href=# id=a class=t></a>
+b<a id=b class=t></a>
+c<map id=map1 name=map1 class=x><area href=# coords=0,0,50,50 id=c class=t></map><img id=img1 class=x usemap=#map1 src=/images/transparent.png>
+d<map id=map2 name=map2 class=x><area coords=0,0,50,50 id=d class=t></map><img id=img2 class=x usemap=#map2 src=/images/transparent.png>
+e<link href=# id=e class=t>
+f<link rel=stylesheet href=# id=f class=t>
+g<link id=g class=t>
+h<button id=h class=t></button>
+i<input type=submit id=i class=t value>
+j<input type=image id=j class=t alt>
+k<input type=reset id=k class=t value>
+l<input type=button id=l class=t value>
+m<img tabindex=0 id=n class=t src=/images/transparent.png>
+n<a href=# id=a_ancestor class=x><table id=table class=x><tbody id=tbody class=x><tr id=tr class=x><td id=td class=x><a href=# id=o class=t></a></table></a>
+</script>
+  <script>
+    setup({explicit_done:true, explicit_timeout:true});
+    onload = function() {
+
+      var links_only = [
+      {input:':active', prop:'background-attachment', value:'fixed'},
+      {input:':hover', prop:'background-position', value:'1px 2px'},
+      {input:':hover:active', prop:'background-repeat', value:'repeat-x'},
+      {input:':active:active', prop:'border-collapse', value:'collapse'},
+      {input:':hover:hover', prop:'border-spacing', value:'1px 2px'},
+      {input:'*:active', prop:'border-top-style', value:'dotted'},
+      {input:'*:hover', prop:'border-right-style', value:'dotted'},
+      ];
+
+      var any_elm = [
+      // type selector
+      {input:'a:active, map:active, area:active, link:active, button:active, input:active, img:active, table:active, tbody:active, tr:active, td:active, body:active, html:active', prop:'top', value:'1px'},
+      {input:'a:hover, map:hover, area:hover, link:hover, button:hover, input:hover, img:hover, table:hover, tbody:hover, tr:hover, td:hover, body:hover, html:hover', prop:'right', value:'1px'},
+      // attribute selector
+      {input:'[id]:active', prop:'bottom', value:'1px'},
+      {input:'[id]:hover', prop:'left', value:'1px'},
+      // id selector
+      {input:'#a:active, #b:active, #map1:active, #c:active, #img1:active, #map2:active, #d:active, #img2:active, #e:active, #f:active, #g:active, #h:active, #i:active, #j:active, #k:active, #l:active, #m:active, #n:active, #o:active, #a_ancestor:active, #table:active, #tbody:active, #tr:active, #td:active, #body:active, #html:active', prop:'caption-side', value:'bottom'},
+      {input:'#a:hover, #b:hover, #map1:hover, #c:hover, #img1:hover, #map2:hover, #d:hover, #img2:hover, #e:hover, #f:hover, #g:hover, #h:hover, #i:hover, #j:hover, #k:hover, #l:hover, #m:hover, #n:hover, #o:hover, #a_ancestor:hover, #table:hover, #tbody:hover, #tr:hover, #td:hover, #body:hover, #html:hover', prop:'clear', value:'left'},
+      {input:':active#a, :active#b, :active#map1, :active#c, :active#img1, :active#map2, :active#d, :active#img2, :active#e, :active#f, :active#g, :active#h, :active#i, :active#j, :active#k, :active#l, :active#m, :active#n, :active#o, :active#a_ancestor, :active#table, :active#tbody, :active#tr, :active#td, :active#body, :active#html', prop:'list-style-type', value:'circle'},
+      {input:':hover#a, :hover#b, :hover#map1, :hover#c, :hover#img1, :hover#map2, :hover#d, :hover#img2, :hover#e, :hover#f, :hover#g, :hover#h, :hover#i, :hover#j, :hover#k, :hover#l, :hover#m, :hover#n, :hover#o, :hover#a_ancestor, :hover#table, :hover#tbody, :hover#tr, :hover#td, :hover#body, :hover#html', prop:'max-height', value:'10000px'},
+      // class selector
+      {input:'.t:active, .x:active', prop:'cursor', value:'move'},
+      {input:'.t:hover, .x:hover', prop:'empty-cells', value:'hide'},
+      {input:':active.t, :active.x', prop:'max-width', value:'10000px'},
+      {input:':hover.t, :hover.x', prop:'min-height', value:'1px'},
+      // pseudo-class selector
+      {input:':lang(en):active', prop:'font-style', value:'italic'},
+      {input:':lang(en):hover', prop:'font-variant', value:'small-caps'},
+      {input:':active:lang(en)', prop:'min-width', value:'1px'},
+      {input:':hover:lang(en)', prop:'overflow', value:'hidden'},
+      // pseudo-element selector
+      {input:':active::before', prop:'top', value:'1px', pseudoElt:'::before'},
+      {input:':hover::before', prop:'right', value:'1px', pseudoElt:'::before'},
+      {input:':active::after', prop:'bottom', value:'1px', pseudoElt:'::after'},
+      {input:':hover::after', prop:'left', value:'1px', pseudoElt:'::after'},
+      // as argument
+      //{input:':matches(:active)', prop:'font-weight', value:'bold'},
+      //{input:':matches(:hover)', prop:'list-style-position', value:'inside'},
+      ];
+
+      var stylesheet = '';
+      function serialize(t) {
+        return t.input + '{' + t.prop + ':' + t.value + '}';
+      }
+
+      links_only.concat(any_elm).forEach(function(t) {
+        stylesheet += serialize(t);
+      });
+      var html = document.getElementById('html_tmpl').textContent.replace('{style}', stylesheet);
+      var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+      var s_doctype = '<!DOCTYPE HTML>';
+      var q = document.getElementById('quirks').contentWindow;
+      var a = document.getElementById('almost').contentWindow;
+      var s = document.getElementById('standards').contentWindow;
+      q.document.open();
+      q.document.write(html);
+      q.document.close();
+      a.document.open();
+      a.document.write(a_doctype + html);
+      a.document.close();
+      s.document.open();
+      s.document.write(s_doctype + html);
+      s.document.close();
+      q.mode = 'quirks';
+      a.mode = 'almost';
+      s.mode = 'standards';
+      [q, a, s].forEach(function(win) {
+          win.onmousedown = win.onmouseup = run_tests;
+          win.onclick = function(e) {
+            e.preventDefault();
+          };
+      });
+      var test_count = 0;
+      var total_test_count = q.document.querySelectorAll('.t').length * 3;
+
+      function check_matches(id, win, elm, t, expectMatch) {
+        var prefix = id + ', ' + win.mode + ': ';
+
+        // .getComputedStyle can be checked both for pseudo-elements and normal elements
+        test(function() {
+          assert_equals(win.getComputedStyle(elm, t.pseudoElt).getPropertyValue(t.prop) === t.value, expectMatch);
+        }, prefix + 'getComputedStyle(' + elm.id + ') with selector ' + t.input);
+
+        // .matches doesn't work with pseudo-elements
+        if (!t.pseudoElt) {
+          test(function() {
+            assert_equals(elm.matches(t.input), expectMatch);
+          }, prefix + elm.id + '.matches("' + t.input + '")');
+        }
+      }
+
+      function run_tests(e) {
+        var elm = e.target;
+        if (elm.classList.contains('t') && !elm.classList.contains('done')) {
+          if (!elm.matches('.t:active')) {
+            return;
+          }
+          if (elm.tagName != 'AREA') {
+            elm.classList.add('done');
+          } else {
+            // For <area> we want to style the <img> instead.
+            if (elm.parentNode.nextElementSibling.tagName != 'IMG') {
+              throw new Error("<area>'s parent's next element sibling wasn't an <img>");
+            }
+            elm.parentNode.nextElementSibling.classList.add('done');
+          }
+          var id = elm.id;
+          var win = elm.ownerDocument.defaultView;
+          do {
+            if (win.mode === 'quirks') {
+              links_only.forEach(function(t) {
+                var elmIsLink = elm.matches('a[href], area[href], link[href]');
+                check_matches(id, win, elm, t, elmIsLink);
+              });
+            } else {
+              links_only.forEach(function(t) {
+                check_matches(id, win, elm, t, true);
+              });
+            }
+            any_elm.forEach(function(t) {
+              check_matches(id, win, elm, t, true);
+            });
+          } while (elm = elm.parentElement);
+          test_count++;
+          if (test_count === total_test_count) {
+            done();
+          }
+        }
+      }
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/blocks-ignore-line-height.html b/testing/web-platform/tests/quirks/blocks-ignore-line-height.html
new file mode 100644
index 0000000000..c07f6cf49b
--- /dev/null
+++ b/testing/web-platform/tests/quirks/blocks-ignore-line-height.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The blocks ignore line-height quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:200px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe id=quirks></iframe>
+  <iframe id=almost></iframe>
+  <iframe id=standards></iframe>
+  <script>
+    setup({explicit_done:true});
+    onload = function() {
+        var html = "<style id=style></style>";
+        var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+        var s_doctype = '<!DOCTYPE HTML>';
+        var q = document.getElementById('quirks').contentWindow;
+        var a = document.getElementById('almost').contentWindow;
+        var s = document.getElementById('standards').contentWindow;
+        q.document.open();
+        q.document.write(html);
+        q.document.close();
+        a.document.open();
+        a.document.write(a_doctype + html);
+        a.document.close();
+        s.document.open();
+        s.document.write(s_doctype + html);
+        s.document.close();
+        [q, a, s].forEach(function(win) {
+            ['style', 'test', 'ref', 's_ref'].forEach(function(id) {
+                Object.getPrototypeOf(win).__defineGetter__(id, function() { return win.document.getElementById(id); });
+            });
+        });
+
+        var tests = [
+        {style:'#ref { display:block }', body:
+        '<div id=test><font size=1>x</font></div>'+
+        '<font id=ref size=1>x</font>'+
+        '<div id=s_ref>x</div>'},
+
+        {style:'#ref { display:block }', body:
+        '<div id=test><font size=1>x</font><br><font size=1>x</font></div>'+
+        '<font id=ref size=1>x<br>x</font>'+
+        '<div id=s_ref>x<br>x</div>'},
+
+        {style:'#ref { display:block }', body:
+        '<div id=test><font size=1>foo</font><br><font size=1>foo</font><div>x</div></div>'+
+        '<font id=ref size=1>foo<br>foo<br><font size=3>x</font></font>'+
+        '<div id=s_ref>x<br>x<br>x</div>'},
+
+        {style:'#ref { display:block } div, #ref { line-height:2 } span { font-size:50% }', body:
+        '<div id=test><span>x</span></div>'+
+        '<span id=ref>x</span>'+
+        '<div id=s_ref>x</div>'},
+        ];
+
+        tests.forEach(function(t) {
+            test(function() {
+                q.style.textContent = t.style;
+                a.style.textContent = t.style;
+                s.style.textContent = t.style;
+                q.document.body.innerHTML = t.body;
+                a.document.body.innerHTML = t.body;
+                s.document.body.innerHTML = t.body;
+
+                assert_equals(q.getComputedStyle(q.test).height,
+                              q.getComputedStyle(q.ref).height,
+                              'quirks mode');
+                assert_equals(a.getComputedStyle(a.test).height,
+                              a.getComputedStyle(a.ref).height,
+                              'almost standards mode');
+                assert_equals(s.getComputedStyle(s.test).height,
+                              s.getComputedStyle(s.s_ref).height,
+                              'standards mode');
+            }, document.title+', '+t.style+t.body);
+        });
+
+        done();
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-float.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-float.html
new file mode 100644
index 0000000000..c1fdd16ac0
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-float.html
@@ -0,0 +1,19 @@
+<!DOCTYPE quirks-mode>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk">
+<link rel="match" href="body-fills-html-quirk-ref.html">
+<style>
+body {
+  border: solid;
+  margin: 10px 11px 12px 14px;
+  float: left;
+}
+span {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-inline.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-inline.html
new file mode 100644
index 0000000000..82dc7a6171
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-inline.html
@@ -0,0 +1,19 @@
+<!DOCTYPE quirks-mode>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk">
+<link rel="match" href="body-fills-html-quirk-ref.html">
+<style>
+body {
+  border: solid;
+  margin: 10px 11px 12px 14px;
+  display: inline-block;
+}
+span {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-positioned.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-positioned.html
new file mode 100644
index 0000000000..f46caddc78
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-positioned.html
@@ -0,0 +1,19 @@
+<!DOCTYPE quirks-mode>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk">
+<link rel="match" href="body-fills-html-quirk-ref.html">
+<style>
+body {
+  border: solid;
+  margin: 10px 11px 12px 14px;
+  position: absolute;
+}
+span {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-ref.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-ref.html
new file mode 100644
index 0000000000..d4da87bd9f
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body style="margin: 10px 11px 12px 14px;">
+  <div style="width: 100px; height: 100px; border: solid; background: green;"></div>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-ref2.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-ref2.html
new file mode 100644
index 0000000000..68ceb2b8b1
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-ref2.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body style="margin: 0">
+  <div style="width: 175px; height: 178px; margin: 10px 11px 12px 14px; border: solid; box-sizing: border-box;">
+    <div style="width: 100px; height: 100px; background: green"></div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk-vertical.html b/testing/web-platform/tests/quirks/body-fills-html-quirk-vertical.html
new file mode 100644
index 0000000000..485c14d35e
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk-vertical.html
@@ -0,0 +1,23 @@
+<!DOCTYPE quirks-mode>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk"/>
+<link rel="match" href="body-fills-html-quirk-ref2.html" />
+<style>
+  html {
+    width: 200px;
+    height: 200px;
+    writing-mode: vertical-lr;
+  }
+  body {
+    border: solid;
+    margin: 10px 11px 12px 14px;
+  }
+  span {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/body-fills-html-quirk.html b/testing/web-platform/tests/quirks/body-fills-html-quirk.html
new file mode 100644
index 0000000000..83ccea7dca
--- /dev/null
+++ b/testing/web-platform/tests/quirks/body-fills-html-quirk.html
@@ -0,0 +1,22 @@
+<!DOCTYPE quirks-mode>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk"/>
+<link rel="match" href="body-fills-html-quirk-ref2.html" />
+<style>
+  html {
+    width: 200px;
+    height: 200px;
+  }
+  body {
+    border: solid;
+    margin: 10px 11px 12px 14px;
+  }
+  span {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/class-names-across-iframes-ref.html b/testing/web-platform/tests/quirks/class-names-across-iframes-ref.html
new file mode 100644
index 0000000000..47ff69d30b
--- /dev/null
+++ b/testing/web-platform/tests/quirks/class-names-across-iframes-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<title>Verifies matching of class names across iframes with/without quirks</title>
+<body>
+<iframe srcdoc="<!DOCTYPE html><html><head><style>p.Testing{color:green;}</style></head><body><p class='Testing'>text that should be green</p></body></html>");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/class-names-across-iframes.html b/testing/web-platform/tests/quirks/class-names-across-iframes.html
new file mode 100644
index 0000000000..a40a0e9dc5
--- /dev/null
+++ b/testing/web-platform/tests/quirks/class-names-across-iframes.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="match" href="class-names-across-iframes-ref.html" />
+<html>
+<title>Verifies matching of class names across iframes with/without quirks</title>
+<body>
+<template><p class="Testing">text that should be green</p></template>
+
+<script>
+  /*
+    This test is a regression test for a bug in chrome. See
+    https://crbug.com/1474382. It triggers quirks mode in the iframe
+    and then exits quirks mode.
+    */
+  const iframe = document.createElement('iframe');
+  document.body.append(iframe);
+
+  const doc = iframe.contentWindow.document;
+
+  const data = document.querySelector('template').innerHTML;
+  const body = doc.createElement('body');
+  body.innerHTML = data;
+
+  doc.open();
+  doc.write(`<!DOCTYPE html><html><head><style>p.Testing{color:green;}</style></head><body>${data}</body></html>`);
+  doc.close();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/classname-query-after-sibling-adoption.html b/testing/web-platform/tests/quirks/classname-query-after-sibling-adoption.html
new file mode 100644
index 0000000000..0fcad36776
--- /dev/null
+++ b/testing/web-platform/tests/quirks/classname-query-after-sibling-adoption.html
@@ -0,0 +1,32 @@
+<!-- quirks mode -->
+<html>
+  <head>
+    <title>Quirks mode elements with class names should remain queriable regardless of sibling adoption into standards mode documents</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <div>
+      <button class="Foo"></button>
+      <button class="Foo"></button>
+    </div>
+    <template><div class="Bar"></div></template>
+    <script>
+    test(function () {
+      var templateDocument = document.querySelector("template").content.ownerDocument;
+      assert_equals(templateDocument.compatMode, "CSS1Compat");
+      assert_equals(document.compatMode, "BackCompat");
+      var container = document.querySelector("div");
+      var button1 = container.querySelector(".foo");
+      assert_true(button1 instanceof Element);
+      templateDocument.appendChild(button1);
+      assert_true(templateDocument.querySelector(".Foo") instanceof Element);
+      assert_false(templateDocument.querySelector(".foo") instanceof Element);
+      var button2byHierarchy = container.firstElementChild;
+      var button2bySelector = container.querySelector(".foo");
+      assert_true(button2bySelector instanceof Element);
+      assert_equals(button2bySelector, button2byHierarchy);
+    });
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/quirks/crashtests/list-item-whole-line-quirks-crash.html b/testing/web-platform/tests/quirks/crashtests/list-item-whole-line-quirks-crash.html
new file mode 100644
index 0000000000..b91b09db0e
--- /dev/null
+++ b/testing/web-platform/tests/quirks/crashtests/list-item-whole-line-quirks-crash.html
@@ -0,0 +1,5 @@
+<!-- quirks -->
+<div>a<ul><li><ul style='float: left'></ul></li></ul></div>
+<div>a<ul><li><ul style='position: absolute'></ul></li></ul></div>
+<div>a<ul><li><ul style='display: inline'></ul></li></ul></div>
+<div>a<ul><li><ul style='display: inline-block'></ul></li></ul></div>
diff --git a/testing/web-platform/tests/quirks/dd-dl-firefox-001-ref.html b/testing/web-platform/tests/quirks/dd-dl-firefox-001-ref.html
new file mode 100644
index 0000000000..46a4d7d156
--- /dev/null
+++ b/testing/web-platform/tests/quirks/dd-dl-firefox-001-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<div>Prevent quirky dl margin from messing up with us</div>
+<dl>
+  <dd>One</dd>
+  <dl>Two</dl>
+</dl>
+<dd>Three</dd><dd>Four</dd>
diff --git a/testing/web-platform/tests/quirks/dd-dl-firefox-001.html b/testing/web-platform/tests/quirks/dd-dl-firefox-001.html
new file mode 100644
index 0000000000..96fc76f08f
--- /dev/null
+++ b/testing/web-platform/tests/quirks/dd-dl-firefox-001.html
@@ -0,0 +1,18 @@
+<!-- quirks -->
+<title>dd and dl don't have weird text-indent quirks</title>
+<link rel="match" href="dd-dl-firefox-001-ref.html">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=782551">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  /* Firefox used to (sometimes) implement dd indentation in quirks mode via
+     the ::before pseudo-element; this rule should do nothing in compliant
+     browsers */
+  dd::before { content: "" }
+</style>
+<div>Prevent quirky dl margin from messing up with us</div>
+<dl>
+  <dd>One</dd>
+  <dl>Two</dl>
+</dl>
+<dd>Three</dd><dd>Four</dd>
diff --git a/testing/web-platform/tests/quirks/hashless-hex-color/limited-quirks.html b/testing/web-platform/tests/quirks/hashless-hex-color/limited-quirks.html
new file mode 100644
index 0000000000..f7dd7ed4bd
--- /dev/null
+++ b/testing/web-platform/tests/quirks/hashless-hex-color/limited-quirks.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The hashless hex color quirk (limited-quirks)</title>
+  <meta name="timeout" content="long">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=limited-quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/hashless-hex-color/no-quirks.html b/testing/web-platform/tests/quirks/hashless-hex-color/no-quirks.html
new file mode 100644
index 0000000000..2ea5c666b7
--- /dev/null
+++ b/testing/web-platform/tests/quirks/hashless-hex-color/no-quirks.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The hashless hex color quirk (no-quirks)</title>
+  <meta name="timeout" content="long">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=no-quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/hashless-hex-color/quirks.html b/testing/web-platform/tests/quirks/hashless-hex-color/quirks.html
new file mode 100644
index 0000000000..bc45da2eab
--- /dev/null
+++ b/testing/web-platform/tests/quirks/hashless-hex-color/quirks.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The hashless hex color quirk (quirks)</title>
+  <meta name="timeout" content="long">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/hashless-hex-color/support/common.js b/testing/web-platform/tests/quirks/hashless-hex-color/support/common.js
new file mode 100644
index 0000000000..eea618050d
--- /dev/null
+++ b/testing/web-platform/tests/quirks/hashless-hex-color/support/common.js
@@ -0,0 +1,423 @@
+setup({explicit_done:true});
+onload = function() {
+    setupIframe();
+
+    var tests = [
+    {input:"123", q:"#000123"},
+    {input:"023", q:"#000023"},
+    {input:"003", q:"#000003"},
+    {input:"000", q:"#000"},
+    {input:"abc", q:"#abc"},
+    {input:"ABC", q:"#abc"},
+    {input:"1ab", q:"#0001ab"},
+    {input:"1AB", q:"#0001ab"},
+    {input:"112233", q:"#123"},
+    {input:"012233", q:"#012233"},
+    {input:"002233", q:"#023"},
+    {input:"000233", q:"#000233"},
+    {input:"000033", q:"#003"},
+    {input:"000003", q:"#000003"},
+    {input:"000000", q:"#000000"},
+    {input:"aabbcc", q:"#abc"},
+    {input:"AABBCC", q:"#abc"},
+    {input:"11aabb", q:"#1ab"},
+    {input:"11AABB", q:"#1ab"},
+    {input:"\\31 23", q:"#123"},
+    {input:"\\61 bc", q:"#abc"},
+    {input:"\\41 BC", q:"#abc"},
+    {input:"\\31 ab", q:"#1ab"},
+    {input:"\\31 AB", q:"#1ab"},
+    {input:"\\31 12233", q:"#123"},
+    {input:"\\61 abbcc", q:"#abc"},
+    {input:"\\41 ABBCC", q:"#abc"},
+    {input:"\\31 1aabb", q:"#1ab"},
+    {input:"\\31 1AABB", q:"#1ab"},
+    {input:"12\\33 ", q:"#000123"},
+    {input:"1", q:"#000001"},
+    {input:"12", q:"#000012"},
+    {input:"1234", q:"#001234"},
+    {input:"12345", q:"#012345"},
+    {input:"1234567"},
+    {input:"12345678"},
+    {input:"a"},
+    {input:"aa"},
+    {input:"aaaa"},
+    {input:"aaaaa"},
+    {input:"aaaaaaa"},
+    {input:"aaaaaaaa"},
+    {input:"A"},
+    {input:"AA"},
+    {input:"AAAA"},
+    {input:"AAAAA"},
+    {input:"AAAAAAA"},
+    {input:"AAAAAAAA"},
+    {input:"1a", q:"#00001a"},
+    {input:"1abc", q:"#001abc"},
+    {input:"1abcd", q:"#01abcd"},
+    {input:"1abcdef"},
+    {input:"1abcdeff"},
+    {input:"+1", q:"#000001"},
+    {input:"+12", q:"#000012"},
+    {input:"+123", q:"#000123"},
+    {input:"+1234", q:"#001234"},
+    {input:"+12345", q:"#012345"},
+    {input:"+123456", q:"#123456"},
+    {input:"+1234567"},
+    {input:"+12345678"},
+    {input:"-1"},
+    {input:"-12"},
+    {input:"-123"},
+    {input:"-1234"},
+    {input:"-12345"},
+    {input:"-123456"},
+    {input:"-1234567"},
+    {input:"-12345678"},
+    {input:"+1a", q:"#00001a"},
+    {input:"+12a", q:"#00012a"},
+    {input:"+123a", q:"#00123a"},
+    {input:"+1234a", q:"#01234a"},
+    {input:"+12345a", q:"#12345a"},
+    {input:"+123456a"},
+    {input:"+1234567a"},
+    {input:"-1a"},
+    {input:"-12a"},
+    {input:"-123a"},
+    {input:"-1234a"},
+    {input:"-12345a"},
+    {input:"-123456a"},
+    {input:"-1234567a"},
+    {input:"-12345678a"},
+    {input:"+1A", q:"#00001a"},
+    {input:"+12A", q:"#00012a"},
+    {input:"+123A", q:"#00123a"},
+    {input:"+1234A", q:"#01234a"},
+    {input:"+12345A", q:"#12345a"},
+    {input:"+123456A"},
+    {input:"+1234567A"},
+    {input:"-1A"},
+    {input:"-12A"},
+    {input:"-123A"},
+    {input:"-1234A"},
+    {input:"-12345A"},
+    {input:"-123456A"},
+    {input:"-1234567A"},
+    {input:"-12345678A"},
+    {input:"+a"},
+    {input:"+aa"},
+    {input:"+aaa"},
+    {input:"+aaaa"},
+    {input:"+aaaaa"},
+    {input:"+aaaaaa"},
+    {input:"+aaaaaaa"},
+    {input:"+aaaaaaaa"},
+    {input:"-a"},
+    {input:"-aa"},
+    {input:"-aaa"},
+    {input:"-aaaa"},
+    {input:"-aaaaa"},
+    {input:"-aaaaaa"},
+    {input:"-aaaaaaa"},
+    {input:"-aaaaaaaa"},
+    {input:"-aaaaaaaaa"},
+    {input:"+A"},
+    {input:"+AA"},
+    {input:"+AAA"},
+    {input:"+AAAA"},
+    {input:"+AAAAA"},
+    {input:"+AAAAAA"},
+    {input:"+AAAAAAA"},
+    {input:"+AAAAAAAA"},
+    {input:"-A"},
+    {input:"-AA"},
+    {input:"-AAA"},
+    {input:"-AAAA"},
+    {input:"-AAAAA"},
+    {input:"-AAAAAA"},
+    {input:"-AAAAAAA"},
+    {input:"-AAAAAAAA"},
+    {input:"-AAAAAAAAA"},
+    {input:"1.1"},
+    {input:"1.11"},
+    {input:"1.111"},
+    {input:"1.1111"},
+    {input:"1.11111"},
+    {input:"1.111111"},
+    {input:"1.1111111"},
+    {input:"+1.1"},
+    {input:"+1.11"},
+    {input:"+1.111"},
+    {input:"+1.1111"},
+    {input:"+1.11111"},
+    {input:"+1.111111"},
+    {input:"+1.1111111"},
+    {input:"-1.1"},
+    {input:"-1.11"},
+    {input:"-1.111"},
+    {input:"-1.1111"},
+    {input:"-1.11111"},
+    {input:"-1.111111"},
+    {input:"-1.1111111"},
+    {input:"1.1a"},
+    {input:"1.11a"},
+    {input:"1.111a"},
+    {input:"1.1111a"},
+    {input:"1.11111a"},
+    {input:"1.111111a"},
+    {input:"+1.1a"},
+    {input:"+1.11a"},
+    {input:"+1.111a"},
+    {input:"+1.1111a"},
+    {input:"+1.11111a"},
+    {input:"+1.111111a"},
+    {input:"-1.1a"},
+    {input:"-1.11a"},
+    {input:"-1.111a"},
+    {input:"-1.1111a"},
+    {input:"-1.11111a"},
+    {input:"-1.111111a"},
+    {input:"1.0"},
+    {input:"11.0"},
+    {input:"111.0"},
+    {input:"1111.0"},
+    {input:"11111.0"},
+    {input:"111111.0"},
+    {input:"1111111.0"},
+    {input:"11111111.0"},
+    {input:"+1.0"},
+    {input:"+11.0"},
+    {input:"+111.0"},
+    {input:"+1111.0"},
+    {input:"+11111.0"},
+    {input:"+111111.0"},
+    {input:"+1111111.0"},
+    {input:"+11111111.0"},
+    {input:"-1.0"},
+    {input:"-11.0"},
+    {input:"-111.0"},
+    {input:"-1111.0"},
+    {input:"-11111.0"},
+    {input:"-111111.0"},
+    {input:"-1111111.0"},
+    {input:"-11111111.0"},
+    {input:"1.0a"},
+    {input:"11.0a"},
+    {input:"111.0a"},
+    {input:"1111.0a"},
+    {input:"11111.0a"},
+    {input:"111111.0a"},
+    {input:"1111111.0a"},
+    {input:"+1.0a"},
+    {input:"+11.0a"},
+    {input:"+111.0a"},
+    {input:"+1111.0a"},
+    {input:"+11111.0a"},
+    {input:"+111111.0a"},
+    {input:"+1111111.0a"},
+    {input:"-1.0a"},
+    {input:"-11.0a"},
+    {input:"-111.0a"},
+    {input:"-1111.0a"},
+    {input:"-11111.0a"},
+    {input:"-111111.0a"},
+    {input:"-1111111.0a"},
+    {input:"+/**/123"},
+    {input:"-/**/123"},
+    {input:"+/**/123456"},
+    {input:"-/**/123456"},
+    {input:"+/**/abc"},
+    {input:"-/**/abc"},
+    {input:"+/**/abcdef"},
+    {input:"-/**/abcdef"},
+    {input:"+/**/12a"},
+    {input:"-/**/12a"},
+    {input:"+/**/12345a"},
+    {input:"-/**/12345a"},
+    {input:"abg"},
+    {input:"aabbcg"},
+    {input:"1ag"},
+    {input:"1122ag"},
+    {input:"ABG"},
+    {input:"AABBCG"},
+    {input:"1AG"},
+    {input:"1122AG"},
+    {input:"@a"},
+    {input:"@ab"},
+    {input:"@abc"},
+    {input:"@abcd"},
+    {input:"@abcde"},
+    {input:"@abcdef"},
+    {input:"@1"},
+    {input:"@11"},
+    {input:"@111"},
+    {input:"@1111"},
+    {input:"@11111"},
+    {input:"@111111"},
+    {input:"@1a"},
+    {input:"@11a"},
+    {input:"@111a"},
+    {input:"@1111a"},
+    {input:"@11111a"},
+    {input:'"a"'},
+    {input:'"ab"'},
+    {input:'"abc"'},
+    {input:'"abcd"'},
+    {input:'"abcde"'},
+    {input:'"abcdef"'},
+    {input:'"1"'},
+    {input:'"11"'},
+    {input:'"111"'},
+    {input:'"1111"'},
+    {input:'"11111"'},
+    {input:'"111111"'},
+    {input:'"1a"'},
+    {input:'"11a"'},
+    {input:'"111a"'},
+    {input:'"1111a"'},
+    {input:'"11111a"'},
+    {input:"url(a)", svg:'url(a)'},
+    {input:"url(aa)", svg:'url(aa)'},
+    {input:"url(aaa)", svg:'url(aaa)'},
+    {input:"url(aaaa)", svg:'url(aaaa)'},
+    {input:"url(aaaaa)", svg:'url(aaaaa)'},
+    {input:"url(aaaaaa)", svg:'url(aaaaaa)'},
+    {input:"url('a')", svg:'url(a)'},
+    {input:"url('aa')", svg:'url(aa)'},
+    {input:"url('aaa')", svg:'url(aaa)'},
+    {input:"url('aaaa')", svg:'url(aaaa)'},
+    {input:"url('aaaaa')", svg:'url(aaaaa)'},
+    {input:"url('aaaaaa')", svg:'url(aaaaaa)'},
+    {input:"#a"},
+    {input:"#aa"},
+    {input:"#aaaaa"},
+    {input:"#aaaaaaa"},
+    {input:"#1"},
+    {input:"#11"},
+    {input:"#11111"},
+    {input:"#1111111"},
+    {input:"#1a"},
+    {input:"#1111a"},
+    {input:"#111111a"},
+    {input:"1%"},
+    {input:"11%"},
+    {input:"111%"},
+    {input:"1111%"},
+    {input:"11111%"},
+    {input:"111111%"},
+    {input:"calc(123)"},
+    {input:"rgb(119, 255, 255)", q:"#7ff", s:"#7ff", svg:"#7ff"},
+    {input:"rgba(119, 255, 255, 001)", q:"#7ff", s:"#7ff", svg:"#7ff"},
+    {input:"hsl(100, 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"hsla(100, 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"rgb(calc(100 + 155), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"rgba(calc(100 + 155), 255, 255, 001)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"hsl(calc(050 + 050), 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"hsla(calc(050 + 050), 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"rgb(/**/255, 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"rgb(/**/255/**/, /**/255/**/, /**/255/**/)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"rgb(calc(/**/100/**/ + /**/155/**/), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
+    {input:"#123 123 abc 12a", q:"#123 #000123 #abc #00012a", shorthand:true},
+    {input:"rgb(119, 255, 255) 123", q:"#7ff #000123", shorthand:true},
+    {input:"123 rgb(119, 255, 255)", q:"#000123 #7ff", shorthand:true},
+    {input:"1e1"},
+    {input:"11e1"},
+    {input:"111e1"},
+    {input:"1111e1"},
+    {input:"11111e1"},
+    {input:"111111e1"},
+    {input:"1e+1"},
+    {input:"11e+1"},
+    {input:"111e+1"},
+    {input:"1111e+1"},
+    {input:"11111e+1"},
+    {input:"111111e+1"},
+    {input:"1e-0"},
+    {input:"11e-0"},
+    {input:"111e-0"},
+    {input:"1111e-0"},
+    {input:"11111e-0"},
+    {input:"111111e-0"},
+    {input:"1e1a"},
+    {input:"11e1a"},
+    {input:"111e1a"},
+    {input:"1111e1a"},
+    {input:"11111e1a"},
+    {input:"111111e1a"},
+    {desc:"1111111111...", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
+    {desc:"1111111111...a", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111a"},
+    {desc:"a1111111111...", input:"a1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
+    ];
+
+    var props = [
+    {prop:'background-color', check:'background-color'},
+    {prop:'border-color', check:'border-top-color', check_also:['border-right-color', 'border-bottom-color', 'border-left-color']},
+    {prop:'border-top-color', check:'border-top-color'},
+    {prop:'border-right-color', check:'border-right-color'},
+    {prop:'border-bottom-color', check:'border-bottom-color'},
+    {prop:'border-left-color', check:'border-left-color'},
+    {prop:'color', check:'color'},
+    ];
+    var style_template = '#test{{prop}:{test};}' +
+                         '#ref{{prop}:{ref};}';
+
+    tests.forEach(function(t) {
+        var name = t.desc || t.input;
+        var test_html = async_test(name);
+        var test_svg = async_test(name + ' (SVG)');
+        for (var i in props) {
+            if (t.shorthand && !(props[i].check_also)) {
+                continue;
+            }
+            test_html.step(function() {
+                win.style.textContent = style_template.replace('{test}', t.input)
+                            .replace('{ref}', quirks ? t.q : t.s).replace(/\{prop\}/g, props[i].prop);
+                assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check),
+                              win.getComputedStyle(win.ref).getPropertyValue(props[i].check),
+                              props[i].prop);
+                if (t.shorthand && props[i].check_also) {
+                    for (var j in props[i].check_also) {
+                        assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check_also[j]),
+                                      win.getComputedStyle(win.ref).getPropertyValue(props[i].check_also[j]),
+                                      props[i].prop + ' checking ' + props[i].check_also[j]);
+                    }
+                }
+            });
+            test_svg.step(function() {
+                win.svg.setAttribute('fill', t.input);
+                if (t.svg) {
+                    win.svg_ref.setAttribute('fill', t.svg);
+                } else {
+                    win.svg_ref.removeAttribute('fill');
+                }
+                assert_equals(win.getComputedStyle(win.svg).fill, win.getComputedStyle(win.svg_ref).fill, 'SVG fill=""');
+            });
+        }
+        test_html.done();
+        test_svg.done();
+    });
+
+    if (quirks) {
+        var other_tests = [
+        {input:'background:abc', prop:'background-color'},
+        {input:'border-top:1px solid abc', prop:'border-top-color'},
+        {input:'border-right:1px solid abc', prop:'border-right-color'},
+        {input:'border-bottom:1px solid abc', prop:'border-bottom-color'},
+        {input:'border-left:1px solid abc', prop:'border-left-color'},
+        {input:'border:1px solid abc', prop:'border-top-color'},
+        {input:'outline-color:abc', prop:'outline-color'},
+        {input:'outline:1px solid abc', prop:'outline-color'}
+        ];
+
+        var other_template = "#test{{test};}"
+
+        other_tests.forEach(function(t) {
+            test(function() {
+                win.style.textContent = other_template.replace('{test}', t.input);
+                assert_equals(win.getComputedStyle(win.test).getPropertyValue(t.prop),
+                              win.getComputedStyle(win.ref).getPropertyValue(t.prop),
+                              'quirk was supported');
+            }, document.title+', excluded property '+t.input);
+        });
+    }
+
+    done();
+}
diff --git a/testing/web-platform/tests/quirks/historical/list-item-bullet-size-ref.html b/testing/web-platform/tests/quirks/historical/list-item-bullet-size-ref.html
new file mode 100644
index 0000000000..f449ce9924
--- /dev/null
+++ b/testing/web-platform/tests/quirks/historical/list-item-bullet-size-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Historical quirk: list item bullet size</title>
+<style>
+p { margin:0 }
+#test { font-size:3em; margin-top:0 }
+</style>
+<p>There should be a normal-size bullet and a big bullet below.</p>
+<ul>
+ <li>&nbsp;
+</ul>
+<ul id=test>
+ <li>&nbsp;
+</ul>
diff --git a/testing/web-platform/tests/quirks/historical/list-item-bullet-size.html b/testing/web-platform/tests/quirks/historical/list-item-bullet-size.html
new file mode 100644
index 0000000000..bf996edf78
--- /dev/null
+++ b/testing/web-platform/tests/quirks/historical/list-item-bullet-size.html
@@ -0,0 +1,16 @@
+<!--quirks-->
+<title>Historical quirk: list item bullet size</title>
+<link rel=help href=https://quirks.spec.whatwg.org/#goals>
+<meta name=assert content="List item bullet size quirk must not be supported.">
+<link rel=match href=list-item-bullet-size-ref.html>
+<style>
+p { margin:0 }
+#test { font-size:3em; margin-top:0 }
+</style>
+<p>There should be a normal-size bullet and a big bullet below.</p>
+<ul>
+ <li>&nbsp;
+</ul>
+<ul id=test>
+ <li>&nbsp;
+</ul>
diff --git a/testing/web-platform/tests/quirks/historical/reference/vertical-align-in-quirks-ref.html b/testing/web-platform/tests/quirks/historical/reference/vertical-align-in-quirks-ref.html
new file mode 100644
index 0000000000..7bef765150
--- /dev/null
+++ b/testing/web-platform/tests/quirks/historical/reference/vertical-align-in-quirks-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<style>
+div {
+  font-size: 10px;
+  line-height: 50px;
+  border: 1px solid blue;
+}
+img {
+  width: 1em;
+  height: 2em;
+  background: orange;
+  border: 1px solid black;
+}
+.text-top {
+  vertical-align: text-top;
+}
+.text-bottom {
+  vertical-align: text-bottom;
+}
+.top {
+  vertical-align: top;
+}
+.bottom {
+  vertical-align: bottom;
+}
+</style>
+<body>
+  <div>
+    <img class="text-top" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="text-bottom" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="top" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="bottom" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="text-top" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="text-bottom" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="top" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="bottom" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/quirks/historical/vertical-align-in-quirks.html b/testing/web-platform/tests/quirks/historical/vertical-align-in-quirks.html
new file mode 100644
index 0000000000..c076724304
--- /dev/null
+++ b/testing/web-platform/tests/quirks/historical/vertical-align-in-quirks.html
@@ -0,0 +1,56 @@
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter spacing after bidi</title>
+<link rel="author" href="kojii@chromium.org">
+<link rel="match" href="reference/vertical-align-in-quirks-ref.html">
+<meta name="assert" content="Tests some vertical-align values match in quirks and standard modes.">
+<style>
+div {
+  font-size: 10px;
+  line-height: 50px;
+  border: 1px solid blue;
+}
+img {
+  width: 1em;
+  height: 2em;
+  background: orange;
+  border: 1px solid black;
+}
+.text-top {
+  vertical-align: text-top;
+}
+.text-bottom {
+  vertical-align: text-bottom;
+}
+.top {
+  vertical-align: top;
+}
+.bottom {
+  vertical-align: bottom;
+}
+</style>
+<body>
+  <div>
+    <img class="text-top" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="text-bottom" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="top" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="bottom" src="/css/support/60x60-red.png">Y
+  </div>
+  <div>
+    <img class="text-top" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="text-bottom" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="top" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+  <div>
+    <img class="bottom" src="/css/support/60x60-red.png"><span>Y</span>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/quirks/html-fills-viewport-quirk-ref.html b/testing/web-platform/tests/quirks/html-fills-viewport-quirk-ref.html
new file mode 100644
index 0000000000..2d93fff417
--- /dev/null
+++ b/testing/web-platform/tests/quirks/html-fills-viewport-quirk-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body style="width: 100vw; height: 100vh; margin: 0; padding: 10px 11px 12px 14px; box-sizing: border-box">
+  <div id="border" style="border: solid; width: 100%; height: 100%; box-sizing: border-box">
+    <div style="width: 100px; height: 100px; background: green"></div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/quirks/html-fills-viewport-quirk-vertical.html b/testing/web-platform/tests/quirks/html-fills-viewport-quirk-vertical.html
new file mode 100644
index 0000000000..e5083b4eab
--- /dev/null
+++ b/testing/web-platform/tests/quirks/html-fills-viewport-quirk-vertical.html
@@ -0,0 +1,25 @@
+<!DOCTYPE quirks-mode>
+<link
+  rel="help"
+  href="https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk"
+/>
+<link rel="match" href="html-fills-viewport-quirk-ref.html" />
+<style>
+  html {
+    border: solid;
+    margin: 10px 11px 12px 14px;
+    writing-mode: vertical-lr;
+  }
+  body {
+    margin: 0;
+  }
+  span {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/html-fills-viewport-quirk.html b/testing/web-platform/tests/quirks/html-fills-viewport-quirk.html
new file mode 100644
index 0000000000..892fe489a2
--- /dev/null
+++ b/testing/web-platform/tests/quirks/html-fills-viewport-quirk.html
@@ -0,0 +1,24 @@
+<!DOCTYPE quirks-mode>
+<link
+  rel="help"
+  href="https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk"
+/>
+<link rel="match" href="html-fills-viewport-quirk-ref.html" />
+<style>
+  html {
+    border: solid;
+    margin: 10px 11px 12px 14px;
+  }
+  body {
+    margin: 0;
+  }
+  span {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<body>
+  <span></span>
+</body>
diff --git a/testing/web-platform/tests/quirks/line-height-calculation.html b/testing/web-platform/tests/quirks/line-height-calculation.html
new file mode 100644
index 0000000000..cc5254ae1b
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-calculation.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The line height calculation quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:200px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe id=quirks></iframe>
+  <iframe id=almost></iframe>
+  <iframe id=standards></iframe>
+  <script>
+    setup({explicit_done:true});
+
+    var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+    var preload = new Image();
+    preload.src = png;
+
+    onload = function() {
+        var html = "<style id=style></style>";
+        var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+        var s_doctype = '<!DOCTYPE HTML>';
+        var q = document.getElementById('quirks').contentWindow;
+        var a = document.getElementById('almost').contentWindow;
+        var s = document.getElementById('standards').contentWindow;
+        q.document.open();
+        q.document.write(html);
+        q.document.close();
+        a.document.open();
+        a.document.write(a_doctype + html);
+        a.document.close();
+        s.document.open();
+        s.document.write(s_doctype + html);
+        s.document.close();
+        [q, a, s].forEach(function(win) {
+            ['style', 'test', 'ref', 's_ref'].forEach(function(id) {
+                Object.getPrototypeOf(win).__defineGetter__(id, function() { return win.document.getElementById(id); });
+            });
+        });
+
+        var tests = [
+        {style:'', body:'<div id=test><img src="{png}"></div><img id=ref src="{png}"><div id=s_ref>x</div>'},
+        {style:'', body:'<div id=test><img src="{png}"> <img src="{png}"></div><div id=ref>x</div><div id=s_ref>x</div>'},
+        {style:'', body:'<table><tr><td id=test><img src="{png}"><tr><td><img id=ref src="{png}"><tr><td id=s_ref>x</table>'},
+        {style:'', body:'<table><tr><td id=test><img src="{png}"> <img src="{png}"><tr><td id=ref>x<tr><td id=s_ref>x</table>'},
+        {style:'', body:'<pre id=test><img src="{png}"></pre><img id=ref src="{png}"><pre id=s_ref>x</pre>'},
+        {style:'', body:'<pre id=test><img src="{png}"> </pre><pre id=ref>x</pre><pre id=s_ref>x</pre>'},
+        {style:'span { margin:1px }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'},
+        {style:'span { padding:1px 0 }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'},
+        {style:'span { margin:0 1px }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'},
+        {style:'span { margin:0 1px; padding:1px 0 }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref>x</div>'},
+        {style:'span { border-width:1px 0; border-style:solid }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'},
+        {style:'span { border-width:1px; border-style:solid none }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'},
+        {style:'span { border-width:1px; border-style:solid hidden }', body:'<div id=test><span></span></div><div id=ref></div><div id=s_ref></div>'},
+        {style:'span { border-right:1px solid }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'},
+        {style:'span { border-left:1px solid }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'},
+        {style:'span { padding-right:1px }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'},
+        {style:'span { padding-left:1px }', body:'<div id=test><span></span></div><div id=ref>x</div><div id=s_ref>x</div>'},
+        {style:'span { display:inline-block; height:1px }', body:'<div id=test><i><span></span> </i></div><span id=ref></span><div id=s_ref>x</div>'}, /* 16.6.1: "If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed." */
+        {style:'', body:'<div id=test><img src="{png}" border=1></div><img id=ref src="{png}" height=3><div id=s_ref>x</div>'},
+        {style:'#test img { padding:1px }', body:'<div id=test><img src="{png}"></div><img id=ref src="{png}" height=3><div id=s_ref>x</div>'},
+        {style:'iframe { height:1px }', body:'<div id=test><iframe></iframe></div><img id=ref src="{png}" height=5><div id=s_ref>x</div>'},
+        {style:'#test::before { content:"" } #test::before, span { border:solid }', body:'<div id=test></div><div id=ref><span>x</span></div><div id=s_ref><span>x</span></div>'},
+        {style:'div { line-height: 0;} span { margin:0 1px; line-height: normal; }', body:'<div id=test>x<span></span></div><div id=ref>x</div><div id=s_ref>x<span>x</span></div>'},
+        ];
+
+        tests.forEach(function(t) {
+            test(function() {
+                var style = t.style.replace(/\{png\}/g, png);
+                var body = t.body.replace(/\{png\}/g, png);
+                q.style.textContent = style;
+                a.style.textContent = style;
+                s.style.textContent = style;
+                q.document.body.innerHTML = body;
+                a.document.body.innerHTML = body;
+                s.document.body.innerHTML = body;
+
+                assert_equals(q.getComputedStyle(q.test).height,
+                              q.getComputedStyle(q.ref).height,
+                              'quirks mode');
+                assert_equals(a.getComputedStyle(a.test).height,
+                              a.getComputedStyle(a.ref).height,
+                              'almost standards mode');
+                assert_equals(s.getComputedStyle(s.test).height,
+                              s.getComputedStyle(s.s_ref).height,
+                              'standards mode');
+            }, document.title+', '+t.style+t.body);
+        });
+
+        done();
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/line-height-in-list-item.tentative.html b/testing/web-platform/tests/quirks/line-height-in-list-item.tentative.html
new file mode 100644
index 0000000000..be655e51fc
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-in-list-item.tentative.html
@@ -0,0 +1,12 @@
+<!-- quirks mode -->
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-line-height-calculation-quirk">
+<link rel="match" href="reference/green-100px-square-no-red.html">
+<meta name="assert" content="List items force strict line height; see https://github.com/whatwg/quirks/issues/38">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width:100px; height:100px; background:red;">
+  <li style="line-height:50px; color:green; background:green;">
+    <br>
+    <div style="display:inline-block; width:1px; height:1px;"></div>
+  </li>
+</div>
diff --git a/testing/web-platform/tests/quirks/line-height-limited-quirks-mode.html b/testing/web-platform/tests/quirks/line-height-limited-quirks-mode.html
new file mode 100644
index 0000000000..db0c3fa2b4
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-limited-quirks-mode.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://quirks.spec.whatwg.org/#the-line-height-calculation-quirk">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1686326">
+  <link rel="match" href="line-height-ref.html">
+  <meta name="assert" content="The test passes if the blue box has no scrollbar and you see the word PASS">
+<style>
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.wrapper {
+  overflow: auto;
+  border: solid blue;
+}
+</style>
+</head>
+<body>
+  <div class="wrapper">
+    <div style="border:50px solid lightgrey"></div>
+    <span style="margin-top: -100px; display: inline-block">PASS</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/line-height-quirks-mode.html b/testing/web-platform/tests/quirks/line-height-quirks-mode.html
new file mode 100644
index 0000000000..9e9baf6222
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-quirks-mode.html
@@ -0,0 +1,26 @@
+<!-- quirks mode -->
+<html>
+<head>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://quirks.spec.whatwg.org/#the-line-height-calculation-quirk">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1686326">
+  <link rel="match" href="line-height-ref.html">
+  <meta name="assert" content="The test passes if the blue box has no scrollbar and you see the word PASS">
+<style>
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.wrapper {
+  overflow: auto;
+  border: solid blue;
+}
+</style>
+</head>
+<body>
+  <div class="wrapper">
+    <div style="border:50px solid lightgrey"></div>
+    <span style="margin-top: -100px; display: inline-block">PASS</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/line-height-ref.html b/testing/web-platform/tests/quirks/line-height-ref.html
new file mode 100644
index 0000000000..a5c92e732d
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-ref.html
@@ -0,0 +1,22 @@
+<!-- quirks mode -->
+<html>
+<head>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.wrapper {
+  overflow: hidden;
+  border: solid blue;
+}
+</style>
+</head>
+<body>
+  <div class="wrapper">
+    <div style="border:50px solid lightgrey"></div>
+    <span style="margin-top: -100px; display: inline-block">PASS</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace-ref.html b/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace-ref.html
new file mode 100644
index 0000000000..92c3b3c3ca
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace-ref.html
@@ -0,0 +1,4 @@
+<!-- quirks mode -->
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:green;"></div>
diff --git a/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace.html b/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace.html
new file mode 100644
index 0000000000..00a9ca276b
--- /dev/null
+++ b/testing/web-platform/tests/quirks/line-height-trailing-collapsable-whitespace.html
@@ -0,0 +1,12 @@
+<!-- quirks mode -->
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-blocks-ignore-line-height-quirk">
+<link rel="match" href="line-height-trailing-collapsable-whitespace-ref.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="font-size:100px;">
+  <div style="display:inline-block; width:100px; height:50px; background:green;"></div>
+  <!-- Having collapsable whitespace here triggers a bug in Blink.
+       See crbug.com/845902#c2 -->
+  <br>
+  <div style="width:100px; height:50px; background:green;"></div>
+</div>
diff --git a/testing/web-platform/tests/quirks/percentage-height-calculation.html b/testing/web-platform/tests/quirks/percentage-height-calculation.html
new file mode 100644
index 0000000000..a40b8b7d3f
--- /dev/null
+++ b/testing/web-platform/tests/quirks/percentage-height-calculation.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The percentage height calculation quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:200px } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe id=quirks></iframe>
+  <iframe id=almost></iframe>
+  <iframe id=standards></iframe>
+  <img id="preload">
+  <script>
+    var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+    // Ensure png is loaded and cached before we run the tests. Otherwise
+    // the tests that use it may run while it's not fully loaded and get <img>
+    // fallback layout (i.e., not an image with a 1x1 intrinsic size).
+    document.getElementById('preload').src = png;
+    setup({explicit_done:true});
+
+    var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+    var preload = new Image();
+    preload.src = png;
+
+    onload = function() {
+        var html = "<style id=style></style>";
+        var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+        var s_doctype = '<!DOCTYPE HTML>';
+        var q = document.getElementById('quirks').contentWindow;
+        var a = document.getElementById('almost').contentWindow;
+        var s = document.getElementById('standards').contentWindow;
+        q.document.open();
+        q.document.write(html);
+        q.document.close();
+        a.document.open();
+        a.document.write(a_doctype + html);
+        a.document.close();
+        s.document.open();
+        s.document.write(s_doctype + html);
+        s.document.close();
+        [q, a, s].forEach(function(win) {
+            ['style', 'test'].forEach(function(id) {
+                Object.getPrototypeOf(win).__defineGetter__(id, function() { return win.document.getElementById(id); });
+            });
+        });
+
+        var tests = [
+        {style:'#test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'#test { height:50% }', body:'<div id=test></div>', q:92, s:0},
+        {style:'#test { height:25% }', body:'<div id=test></div>', q:46, s:0},
+        {style:'#test { height:12.5% }', body:'<div id=test></div>', q:23, s:0},
+        {style:'#test { height:100% }', body:'<div><div id=test></div></div>', q:184, s:0},
+        {style:'', body:'<img id=test src="{png}" height=100%>', q:184, s:1},
+        {style:'', body:'<img id=test src="{png}" height=100% border=10>', q:184, s:1},
+        {style:'', body:'<table id=test height=100%><tr><td></table>', q:184, s:6},
+        {style:'#foo { height:100px } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0},
+        {style:'#foo { height:100px } #grid { display:grid } #test { height:100% }', body:'<div id=foo><div id=grid><div id=test></div></div></div>', q:0, s:0},
+        {style:'#foo { height:100px } #grid { display:inline-grid } #test { height:100% }', body:'<div id=foo><div id=grid><div id=test></div></div></div>', q:0, s:0},
+        {style:'#foo { height:100px } #flex { display:flex } #test { height:100% }', body:'<div id=foo><div id=flex><div id=test></div></div></div>', q:0, s:0},
+        {style:'#foo { height:100px } #flex { display:inline-flex } #test { height:100% }', body:'<div id=foo><div id=flex><div id=test></div></div></div>', q:0, s:0},
+        {style:'#foo { position:absolute } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0},
+        {style:'#foo { position:relative } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:184, s:0},
+        {style:'#foo { height:100px } #test { height:100%; position:absolute }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200},
+        {style:'#foo { height:100px } #test { height:100%; position:fixed }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200},
+        {style:'#foo { height:100px } #test { height:100%; position:relative }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0},
+        {style:'#foo { height:100px } #test { height:calc(100% + 1px) }', body:'<div id=foo><div id=test></div></div>', q:101, s:101},
+        {style:'#foo { height:100px } #test { height:5px; height:calc(100% + 1px) }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0},
+        {style:'html { display:inline } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, // display:inline on root has no effect
+        {style:'html { margin:10px } body { display:inline } #test { height:100% }', body:'<div id=test></div>', q:180, s:0},
+        {style:'body { margin:0 } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
+        {style:'body { margin:0; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:180, s:0},
+        {style:'body { margin:0; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:180, s:0},
+        {style:'html { margin:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
+        {style:'html { padding:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
+        {style:'html { border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
+        {style:'html { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
+        {style:'body { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
+        {style:'html { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'html { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'html { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'body { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
+        {style:'body { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
+        {style:'body { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
+        {style:'html { position:absolute; height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'html { position:absolute; height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'html { position:absolute; height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'body { margin:99px 0 } #test { height:100% }', body:'<div id=test></div>', q:2, s:0},
+        {style:'body { margin:110px 0 } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
+        {style:'html, body { border:10px none } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        {style:'html, body { border:10px hidden } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
+        ];
+
+        tests.forEach(function(t) {
+            test(function() {
+                // Hide scrollbars in all subdocuments so that a horizontal
+                // scrollbar doesn't appear and upset our calculations.
+                var style = t.style.replace(/\{png\}/g, png) + " html { overflow:hidden; }";
+                var body = t.body.replace(/\{png\}/g, png);
+                q.style.textContent = style;
+                a.style.textContent = style;
+                s.style.textContent = style;
+                q.document.body.innerHTML = body;
+                a.document.body.innerHTML = body;
+                s.document.body.innerHTML = body;
+
+                assert_equals(q.getComputedStyle(q.test).height,
+                              t.q + 'px',
+                              'quirks mode');
+                assert_equals(a.getComputedStyle(a.test).height,
+                              t.s + 'px',
+                              'almost standards mode');
+                assert_equals(s.getComputedStyle(s.test).height,
+                              t.s + 'px',
+                              'standards mode');
+            }, document.title+', '+t.style+t.body);
+        });
+
+        var xml_tests = [
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></html>', q:184, s:0},
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body/><div id="test"/></html>', q:200, s:0},
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><span><body><div id="test"/></body></span></html>', q:200, s:0},
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><body><div id="test"/></body></body></html>', q:200, s:0},
+        {input:'<html><head xmlns="{html}"><style>#test { height:100% }</style></head><body xmlns="{html}"><div id="test"/></body></html>', q:184, s:0},
+        {input:'<div xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></div>', q:184, s:0},
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body xmlns=""><div xmlns="{html}" id="test"/></body></html>', q:200, s:0},
+        {input:'<HTML xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></HTML>', q:184, s:0},
+        {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><BODY><div id="test"/></BODY></html>', q:200, s:0},
+        ];
+
+        var parser = new DOMParser();
+
+        xml_tests.forEach(function(t) {
+            test(function() {
+                var input = t.input.replace(/\{html\}/g, 'http://www.w3.org/1999/xhtml')
+                                   .replace(/\{png\}/g, png);
+                var root = parser.parseFromString(input, 'text/xml').documentElement;
+                q.document.replaceChild(root.cloneNode(true), q.document.documentElement);
+                a.document.replaceChild(root.cloneNode(true), a.document.documentElement);
+                s.document.replaceChild(root, s.document.documentElement);
+                assert_equals(q.getComputedStyle(q.test).height,
+                              t.q + 'px',
+                              'quirks mode');
+                assert_equals(a.getComputedStyle(a.test).height,
+                              t.s + 'px',
+                              'almost standards mode');
+                assert_equals(s.getComputedStyle(s.test).height,
+                              t.s + 'px',
+                              'standards mode');
+            }, document.title+', '+t.input);
+        });
+
+        done();
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-001.html b/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-001.html
new file mode 100644
index 0000000000..cb0f772b1f
--- /dev/null
+++ b/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-001.html
@@ -0,0 +1,78 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test: Percent height quirk does not traverse flex/grid containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" href="https://mozilla.org" title="Mozilla">
+  <link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+  <link rel="match" href="reference/percentage-height-quirk-excludes-flex-grid-001-ref.html">
+  <meta name="assert" content="This quirk is specific to block boxes and table wrapper boxes; if it hits another type of box, it doesn't traverse further. So this file should look the same whether in quirks or standards mode.">
+  <style>
+    .fixed-height-outer {
+      height: 80px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+
+    .row-flex {
+      display: flex;
+      flex-direction: row
+    }
+
+    .column-flex {
+      display: flex;
+      flex-direction: column
+    }
+
+    .grid {
+      display: grid;
+    }
+
+    .container {
+      border: 3px solid black;
+    }
+
+    .pct {
+        height: 75%;
+        min-height: 10px;
+        width: 50px;
+        display: inline-block;
+        vertical-align: top;
+        background: purple;
+    }
+    .px {
+        height: 50px;
+        width: 50px;
+        display: inline-block;
+        vertical-align: top;
+        background: blue
+    }
+  </style>
+</head>
+<body>
+  <div class="fixed-height-outer">
+    <div class="container column-flex">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="container row-flex">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="container grid">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-002.html b/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-002.html
new file mode 100644
index 0000000000..88df89d093
--- /dev/null
+++ b/testing/web-platform/tests/quirks/percentage-height-quirk-excludes-flex-grid-002.html
@@ -0,0 +1,56 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test: Percent height quirk applies for percent heights on flex/grid containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" href="https://mozilla.org" title="Mozilla">
+  <link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+  <link rel="match" href="reference/percentage-height-quirk-excludes-flex-grid-002-ref.html">
+  <meta name="assert" content="This quirk only starts differentiating by box-type when looking at the containing block of the percent-height thing. So, the quirk applies to percent-heights on flex/grid containers, when the ancestors are all blocks up to the nearest definite height.">
+  <style>
+    .fixed-height-outer {
+      height: 80px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+
+    .row-flex {
+      display: flex;
+      flex-direction: row
+    }
+
+    .column-flex {
+      display: flex;
+      flex-direction: column
+    }
+
+    .grid {
+      display: grid;
+    }
+
+    .pct {
+        height: 75%;
+        min-height: 10px;
+        width: 50px;
+        background: purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="column-flex pct"></div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="row-flex pct"></div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="grid pct"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/reference/green-100px-square-no-red.html b/testing/web-platform/tests/quirks/reference/green-100px-square-no-red.html
new file mode 100644
index 0000000000..159d9a52a0
--- /dev/null
+++ b/testing/web-platform/tests/quirks/reference/green-100px-square-no-red.html
@@ -0,0 +1,4 @@
+<!-- quirks mode -->
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width:100px; height:100px; background:green;"></div>
diff --git a/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-001-ref.html b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-001-ref.html
new file mode 100644
index 0000000000..29f8e26a67
--- /dev/null
+++ b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Reference: Percent height quirk does not traverse flex/grid containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" href="https://mozilla.org" title="Mozilla">
+  <style>
+    .fixed-height-outer {
+      height: 80px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+
+    .row-flex {
+      display: flex;
+      flex-direction: row
+    }
+
+    .column-flex {
+      display: flex;
+      flex-direction: column
+    }
+
+    .grid {
+      display: grid;
+    }
+
+    .container {
+      border: 3px solid black;
+    }
+
+    .pct {
+        height: 75%;
+        min-height: 10px;
+        width: 50px;
+        display: inline-block;
+        vertical-align: top;
+        background: purple;
+    }
+    .px {
+        height: 50px;
+        width: 50px;
+        display: inline-block;
+        vertical-align: top;
+        background: blue
+    }
+  </style>
+</head>
+<body>
+  <div class="fixed-height-outer">
+    <div class="container column-flex">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="container row-flex">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="container grid">
+      <div>
+        <div class="pct"></div>
+        <div class="px"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-notref.html b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-notref.html
new file mode 100644
index 0000000000..19aa243a00
--- /dev/null
+++ b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-notref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Not-reference case: Percent height quirk applies for percent heights on flex/grid containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" href="https://mozilla.org" title="Mozilla">
+  <style>
+    .fixed-height-outer {
+      height: 80px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+
+    .row-flex {
+      display: flex;
+      flex-direction: row
+    }
+
+    .column-flex {
+      display: flex;
+      flex-direction: column
+    }
+
+    .grid {
+      display: grid;
+    }
+
+    .pct {
+        height: 75%;
+        min-height: 10px;
+        width: 50px;
+        background: purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="column-flex pct"></div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="row-flex pct"></div>
+    </div>
+  </div>
+  <div class="fixed-height-outer">
+    <div>
+      <div class="grid pct"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-ref.html b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-ref.html
new file mode 100644
index 0000000000..c63bc0efa8
--- /dev/null
+++ b/testing/web-platform/tests/quirks/reference/percentage-height-quirk-excludes-flex-grid-002-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Reference case: Percent height quirk applies for percent heights on flex/grid containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" href="https://mozilla.org" title="Mozilla">
+  <link rel="mismatch" href="percentage-height-quirk-excludes-flex-grid-002-notref.html">
+  <style>
+    .fixed-height-outer {
+      height: 80px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+
+    .row-flex {
+      display: flex;
+      flex-direction: row
+    }
+
+    .column-flex {
+      display: flex;
+      flex-direction: column
+    }
+
+    .grid {
+      display: grid;
+    }
+
+    .pct {
+        height: 75%;
+        min-height: 10px;
+        width: 50px;
+        background: purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="fixed-height-outer">
+    <div class="column-flex pct"></div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="row-flex pct"></div>
+  </div>
+  <div class="fixed-height-outer">
+    <div class="grid pct"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/reference/table-cell-width-calculation-abspos-ref.html b/testing/web-platform/tests/quirks/reference/table-cell-width-calculation-abspos-ref.html
new file mode 100644
index 0000000000..41d2203b4a
--- /dev/null
+++ b/testing/web-platform/tests/quirks/reference/table-cell-width-calculation-abspos-ref.html
@@ -0,0 +1,18 @@
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+table {
+  font-size: 10px;
+  font-family: Ahem;
+}
+img {
+  vertical-align: bottom;
+  width: 10px;
+  height: 10px;
+  background: black;
+}
+</style>
+<table>
+  <tr>
+    <td id="td">1234567<img id="img" src=""></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/quirks/support/test-ref-iframe.js b/testing/web-platform/tests/quirks/support/test-ref-iframe.js
new file mode 100644
index 0000000000..e5df41d424
--- /dev/null
+++ b/testing/web-platform/tests/quirks/support/test-ref-iframe.js
@@ -0,0 +1,17 @@
+function setupIframe() {
+  var iframe = document.querySelector('iframe');
+  var html = "<style id=style></style><div id=test></div><div id=ref></div><svg><circle id=svg /><circle id=svg_ref /></svg>";
+  if (iframe.className === "limited-quirks") {
+    html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">' + html;
+  } else if (iframe.className === "no-quirks") {
+    html = '<!DOCTYPE HTML>' + html;
+  }
+  window.quirks = iframe.className === "quirks";
+  window.win = iframe.contentWindow;
+  win.document.open();
+  win.document.write(html);
+  win.document.close();
+  ['style', 'test', 'ref', 'svg', 'svg_ref'].forEach(function(id) {
+      win[id] = win.document.getElementById(id);
+  });
+}
diff --git a/testing/web-platform/tests/quirks/supports.html b/testing/web-platform/tests/quirks/supports.html
new file mode 100644
index 0000000000..913f7d9f73
--- /dev/null
+++ b/testing/web-platform/tests/quirks/supports.html
@@ -0,0 +1,48 @@
+<!--quirks-->
+<title>Syntax quirks in @supports/CSS.supports</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel=help href=https://drafts.csswg.org/css-conditional/#at-supports>
+<link rel=help href=https://drafts.csswg.org/css-conditional/#the-css-interface>
+<link rel=help href=https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk>
+<link rel=help href=https://quirks.spec.whatwg.org/#the-unitless-length-quirk>
+<style>
+ /* sanity check */
+ @supports (background-color: lime) { #a { background-color: lime } }
+ @supports (background-position: 1px 1px) { #a { background-position: 1px 1px } }
+ /* test */
+ @supports (background-color: 00ff00) { #b { background-color: 00ff00 } }
+ @supports (background-position: 1 1) { #b { background-position: 1 1 } }
+</style>
+<div id=a></div>
+<div id=b></div>
+<div id=c></div> <!-- c unstyled -->
+<script>
+var a = document.getElementById('a');
+var b = document.getElementById('b');
+var c = document.getElementById('c');
+
+test(function() {
+  assert_not_equals(getComputedStyle(a).backgroundColor, getComputedStyle(c).backgroundColor);
+}, 'Sanity check @supports color');
+
+test(function() {
+  assert_equals(getComputedStyle(b).backgroundColor, getComputedStyle(a).backgroundColor);
+}, '@supports quirky color');
+
+test(function() {
+  assert_false(CSS.supports('background-color', '00ff00'));
+}, 'CSS.supports() quirky color');
+
+test(function() {
+  assert_not_equals(getComputedStyle(a).backgroundPosition, getComputedStyle(c).backgroundPosition);
+}, 'Sanity check @supports length');
+
+test(function() {
+  assert_equals(getComputedStyle(b).backgroundPosition, getComputedStyle(a).backgroundPosition);
+}, '@supports quirky length');
+
+test(function() {
+  assert_false(CSS.supports('background-position', '1 1'));
+}, 'CSS.supports() quirky length');
+</script>
diff --git a/testing/web-platform/tests/quirks/table-cell-nowrap-minimum-width-calculation.html b/testing/web-platform/tests/quirks/table-cell-nowrap-minimum-width-calculation.html
new file mode 100644
index 0000000000..25590c64a3
--- /dev/null
+++ b/testing/web-platform/tests/quirks/table-cell-nowrap-minimum-width-calculation.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The table cell nowrap minimum width calculation quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:200px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe id=quirks></iframe>
+  <iframe id=almost></iframe>
+  <iframe id=standards></iframe>
+  <script>
+    setup({explicit_done:true});
+
+    var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+    var preload = new Image();
+    preload.src = png;
+
+    onload = function() {
+        var html = "<style id=style></style>";
+        var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+        var s_doctype = '<!DOCTYPE HTML>';
+        var q = document.getElementById('quirks').contentWindow;
+        var a = document.getElementById('almost').contentWindow;
+        var s = document.getElementById('standards').contentWindow;
+        q.document.open();
+        q.document.write(html);
+        q.document.close();
+        a.document.open();
+        a.document.write(a_doctype + html);
+        a.document.close();
+        s.document.open();
+        s.document.write(s_doctype + html);
+        s.document.close();
+        [q, a, s].forEach(function(win) {
+            ['style', 'test', 'ref', 's_ref'].forEach(function(id) {
+                Object.getPrototypeOf(win).__defineGetter__(id, function() { return win.document.getElementById(id); });
+            });
+        });
+        q.title = 'quirks mode';
+        a.title = 'almost standards mode';
+        s.title = 'standards mode';
+
+        var tests = [
+        {desc:"basic",
+        style:'table { width:8px } #test { width:10px }',
+        body:'<table><tr><td id=test nowrap></table>'+
+        '<table><tr><td id=ref><img src="{png}" width=10></table>'+
+        '<table><tr><td id=s_ref></table>'},
+        ];
+
+        tests.forEach(function(t) {
+            test(function() {
+                var style = t.style.replace(/\{png\}/g, png);
+                var body = t.body.replace(/\{png\}/g, png);
+                [q, a, s].forEach(function(win) {
+                    win.style.textContent = style;
+                    win.document.body.innerHTML = body;
+                    assert_equals(win.getComputedStyle(win.test).width,
+                                  win.getComputedStyle(win == q ? win.ref : win.s_ref).width,
+                                  win.title);
+                });
+            }, document.title+', '+t.desc);
+        });
+
+        done();
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/table-cell-width-calculation-abspos.html b/testing/web-platform/tests/quirks/table-cell-width-calculation-abspos.html
new file mode 100644
index 0000000000..4b9cb21387
--- /dev/null
+++ b/testing/web-platform/tests/quirks/table-cell-width-calculation-abspos.html
@@ -0,0 +1,21 @@
+<title>An out-of-flow imagef in the table cell width calculation quirk</title>
+<link rel="match" href="reference/table-cell-width-calculation-abspos-ref.html">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+table {
+  font-size: 10px;
+  font-family: Ahem;
+}
+img {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: black;
+}
+</style>
+<table>
+  <tr>
+    <td id="td">1234567<img id="img" src=""></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/quirks/table-cell-width-calculation-applies-to.html b/testing/web-platform/tests/quirks/table-cell-width-calculation-applies-to.html
new file mode 100644
index 0000000000..d7cd7fd16c
--- /dev/null
+++ b/testing/web-platform/tests/quirks/table-cell-width-calculation-applies-to.html
@@ -0,0 +1,18 @@
+<title>The table cell width calculation quirk should not apply to inline blocks</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+inline-block {
+  display: inline-block;
+}
+</style>
+<body>
+  <table style="width:80px" data-expected-width=80>
+    <tr>
+      <td><inline-block style="width:50px">50</inline-block><inline-block style="width:50px">50</inline-block></td>
+    </tr>
+  </table>
+<script>checkLayout('table');</script>
+</body>
diff --git a/testing/web-platform/tests/quirks/table-cell-width-calculation.html b/testing/web-platform/tests/quirks/table-cell-width-calculation.html
new file mode 100644
index 0000000000..7d76a9194b
--- /dev/null
+++ b/testing/web-platform/tests/quirks/table-cell-width-calculation.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The table cell width calculation quirk</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:200px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe id=quirks></iframe>
+  <iframe id=almost></iframe>
+  <iframe id=standards></iframe>
+  <script>
+    setup({explicit_done:true});
+
+    var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+    var preload = new Image();
+    preload.src = png;
+
+    onload = function() {
+        var html = "<style id=style></style><table><tr><td id=test></table><table><tr><td id=ref></table><table><tr><td id=s_ref></table>";
+        var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
+        var s_doctype = '<!DOCTYPE HTML>';
+        var q = document.getElementById('quirks').contentWindow;
+        var a = document.getElementById('almost').contentWindow;
+        var s = document.getElementById('standards').contentWindow;
+        q.document.open();
+        q.document.write(html);
+        q.document.close();
+        a.document.open();
+        a.document.write(a_doctype + html);
+        a.document.close();
+        s.document.open();
+        s.document.write(s_doctype + html);
+        s.document.close();
+        [q, a, s].forEach(function(win) {
+            ['style', 'test', 'ref', 's_ref'].forEach(function(id) {
+                Object.getPrototypeOf(win).__defineGetter__(id, function() { return win.document.getElementById(id); });
+            });
+        });
+        q.title = 'quirks mode';
+        a.title = 'almost standards mode';
+        s.title = 'standards mode';
+
+        var tests = [
+        {desc:"baseline",
+        style:'table { width:8px }', // cell content width should be 2px (2px cell-spacing, 1px padding)
+        test:'<img src="{png}">',
+        ref:'<img src="{png}">',
+        s_ref:'<img src="{png}">'},
+
+        {desc:"basic",
+        style:'table { width:8px }',
+        test:'<img src="{png}"><img src="{png}"><img src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"inline-block",
+        style:'table { width:8px } img { display:inline-block }',
+        test:'<img src="{png}"><img src="{png}"><img src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"img in span",
+        style:'table { width:8px }',
+        test:'<span><img src="{png}"><img src="{png}"><img src="{png}"></span>',
+        ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"the don't-wrap rule is only for the purpose of calculating the width of the cell",
+        style:'table { width:8px }',
+        test:'<img src="{png}"><wbr><img src="{png}"><img src="{png}"><img src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>'},
+
+        {desc:"the quirk only applies when the cell is the containing block",
+        style:'table { width:8px }',
+        test:'<div><img src="{png}"><img src="{png}"><img src="{png}"></div>',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr>'},
+
+        {desc:"the quirk shouldn't apply for generated content",
+        style:'table { width:8px } #test::before { content:url("{png}") url("{png}") url("{png}") }',
+        test:'',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"the quirk shouldn't apply for <input>",
+        style:'table { width:8px }',
+        test:'<input type=image src="{png}"><input type=image src="{png}"><input type=image src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"the quirk shouldn't apply for <object>",
+        style:'table { width:8px }',
+        test:'<object data="{png}"></object><object data="{png}"></object><object data="{png}"></object>',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"the quirk shouldn't apply for <embed>",
+        style:'table { width:8px }',
+        test:'<embed src="{png}"><embed src="{png}"><embed src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"the quirk shouldn't apply for <video poster>",
+        style:'table { width:8px }',
+        test:'<video poster="{png}"></video><video poster="{png}"></video><video poster="{png}"></video>',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"non-auto width on cell",
+        style:'td { width:2px }',
+        test:'<img src="{png}"><img src="{png}"><img src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        {desc:"zero width on cell, specified with on table",
+        style:'table { width:8px } td { width:0 }',
+        test:'<img src="{png}"><img src="{png}"><img src="{png}">',
+        ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>',
+        s_ref:'<nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr>'},
+
+        // tests below use overwrite body.innerHTML so tests using test/ref/s_ref props need to be above
+        {desc:"display:table-cell on span",
+        style:'div { display:table; width:2px } span { display:table-cell }',
+        body:'<div><span id=test><img src="{png}"><img src="{png}"><img src="{png}"></span></div>'+
+        '<div><span id=ref><nobr><img src="{png}"><img src="{png}"><img src="{png}"></nobr></span></div>'+
+        '<div><span id=s_ref><nobr><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr></span></div>'},
+
+        {desc:"display:table-cell on span, wbr",
+        style:'div { display:table; width:2px } span { display:table-cell }',
+        body:'<div><span id=test><img src="{png}"><wbr><img src="{png}"><img src="{png}"><img src="{png}"></span></div>'+
+        '<div><span id=ref><nobr><img src="{png}"><img src="{png}"><img src="{png}"><br><img src="{png}"></nobr></span></div>'+
+        '<div><span id=s_ref><nobr><img src="{png}"><img src="{png}"><br><img src="{png}"><img src="{png}"></nobr></span></div>'},
+        ];
+
+        tests.forEach(function(t) {
+            test(function() {
+                var style = t.style.replace(/\{png\}/g, png);
+                var test = t.test && t.test.replace(/\{png\}/g, png);
+                var ref = t.ref && t.ref.replace(/\{png\}/g, png);
+                var s_ref = t.s_ref && t.s_ref.replace(/\{png\}/g, png);
+                var body = t.body && t.body.replace(/\{png\}/g, png);
+                [q, a, s].forEach(function(win) {
+                    win.style.textContent = style;
+                    if (body !== undefined) {
+                        win.document.body.innerHTML = body;
+                    } else {
+                        win.test.innerHTML = test;
+                        win.ref.innerHTML = ref;
+                        win.s_ref.innerHTML = s_ref;
+                    }
+                    assert_equals(win.getComputedStyle(win.test).width,
+                                  win.getComputedStyle(win == q ? win.ref : win.s_ref).width,
+                                  'cell width, '+win.title);
+                    var test_imgs = win.test.querySelectorAll('img');
+                    var ref_imgs = win.ref.querySelectorAll('img');
+                    var s_ref_imgs = win.s_ref.querySelectorAll('img');
+                    for (var i = 0; i < test_imgs.length; ++i) {
+                        assert_equals(test_imgs[i].offsetLeft,
+                                      win == q ? ref_imgs[i].offsetLeft : s_ref_imgs[i].offsetLeft,
+                                      'img '+i+' offsetLeft, '+win.title);
+                    }
+                });
+            }, document.title+', '+t.desc);
+        });
+
+        done();
+    }
+  </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/table-replaced-descendant-percentage-height-crash.html b/testing/web-platform/tests/quirks/table-replaced-descendant-percentage-height-crash.html
new file mode 100644
index 0000000000..385d6caf20
--- /dev/null
+++ b/testing/web-platform/tests/quirks/table-replaced-descendant-percentage-height-crash.html
@@ -0,0 +1,14 @@
+<!-- quirks mode -->
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://github.com/whatwg/quirks/issues/46">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=967069">
+<div style="display:table-cell; height:10000px;">
+  <div style="writing-mode:vertical-rl;">
+    <iframe style="height:100%;"></iframe>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  test(()=> { }, "No crash");
+</script>
diff --git a/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks-ref.html b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks-ref.html
new file mode 100644
index 0000000000..a72475f40c
--- /dev/null
+++ b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks-ref.html
@@ -0,0 +1,13 @@
+<title>text decoration doesn't propagate into tables quirks mode ref</title>
+<style>
+.inline-table { display: inline-table }
+.inline, .inline * { display: inline }
+.table { display: table }
+.tbody { display: table-row-group }
+.tr { display: table-row }
+.td { display: table-cell }
+</style>
+<div><table><tr><td>this should not be underlined</table></div>
+<div><table class=inline-table><tr><td>this should not be underlined</table></div>
+<div><table class=inline><tr><td>this should not be underlined</table></div>
+<div><span class=table><span class=tbody><span class=tr><span class=td><u>this should be underlined</u></span></span></span></span></div>
diff --git a/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks.html b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks.html
new file mode 100644
index 0000000000..669c886821
--- /dev/null
+++ b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/quirks.html
@@ -0,0 +1,14 @@
+<title>text decoration doesn't propagate into tables quirk</title>
+<link rel=match href=quirks-ref.html>
+<style>
+.inline-table { display: inline-table }
+.inline, .inline * { display: inline }
+.table { display: table }
+.tbody { display: table-row-group }
+.tr { display: table-row }
+.td { display: table-cell }
+</style>
+<div><u><table><tr><td>this should not be underlined</table></u></div>
+<div><u><table class=inline-table><tr><td>this should not be underlined</table></u></div>
+<div><u><table class=inline><tr><td>this should not be underlined</table></u></div>
+<div><u><span class=table><span class=tbody><span class=tr><span class=td>this should be underlined</span></span></span></span></u></div>
diff --git a/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards-ref.html b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards-ref.html
new file mode 100644
index 0000000000..188e00ba94
--- /dev/null
+++ b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>text decoration doesn't propagate into tables standards mode ref</title>
+<style>
+.inline-table { display: inline-table }
+.inline, .inline * { display: inline }
+.table { display: table }
+.tbody { display: table-row-group }
+.tr { display: table-row }
+.td { display: table-cell }
+tbody { vertical-align: initial; }
+</style>
+<div><table><tr><td><u>this should be underlined</u></table></div>
+<div><table class=inline-table><tr><td>this should not be underlined</table></div>
+<div><table class=inline><tr><td><u>this should be underlined</u></table></div>
+<div><span class=table><span class=tbody><span class=tr><span class=td><u>this should be underlined</u></span></span></span></span></div>
diff --git a/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards.html b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards.html
new file mode 100644
index 0000000000..62d4859696
--- /dev/null
+++ b/testing/web-platform/tests/quirks/text-decoration-doesnt-propagate-into-tables/standards.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>text decoration doesn't propagate into tables standards mode</title>
+<link rel=match href=standards-ref.html>
+<style>
+.inline-table { display: inline-table }
+.inline, .inline * { display: inline }
+.table { display: table }
+.tbody { display: table-row-group }
+.tr { display: table-row }
+.td { display: table-cell }
+tbody { vertical-align: initial; }
+</style>
+<div><u><table><tr><td>this should be underlined</table></u></div>
+<div><u><table class=inline-table><tr><td>this should not be underlined</table></u></div>
+<div><u><table class=inline><tr><td>this should be underlined</table></u></div>
+<div><u><span class=table><span class=tbody><span class=tr><span class=td>this should be underlined</span></span></span></span></u></div>
diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html
new file mode 100644
index 0000000000..09fedcf601
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-001.html
@@ -0,0 +1,85 @@
+<html>
+<head>
+<meta charset="utf-8">
+<title>Many properties do not support quirky-length</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk">
+<meta name="assert" content="quirky-length is not supported by properties not listed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+var properties = [
+    'background-position-x',
+    'background-position-y',
+    'block-size',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'column-gap',
+    'column-rule-width',
+    'column-width',
+    'flex-basis',
+    'grid-auto-columns',
+    'grid-auto-rows',
+    'grid-template-columns',
+    'grid-template-rows',
+    'inline-size',
+    'inset',
+    'inset-block',
+    'inset-block-end',
+    'inset-block-start',
+    'inset-inline',
+    'inset-inline-end',
+    'inset-inline-start',
+    'margin-block-end',
+    'margin-block-start',
+    'margin-inline-end',
+    'margin-inline-start',
+    'min-block-size',
+    'min-inline-size',
+    'offset-distance',
+    'outline-offset',
+    'outline-width',
+    'padding-block-end',
+    'padding-block-start',
+    'padding-inline-end',
+    'padding-inline-start',
+    'perspective',
+    'row-gap',
+    'scroll-margin-block-end',
+    'scroll-margin-block-start',
+    'scroll-margin-bottom',
+    'scroll-margin-inline-end',
+    'scroll-margin-inline-start',
+    'scroll-margin-left',
+    'scroll-margin-right',
+    'scroll-margin-top',
+    'scroll-padding-block-end',
+    'scroll-padding-block-start',
+    'scroll-padding-bottom',
+    'scroll-padding-inline-end',
+    'scroll-padding-inline-start',
+    'scroll-padding-left',
+    'scroll-padding-right',
+    'scroll-padding-top',
+    'shape-margin'
+];
+
+for (let property of properties) {
+  test(() => {
+    if (!getComputedStyle(target)[property])
+      return;
+    target.style[property] = '567px';
+    target.style[property] = '1234';
+    assert_equals(target.style[property], '567px');
+  }, 'Property ' + property + ' does not support quirky length');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html
new file mode 100644
index 0000000000..b8b3b2e5c5
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-002.html
@@ -0,0 +1,43 @@
+<html>
+<head>
+<meta charset="utf-8">
+<title>Many properties do not support quirky-length</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk">
+<meta name="assert" content="quirky-length is not supported by properties not listed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+var properties = [
+    'background-blend-mode',
+    'background-size',
+    'box-shadow',
+    'clip-path',
+    'column-span',
+    'filter',
+    'mask',
+    'object-position',
+    'perspective-origin',
+    'text-shadow',
+    'transform-origin'
+];
+
+for (let property of properties) {
+  test(() => {
+    if (!getComputedStyle(target)[property]) {
+      assert_unreached('Property ' + property + ' not supported');
+    }
+    target.style[property] = '1234';
+    assert_not_equals(target.style[property], '1234');
+    assert_not_equals(target.style[property], '1234px');
+    assert_not_equals(target.style[property], '1234px auto');
+  }, 'Property ' + property + ' does not support quirky length');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html
new file mode 100644
index 0000000000..4cbe012a55
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/excluded-properties-003.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+<meta charset="utf-8">
+<title>inset does not support quirky-length</title>
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-unitless-length-quirk">
+<meta name="assert" content="quirky-length is not supported by inset.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+test(() => {
+  const quirky_values = [
+    '1',
+    '1 2px',
+    '1px 2',
+    '1 2',
+    '1 2px 3px',
+    '1px 2 3px',
+    '1px 2px 3',
+    '1 2 3',
+    '1 2px 3px 4px',
+    '1px 2 3px 4px',
+    '1px 2px 3 4px',
+    '1px 2px 3px 4',
+    '1 2 3 4'
+  ];
+
+  target.style['inset'] = '5px 6px 7px 8px';
+
+  for (let value of quirky_values) {
+    target.style['inset'] = value;
+    assert_equals(target.style['inset'], '5px 6px 7px 8px', 'inset rejects quirky length "' + value + '"');
+  }
+}, 'inset does not support quirky length values');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html b/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html
new file mode 100644
index 0000000000..fab0b3b805
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/limited-quirks.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The unitless length quirk (limited-quirks)</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=limited-quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/no-quirks.html b/testing/web-platform/tests/quirks/unitless-length/no-quirks.html
new file mode 100644
index 0000000000..82036f9a61
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/no-quirks.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The unitless length quirk (no-quirks)</title>
+  <meta name="timeout" content="long">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=no-quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/quirks.html b/testing/web-platform/tests/quirks/unitless-length/quirks.html
new file mode 100644
index 0000000000..80bda7a392
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/quirks.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+ <head>
+  <title>The unitless length quirk (quirks)</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style> iframe { width:20px; height:20px; } </style>
+ </head>
+ <body>
+  <div id=log></div>
+  <iframe class=quirks></iframe>
+  <script src=../support/test-ref-iframe.js></script>
+  <script src=support/common.js></script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/quirks/unitless-length/support/common.js b/testing/web-platform/tests/quirks/unitless-length/support/common.js
new file mode 100644
index 0000000000..f2f7eab4e3
--- /dev/null
+++ b/testing/web-platform/tests/quirks/unitless-length/support/common.js
@@ -0,0 +1,152 @@
+setup({explicit_done:true});
+onload = function() {
+    setupIframe();
+
+    var tests = [
+    {input:"1", q:"1px"},
+    {input:"+1", q:"1px"},
+    {input:"-1", q:"-1px"},
+    {input:"1.5", q:"1.5px"},
+    {input:"+1.5", q:"1.5px"},
+    {input:"-1.5", q:"-1.5px"},
+    {input:"\\31 "},
+    {input:"+\\31 "},
+    {input:"-\\31 "},
+    {input:"\\31 .5"},
+    {input:"+\\31 .5"},
+    {input:"-\\31 .5"},
+    {input:"1\\31 "},
+    {input:"+1\\31 "},
+    {input:"-1\\31 "},
+    {input:"1\\31 .5"},
+    {input:"+1\\31 .5"},
+    {input:"-1\\31 .5"},
+    {input:"a"},
+    {input:"A"},
+    {input:"1a"},
+    {input:"+1a"},
+    {input:"-1a"},
+    {input:"+1A"},
+    {input:"-1A"},
+    {input:"+a"},
+    {input:"-a"},
+    {input:"+A"},
+    {input:"-A"},
+    {input:"@a"},
+    {input:"@1"},
+    {input:"@1a"},
+    {input:'"a"'},
+    {input:'"1"'},
+    {input:'"1a"'},
+    {input:"url(1)"},
+    {input:"url('1')"},
+    {input:"#1"},
+    {input:"#01"},
+    {input:"#001"},
+    {input:"#0001"},
+    {input:"#00001"},
+    {input:"#000001"},
+    {input:"+/**/1"},
+    {input:"-/**/1"},
+    {input:"calc(1)"},
+    {input:"calc(2 * 2px)", q:"4px", s:"4px"},
+    {input:"1px 2", q:"1px 2px", shorthand:true},
+    {input:"1 2px", q:"1px 2px", shorthand:true},
+    {input:"1px calc(2)", shorthand:true},
+    {input:"calc(1) 2px", shorthand:true},
+    {input:"1 +2", q:"1px 2px", shorthand:true},
+    {input:"1 -2", q:"1px -2px", shorthand:true},
+    ];
+
+    var props = [
+    {prop:'background-position', check:'background-position', check_also:[]},
+    {prop:'border-spacing', check:'border-spacing', check_also:[]},
+    {prop:'border-top-width', check:'border-top-width'},
+    {prop:'border-right-width', check:'border-right-width'},
+    {prop:'border-bottom-width', check:'border-bottom-width'},
+    {prop:'border-left-width', check:'border-left-width'},
+    {prop:'border-width', check:'border-top-width', check_also:['border-right-width', 'border-bottom-width', 'border-left-width']},
+    {prop:'bottom', check:'bottom'},
+    {prop:'clip', check:'clip'},
+    {prop:'font-size', check:'font-size'},
+    {prop:'height', check:'height'},
+    {prop:'left', check:'left'},
+    {prop:'letter-spacing', check:'letter-spacing'},
+    {prop:'margin-right', check:'margin-right'},
+    {prop:'margin-left', check:'margin-left'},
+    {prop:'margin-top', check:'margin-top'},
+    {prop:'margin-bottom', check:'margin-bottom'},
+    {prop:'margin', check:'margin-top', check_also:['margin-right', 'margin-bottom', 'margin-left']},
+    {prop:'max-height', check:'max-height'},
+    {prop:'max-width', check:'max-width'},
+    {prop:'min-height', check:'min-height'},
+    {prop:'min-width', check:'min-width'},
+    {prop:'padding-top', check:'padding-top'},
+    {prop:'padding-right', check:'padding-right'},
+    {prop:'padding-bottom', check:'padding-bottom'},
+    {prop:'padding-left', check:'padding-left'},
+    {prop:'padding', check:'padding-top', check_also:['padding-right', 'padding-bottom', 'padding-left']},
+    {prop:'right', check:'right'},
+    {prop:'text-indent', check:'text-indent'},
+    {prop:'top', check:'top'},
+    {prop:'vertical-align', check:'vertical-align'},
+    {prop:'width', check:'width'},
+    {prop:'word-spacing', check:'word-spacing'},
+    ];
+    var style_template = '#test{border-style:solid;position:relative;{prop}:{test};}' +
+                         '#ref{border-style:solid;position:relative;{prop}:{ref};}';
+
+    tests.forEach(function(t) {
+        for (var i in props) {
+            if (t.shorthand && !(props[i].check_also)) {
+                continue;
+            }
+            test(function() {
+                win.style.textContent = style_template.replace('{test}', t.input)
+                            .replace('{ref}', quirks ? t.q : t.s).replace(/\{prop\}/g, props[i].prop)
+                            .replace(/clip:[^;]+/g, function(match) {
+                                return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')';
+                            });
+                assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check),
+                              win.getComputedStyle(win.ref).getPropertyValue(props[i].check),
+                              props[i].prop);
+                if (t.shorthand && props[i].check_also) {
+                    for (var j in props[i].check_also) {
+                        assert_equals(win.getComputedStyle(win.test).getPropertyValue(props[i].check_also[j]),
+                                      win.getComputedStyle(win.ref).getPropertyValue(props[i].check_also[j]),
+                                      props[i].prop + ', checking ' + props[i].check_also[j]);
+                    }
+                }
+            }, props[i].prop + ": " + t.input);
+
+        }
+    });
+
+    if (quirks) {
+        var other_tests = [
+        {input:'background:1 1', prop:'background-position'},
+        {input:'border-top:red solid 1', prop:'border-top-width'},
+        {input:'border-right:red solid 1', prop:'border-right-width'},
+        {input:'border-bottom:red solid 1', prop:'border-bottom-width'},
+        {input:'border-left:red solid 1', prop:'border-left-width'},
+        {input:'border:red solid 1', prop:'border-top-width'},
+        {input:'font:normal normal normal 40 sans-serif', prop:'font-size'},
+        {input:'outline:red solid 1', prop:'outline-width'},
+        {input:'outline-width:1', prop:'outline-width'},
+        ];
+
+        var other_template = "#test{position:relative;outline-style:solid;{test}}" +
+                             "#ref{outline-style:solid}";
+
+        other_tests.forEach(function(t) {
+            test(function() {
+                win.style.textContent = other_template.replace('{test}', t.input);
+                assert_equals(win.getComputedStyle(win.test).getPropertyValue(t.prop),
+                              win.getComputedStyle(win.ref).getPropertyValue(t.prop),
+                              'quirk was supported');
+            }, 'Excluded property '+t.input);
+        });
+    }
+
+    done();
+}
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/quirks
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip