Bug 1322780 - Part 5: Adjust reftests to be fitted into 600x600. r=dholbert
authorBoris Chiou <boris.chiou@gmail.com>
Thu, 20 Dec 2018 07:00:15 +0000
changeset 451506 28ed7729ca2dddba4fc64949d8a145faee815c70
parent 451505 ebd7cddb27181ee6a102d013321d542e18693f6d
child 451507 7b16ce0e3114753c387f3c4efad1657e65d736bf
push id75072
push userboris.chiou@gmail.com
push dateThu, 20 Dec 2018 09:46:47 +0000
treeherderautoland@28ed7729ca2d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1322780, 13563
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1322780 - Part 5: Adjust reftests to be fitted into 600x600. r=dholbert If the size is larger than 600x600, we cannot test all the rendering results, and it seems there is a bug related the inactive windows, https://github.com/web-platform-tests/wpt/issues/13563, which may causes that the scroll bar has different color. Differential Revision: https://phabricator.services.mozilla.com/D15055
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1-ref.html
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1a.html
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1b.html
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1-ref.html
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1a.html
layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1b.html
layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1-ref.html
@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html>
   <title>CSS Reference Case: Basic cases with max-content and min-content</title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <meta name="flags" content="ahem">
   <style>
+    html,body {
+      margin: 0;
+    }
     .container {
       width: max-content;
       height: 50px;
       border: 1px solid black;
 
       font-family: Ahem;
       font-size: 15px;
       line-height: 21px;
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1a.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1a.html
@@ -5,16 +5,19 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="block-size-with-min-or-max-content-1-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
     .container {
       width: max-content;
       height: 50px;
       border: 1px solid black;
 
       font-family: Ahem;
       font-size: 15px;
       line-height: 21px;
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1b.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-1b.html
@@ -5,16 +5,19 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="block-size-with-min-or-max-content-1-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
     .container {
       inline-size: max-content;
       height: 50px;
       border: 1px solid black;
 
       font-family: Ahem;
       font-size: 15px;
       line-height: 21px;
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1-ref.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
   <title>CSS Reference Case: Block size with max-content and min-content in a table</title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <style>
+    html,body {
+      margin: 0;
+    }
     table {
       border: 2px solid black;
     }
 
     td {
       border: 2px solid lime;
     }
 
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1a.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1a.html
@@ -3,16 +3,20 @@
 <head>
   <title>CSS Test: Basic cases of width/height (block axis) with max-content and min-content in a table</title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     table {
       border: 2px solid black;
     }
 
     td {
       border: 2px solid lime;
     }
 
--- a/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1b.html
+++ b/layout/reftests/w3c-css/submitted/sizing/block-size-with-min-or-max-content-table-1b.html
@@ -3,16 +3,20 @@
 <head>
   <title>CSS Test: Basic cases of block-size with max-content and min-content in a table</title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     table {
       border: 2px solid black;
     }
 
     td {
       border: 2px solid lime;
     }
 
--- a/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
@@ -4,68 +4,75 @@
   <title>
     CSS Referece Case: Different values of block sizing properties in horizontal wm
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <meta name="flags" content="ahem">
   <style>
+    html, body {
+      margin: 0;
+    }
+
     .container {
       width: 120px;
       height: 200px;
       border: 2px solid blue;
-      padding: 5px;
       display: inline-block;
       vertical-align: top;
     }
 
     .container > * {
       border: 2px solid lime;
       padding: inherit;
       display: inline-block;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 10px;
+      line-height: 15px;
     }
 
     .too-small {
       height: 10px;
     }
 
     .too-big {
-      height: 150px;
+      height: 120px;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div>height: min-content<br>on this box.</div>
-    <div>height: max-content<br>on this box.</div>
-  </div>
+  <div>
+    <div class="container">
+      <div>height: min-content<br>on this box.</div>
+      <div>height: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small">min-height: min-content<br>on this box.</div>
-    <div class="too-small">min-height: max-content<br>on this box.</div>
+    <div class="container">
+      <div class="too-small">min-height: min-content<br>on this box.</div>
+      <div class="too-small">min-height: max-content<br>on this box.</div>
+    </div>
+
+    <div class="container">
+      <div class="too-big">max-height: min-content<br>on this box.</div>
+      <div class="too-big">max-height: max-content<br>on this box.</div>
+    </div>
   </div>
 
-  <div class="container">
-    <div class="too-big">max-height: min-content<br>on this box.</div>
-    <div class="too-big">max-height: max-content<br>on this box.</div>
-  </div>
+  <div>
+    <div class="container">
+      <div>block: min-content<br>on this box.</div>
+      <div>block: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div>block: min-content<br>on this box.</div>
-    <div>block: max-content<br>on this box.</div>
-  </div>
+    <div class="container">
+      <div class="too-small">min-block: min-content<br>on this box.</div>
+      <div class="too-small">min-block: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small">min-block: min-content<br>on this box.</div>
-    <div class="too-small">min-block: max-content<br>on this box.</div>
-  </div>
-
-  <div class="container">
-    <div class="too-big">max-block: min-content<br>on this box.</div>
-    <div class="too-big">max-block: max-content<br>on this box.</div>
+    <div class="container">
+      <div class="too-big">max-block: min-content<br>on this box.</div>
+      <div class="too-big">max-block: max-content<br>on this box.</div>
+    </div>
   </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
+++ b/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
@@ -7,84 +7,90 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html, body {
+      margin: 0;
+    }
+
     .container {
       width: 120px;
       height: 200px;
       border: 2px solid blue;
-      padding: 5px;
       display: inline-block;
       vertical-align: top;
     }
 
     .container > * {
       border: 2px solid lime;
-      padding: 5px;
       display: inline-block;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 10px;
+      line-height: 15px;
     }
 
     .too-small {
       height: 10px;
     }
 
     .too-big {
-      height: 150px;
+      height: 120px;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="height-min-content">height: min-content<br>on this box.</div>
-    <div class="height-max-content">height: max-content<br>on this box.</div>
-  </div>
+  <div>
+    <div class="container">
+      <div class="height-min-content">height: min-content<br>on this box.</div>
+      <div class="height-max-content">height: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small min-height-min-content">
-      min-height: min-content<br>on this box.
+    <div class="container">
+      <div class="too-small min-height-min-content">
+        min-height: min-content<br>on this box.
+      </div>
+      <div class="too-small min-height-max-content">
+        min-height: max-content<br>on this box.
+      </div>
     </div>
-    <div class="too-small min-height-max-content">
-      min-height: max-content<br>on this box.
+
+    <div class="container">
+      <div class="too-big max-height-min-content">
+        max-height: min-content<br>on this box.
+      </div>
+      <div class="too-big max-height-max-content">
+        max-height: max-content<br>on this box.
+      </div>
     </div>
   </div>
 
-  <div class="container">
-    <div class="too-big max-height-min-content">
-      max-height: min-content<br>on this box.
-    </div>
-    <div class="too-big max-height-max-content">
-      max-height: max-content<br>on this box.
+  <div>
+    <div class="container">
+      <div class="block-min-content">block: min-content<br>on this box.</div>
+      <div class="block-max-content">block: max-content<br>on this box.</div>
     </div>
-  </div>
-
-  <div class="container">
-    <div class="block-min-content">block: min-content<br>on this box.</div>
-    <div class="block-max-content">block: max-content<br>on this box.</div>
-  </div>
 
-  <div class="container">
-    <div class="too-small min-block-min-content">
-      min-block: min-content<br>on this box.
-    </div>
-    <div class="too-small min-block-max-content">
-      min-block: max-content<br>on this box.
+    <div class="container">
+      <div class="too-small min-block-min-content">
+        min-block: min-content<br>on this box.
+      </div>
+      <div class="too-small min-block-max-content">
+        min-block: max-content<br>on this box.
+      </div>
     </div>
-  </div>
 
-  <div class="container">
-    <div class="too-big max-block-min-content">
-      max-block: min-content<br>on this box.
-    </div>
-    <div class="too-big max-block-max-content">
-      max-block: max-content<br>on this box.
+    <div class="container">
+      <div class="too-big max-block-min-content">
+        max-block: min-content<br>on this box.
+      </div>
+      <div class="too-big max-block-max-content">
+        max-block: max-content<br>on this box.
+      </div>
     </div>
   </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
@@ -4,69 +4,70 @@
   <title>
     CSS Reference Case: Different values of height:auto container in horizontal wm
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <meta name="flags" content="ahem">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
     }
 
     .container {
-      width: 160px;
+      width: 80px;
       border-color: blue;
       display: inline-block;
       vertical-align: top;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       height: 10px;
     }
 
     .too-big {
-      height: 150px;
+      height: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
   </div>
   <div class="container">
     <div class="too-small">10px<br>container: min-content.</div>
     <div class="too-small">10px<br>container: min-content.</div>
   </div>
   <div class="container">
-    <div class="too-big">150px<br>container: min-content.</div>
-    <div class="too-big">150px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
   </div>
 
   <div class="container">
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -76,18 +77,18 @@
     <div class="too-small">10px<br>container min-size: min-content.</div>
   </div>
   <div class="container">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
   <div class="container">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
+++ b/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
@@ -7,69 +7,70 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
     }
 
     .container {
-      width: 160px;
+      width: 80px;
       border-color: blue;
       display: inline-block;
       vertical-align: top;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       height: 10px;
     }
 
     .too-big {
-      height: 150px;
+      height: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container height-min-content">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
   </div>
   <div class="container height-min-content">
     <div class="too-small">10px<br>container: min-content.</div>
     <div class="too-small">10px<br>container: min-content.</div>
   </div>
   <div class="container height-min-content">
-    <div class="too-big">150px<br>container: min-content.</div>
-    <div class="too-big">150px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
   </div>
 
   <div class="container height-max-content">
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container height-max-content">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container height-max-content">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -79,18 +80,18 @@
     <div class="too-small">10px<br>container min-size: min-content.</div>
   </div>
   <div class="container min-height-max-content">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container max-height-min-content">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
   <div class="container max-height-max-content">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
+++ b/layout/reftests/w3c-css/submitted/sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
@@ -7,69 +7,70 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
     }
 
     .container {
-      width: 160px;
+      width: 80px;
       border-color: blue;
       display: inline-block;
       vertical-align: top;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       block-size: 10px;
     }
 
     .too-big {
-      block-size: 150px;
+      block-size: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container block-min-content">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
   </div>
   <div class="container block-min-content">
     <div class="too-small">10px<br>container: min-content.</div>
     <div class="too-small">10px<br>container: min-content.</div>
   </div>
   <div class="container block-min-content">
-    <div class="too-big">150px<br>container: min-content.</div>
-    <div class="too-big">150px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
   </div>
 
   <div class="container block-max-content">
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container block-max-content">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container block-max-content">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -79,18 +80,18 @@
     <div class="too-small">10px<br>container min-size: min-content.</div>
   </div>
   <div class="container min-block-max-content">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container max-block-min-content">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
   <div class="container max-block-max-content">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html
@@ -4,68 +4,74 @@
   <title>
     CSS Reference Case: Different values of block sizing properties in vertical wm
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <meta name="flags" content="ahem">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .container {
       width: 200px;
       height: 120px;
       border-color: blue;
       border: 2px solid blue;
-      padding: 5px;
       writing-mode: vertical-lr;
     }
 
     .container > * {
       border: 2px solid lime;
-      padding: 5px;
       font-size: 15px;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 10px;
+      line-height: 15px;
     }
 
     .too-small {
       width: 10px;
     }
 
     .too-big {
-      width: 150px;
+      width: 120px;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div>width: min-content<br>on this box.</div>
-    <div>width: max-content<br>on this box.</div>
-  </div>
+  <div style="display: inline-block;">
+    <div class="container">
+      <div>width: min-content<br>on this box.</div>
+      <div>width: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small">min-width: min-content<br>on this box.</div>
-    <div class="too-small">min-width: max-content<br>on this box.</div>
+    <div class="container">
+      <div class="too-small">min-width: min-content<br>on this box.</div>
+      <div class="too-small">min-width: max-content<br>on this box.</div>
+    </div>
+
+    <div class="container">
+      <div class="too-big">max-width: min-content<br>on this box.</div>
+      <div class="too-big">max-width: max-content<br>on this box.</div>
+    </div>
   </div>
 
-  <div class="container">
-    <div class="too-big">max-width: min-content<br>on this box.</div>
-    <div class="too-big">max-width: max-content<br>on this box.</div>
-  </div>
+  <div style="display: inline-block;">
+    <div class="container">
+      <div>block: min-content<br>on this box.</div>
+      <div>block: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div>block: min-content<br>on this box.</div>
-    <div>block: max-content<br>on this box.</div>
-  </div>
+    <div class="container">
+      <div class="too-small">min-block: min-content<br>on this box.</div>
+      <div class="too-small">min-block: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small">min-block: min-content<br>on this box.</div>
-    <div class="too-small">min-block: max-content<br>on this box.</div>
-  </div>
-
-  <div class="container">
-    <div class="too-big">max-block: min-content<br>on this box.</div>
-    <div class="too-big">max-block: max-content<br>on this box.</div>
+    <div class="container">
+      <div class="too-big">max-block: min-content<br>on this box.</div>
+      <div class="too-big">max-block: max-content<br>on this box.</div>
+    </div>
   </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
+++ b/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html
@@ -7,85 +7,91 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .container {
       width: 200px;
       height: 120px;
       border: 2px solid blue;
-      padding: 5px;
       writing-mode: vertical-lr;
     }
 
     .container > * {
       border: 2px solid lime;
-      padding: 5px;
       font-size: 15px;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 10px;
+      line-height: 15px;
     }
 
     .too-small {
       width: 10px;
     }
 
     .too-big {
-      width: 150px;
+      width: 120px;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="width-min-content">width: min-content<br>on this box.</div>
-    <div class="width-max-content">width: max-content<br>on this box.</div>
-  </div>
+  <div style="display: inline-block;">
+    <div class="container">
+      <div class="width-min-content">width: min-content<br>on this box.</div>
+      <div class="width-max-content">width: max-content<br>on this box.</div>
+    </div>
 
-  <div class="container">
-    <div class="too-small min-width-min-content">
-      min-width: min-content<br>on this box.
+    <div class="container">
+      <div class="too-small min-width-min-content">
+        min-width: min-content<br>on this box.
+      </div>
+      <div class="too-small min-width-max-content">
+        min-width: max-content<br>on this box.
+      </div>
     </div>
-    <div class="too-small min-width-max-content">
-      min-width: max-content<br>on this box.
+
+    <div class="container">
+      <div class="too-big max-width-min-content">
+        max-width: min-content<br>on this box.
+      </div>
+
+      <div class="too-big max-width-max-content">
+        max-width: max-content<br>on this box.
+      </div>
     </div>
   </div>
 
-  <div class="container">
-    <div class="too-big max-width-min-content">
-      max-width: min-content<br>on this box.
+  <div style="display: inline-block;">
+    <div class="container">
+      <div class="block-min-content">block: min-content<br>on this box.</div>
+      <div class="block-max-content">block: max-content<br>on this box.</div>
     </div>
 
-    <div class="too-big max-width-max-content">
-      max-width: max-content<br>on this box.
-    </div>
-  </div>
-
-  <div class="container">
-    <div class="block-min-content">block: min-content<br>on this box.</div>
-    <div class="block-max-content">block: max-content<br>on this box.</div>
-  </div>
-
-  <div class="container">
-    <div class="too-small min-block-min-content">
-      min-block: min-content<br>on this box.
-    </div>
-    <div class="too-small min-block-max-content">
-      min-block: max-content<br>on this box.
-    </div>
-  </div>
-
-  <div class="container">
-    <div class="too-big max-block-min-content">
-      max-block: min-content<br>on this box.
+    <div class="container">
+      <div class="too-small min-block-min-content">
+        min-block: min-content<br>on this box.
+      </div>
+      <div class="too-small min-block-max-content">
+        min-block: max-content<br>on this box.
+      </div>
     </div>
 
-    <div class="too-big max-block-max-content">
-      max-block: max-content<br>on this box.
+    <div class="container">
+      <div class="too-big max-block-min-content">
+        max-block: min-content<br>on this box.
+      </div>
+
+      <div class="too-big max-block-max-content">
+        max-block: max-content<br>on this box.
+      </div>
     </div>
   </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
+++ b/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html
@@ -4,44 +4,46 @@
   <title>
     CSS Reference Case: Different values of width:auto container in vertical wm
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <meta name="flags" content="ahem">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer {
       writing-mode: vertical-lr;
+      display: inline-block;
     }
 
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
       display: inline-block;
     }
 
     .container {
-      height: 160px;
+      height: 80px;
       border-color: blue;
       vertical-align: bottom;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       width: 10px;
     }
 
     .too-big {
-      width: 150px;
+      width: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
@@ -59,18 +61,18 @@
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -81,19 +83,19 @@
   </div>
 
   <div class="container">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
 
   <div class="container">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
+++ b/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html
@@ -7,73 +7,75 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer {
       writing-mode: vertical-lr;
+      display: inline-block;
     }
 
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
       display: inline-block;
     }
 
     .container {
-      height: 160px;
+      height: 80px;
       border-color: blue;
       vertical-align: bottom;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       width: 10px;
     }
 
     .too-big {
-      width: 150px;
+      width: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container width-min-content">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
   </div>
   <div class="container width-min-content">
     <div class="too-small">10px<br>container: min-content.</div>
     <div class="too-small">10px<br>container: min-content.</div>
   </div>
   <div class="container width-min-content">
-    <div class="too-big">150px<br>container: min-content.</div>
-    <div class="too-big">150px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
   </div>
 
   <div class="container width-max-content">
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container width-max-content">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container width-max-content">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -84,19 +86,19 @@
   </div>
 
   <div class="container min-width-max-content">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container max-width-min-content">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
 
   <div class="container max-width-max-content">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
+++ b/layout/reftests/w3c-css/submitted/sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html
@@ -7,73 +7,75 @@
   <meta charset="utf-8">
   <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
   <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
   <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
   <meta name="flags" content="ahem">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
   <style>
+    html,body {
+      margin: 0;
+    }
+
     .outer {
       writing-mode: vertical-lr;
+      display: inline-block;
     }
 
     .outer * {
       border: 2px solid lime;
-      padding: 5px;
-      font-size: 15px;
-      line-height: 1;
       display: inline-block;
     }
 
     .container {
-      height: 160px;
+      height: 80px;
       border-color: blue;
       vertical-align: bottom;
 
       font-family: Ahem;
-      font-size: 15px;
-      line-height: 21px;
+      font-size: 8px;
+      line-height: 13px;
     }
 
     .too-small {
       block-size: 10px;
     }
 
     .too-big {
-      block-size: 150px;
+      block-size: 100px;
     }
   </style>
 </head>
 <body>
 <div class="outer">
   <div class="container block-min-content">
     <div>auto<br>container: min-content.</div>
     <div>auto<br>container: min-content.</div>
   </div>
   <div class="container block-min-content">
     <div class="too-small">10px<br>container: min-content.</div>
     <div class="too-small">10px<br>container: min-content.</div>
   </div>
   <div class="container block-min-content">
-    <div class="too-big">150px<br>container: min-content.</div>
-    <div class="too-big">150px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
+    <div class="too-big">100px<br>container: min-content.</div>
   </div>
 
   <div class="container block-max-content">
     <div>auto<br>container: max-content.</div>
     <div>auto<br>container: max-content.</div>
   </div>
   <div class="container block-max-content">
     <div class="too-small">10px<br>container: max-content.</div>
     <div class="too-small">10px<br>container: max-content.</div>
   </div>
   <div class="container block-max-content">
-    <div class="too-big">150px<br>container: max-content.</div>
-    <div class="too-big">150px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
+    <div class="too-big">100px<br>container: max-content.</div>
   </div>
 </div>
 
 <div class="outer">
   <div class="container">
     <div>auto<br>container: auto.</div>
     <div>auto<br>container: auto.</div>
   </div>
@@ -84,19 +86,19 @@
   </div>
 
   <div class="container min-block-max-content">
     <div class="too-small">10px<br>container min-size: max-content.</div>
     <div class="too-small">10px<br>container min-size: max-content.</div>
   </div>
 
   <div class="container max-block-min-content">
-    <div class="too-big">150px<br>container max-size: min-content.</div>
-    <div class="too-big">150px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
+    <div class="too-big">100px<br>container max-size: min-content.</div>
   </div>
 
   <div class="container max-block-max-content">
-    <div class="too-big">150px<br>container max-size: max-content.</div>
-    <div class="too-big">150px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
+    <div class="too-big">100px<br>container max-size: max-content.</div>
   </div>
 </div>
 </body>
 </html>