Bug 1255393 part 8 - [css-grid] Add/tweak reftests.
authorMats Palmgren <mats@mozilla.com>
Tue, 27 Sep 2016 17:05:41 +0200
changeset 315475 4785d16bb24d1fbadd346253268d028893f2a95e
parent 315474 2b923d48ea7e7cdc9ef648a79e957c99d81aadd5
child 315476 441dc90a1f8fc14d3fb0a494c7e4ab1f2bb08dad
push id32628
push usercbook@mozilla.com
push dateWed, 28 Sep 2016 14:56:02 +0000
treeherderautoland@3a5db9f20b43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1255393
milestone52.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 1255393 part 8 - [css-grid] Add/tweak reftests.
layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
layout/reftests/css-grid/grid-flex-min-sizing-002.html
layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
layout/reftests/css-grid/grid-track-sizing-002-ref.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
@@ -40,19 +40,25 @@ body,html { color:black; background:whit
 
 br { clear:both; }
 
 #px-border      .item { border-left:20px solid blue; }
 #percent-border .item { padding-left:10%; }
 
 #px-border .grid { grid-template-columns: minmax(20px,0) 1fr; }
 .c100 { grid-template-columns: minmax(100px,0) 1fr; }
+.c100100 { grid-template-columns: minmax(100px,0) 100px; }
 #px-border .c100 { grid-template-columns: minmax(120px,0) 1fr; }
+#px-border .c100100 { grid-template-columns: minmax(120px,0) 120px; }
 .c10 { grid-template-columns: minmax(10px,0) 1fr; }
 #px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
+
+#percent-border .c100 { grid-template-columns: minmax(100px,0) 11px; }
+#percent-border .c10 { grid-template-columns: minmax(10px,0) 1px; }
+#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
   </style>
 </head>
 <body>
 
 <table border="1">
 <tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th>
 <tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td>
 </tr></table>
@@ -81,33 +87,33 @@ var styles = [
 "min-width:calc(75px + 50%); width:100px",
 "min-width:calc(100px + 50%); max-width:1px",
 "min-width:calc(100px + 50%); max-width:150px",
 ];
 var grids = [
 "grid",
 "grid",
 "grid c100",
-"grid",
+"grid c100",
 "grid",
-"grid",
+"grid c100100",
 "grid c10",
 "grid c100",
 "grid c100",
 "grid",
 "grid",
 "grid",
 "grid",
-"grid",
+"grid c100",
 "grid c100",
 "grid",
+"grid c100100",
+"grid c10",
 "grid c100",
-"grid",
-"grid",
-"grid",
+"grid c100",
 "grid",
 "grid",
 ];
 var containers = [ "no-border", "px-border", "percent-border" ];
 for (var i = 0; i < containers.length; ++i) {
   var c = document.querySelector("#"+containers[i]);
   for (var j = 0; j < styles.length; ++j) {
     c.appendChild(document.createElement('br'));
--- a/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
@@ -16,20 +16,21 @@ body,html { color:black; background:whit
  float: left;
  min-width:100px;
 }
 .fixed .grid {
  width:140px;
 }
 
 .g1 {
- grid-template-columns: minmax(0,min-content)
+ grid-template-columns: 4px
                         minmax(0,0)
                         minmax(0,0)
                         1fr;
+ min-width:104px;
 }
 
 .g2 {
  grid-template-columns: minmax(0,max-content)
                         minmax(0,0)
                         minmax(0,0)
                         1fr;
 }
@@ -41,30 +42,33 @@ body,html { color:black; background:whit
                         1fr;
 }
 
 .g4 {
  grid-template-columns: minmax(2px,0)
                         minmax(1px,0)
                         minmax(1px,0)
                         1fr;
+ min-width:104px;
 }
 
 .g5 {
  grid-template-columns: minmax(20px,0)
                         minmax(0,0)
                         minmax(0,0)
                         1fr;
+ min-width:104px;
 }
 
 .g6 {
  grid-template-columns: minmax(2px,0)
                         minmax(1px,0)
                         minmax(1px,0)
                         20px;
+ min-width:124px;
 }
 
 .g7 {
  grid-template-columns: minmax(20px,1fr)
                         minmax(0,0)
                         minmax(0,0)
                         20px;
 }
@@ -76,56 +80,60 @@ body,html { color:black; background:whit
                         20px;
 }
 
 .g9 {
  grid-template-columns: 20px
                         30px
                         minmax(0,0)
                         10px;
+ min-width:114px;
 }
 
 .gA {
  grid-template-columns: minmax(0,0)
                         minmax(min-content,40px)
                         minmax(0,0)
                         20px;
+ min-width:140px;
 }
 
 .gB {
  grid-template-columns: minmax(0,0)
                         minmax(auto,40px)
                         minmax(0,0)
                         20px;
 }
 
 .gC {
  grid-template-columns: minmax(0,20px)
-                        minmax(auto,40px)
+                        minmax(0,40px)
                         minmax(0,0)
                         20px;
+ min-width:124px;
 }
 
 .gD {
  grid-template-columns: minmax(auto,20px)
                         minmax(auto,40px)
                         minmax(0,0)
                         min-content;
 }
 
 .gE {
- grid-template-columns: minmax(auto,20px)
-                        minmax(auto,40px)
+ grid-template-columns: minmax(0,20px)
+                        minmax(0,40px)
                         minmax(0,20px)
                         auto;
+ min-width:104px;
 }
 
 .gF {
- grid-template-columns: minmax(auto,20px)
-                        minmax(min-content,max-content)
+ grid-template-columns: minmax(0,20px)
+                        44px
                         minmax(0,40px)
                         auto;
 }
 
 
 .t { grid-column: span 3; border:2px solid; }
 .d1 { grid-column: 1 / span 2; background: grey; }
 .d3 { grid-column: 3 / span 2; background: blue; }
--- a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
@@ -20,55 +20,57 @@ body,html { color:black; background:whit
  display: grid;
  grid-template-columns: minmax(min-content,min-content);
  border:1px solid;
  float: left;
  margin-right: 20px;
 }
 
 .g1 {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: 4px
                         minmax(0,0)
                         minmax(0,0)
                         1fr;
+ min-width: 24px;
 }
 
 .g2 {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: min-content
                         0
                         0
                         1fr;
 }
 
 .g3 {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: min-content
                         0
                         0
                         1fr;
 }
 
 .g4 {
  grid-template-columns: minmax(2px,0)
                         1px
                         1px
-                        1fr;
+                        20px;
 }
 
 .g5 {
  grid-template-columns: minmax(20px,0)
                         minmax(0,0)
                         minmax(0,0)
-                        0;
+                        4px;
 }
 
 .g6 {
- grid-template-columns: minmax(2px,0)
-                        minmax(1px,0)
-                        minmax(1px,0)
+ grid-template-columns: minmax(1.333333px,0)
+                        minmax(1.333333px,0)
+                        minmax(1.333333px,0)
                         20px;
+ min-width: 44px;
 }
 
 .g7 {
  grid-template-columns: minmax(20px,1fr)
                         minmax(min-content,0)
                         minmax(min-content,0)
                         20px;
 }
@@ -90,40 +92,42 @@ body,html { color:black; background:whit
 .gA {
  grid-template-columns: minmax(min-content,0)
                         minmax(min-content,40px)
                         minmax(min-content,0)
                         20px;
 }
 
 .gB {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: 24px
                         0
                         0
                         20px;
+ min-width: 44px;
 }
 
 .gC {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: minmax(24px,0)
                         0
                         0
                         20px;
+ min-width: 44px;
 }
 
 .gD {
- grid-template-columns: minmax(4px,0)
+ grid-template-columns: minmax(24px,0)
                         0
                         0
                         0;
 }
 
 .gE {
- grid-template-columns: minmax(2px,0)
-                        minmax(1px,0)
-                        minmax(1px,0)
+ grid-template-columns: minmax(8px,0)
+                        minmax(8px,0)
+                        minmax(8px,0)
                         0px;
 }
 
 .gF {
  grid-template-columns: 22px
                         1px
                         1px
                         auto;
--- a/layout/reftests/css-grid/grid-flex-min-sizing-002.html
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-002.html
@@ -10,25 +10,25 @@
   <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax">
   <link rel="match" href="grid-flex-min-sizing-002-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
 
 .grid {
  display: grid;
  border: 1px solid;
- float: left;
 }
 
 .g0 {
  display: grid;
  grid-template-columns: minmax(min-content,min-content);
  border:1px solid;
  float: left;
  margin-right: 20px;
+ justify-items: start;
 }
 
 /*
  * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now
  * invalid, so they were replaced in this test with 'auto' instead (for now).
  */
 
 .g1 {
--- a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
@@ -42,21 +42,21 @@ x {
   min-width: 0;
   min-height: 0;
 }
 
 .tA {
   grid-template-columns: 30px;
 }
 .tB {
-  grid-template-columns: 0;
+  grid-template-columns: 30px;
   grid-template-rows: 0;
 }
 
-.t0 x, .t2 x, .t6 x, .t7 x, .t9 x { width: 18px }
+.t0 x, .t2 x, .t6 x, .t7 x, .t9 x, .tB x { width: 18px }
 .t1 x { width: 28px }
 .t3 x, .t4 x, .t8 x { width: 0 }
 .t5 x { width: 10px }
 .tA x { width: 48px }
 
 .sz {
   grid-template-rows: 40px;
 }
--- a/layout/reftests/css-grid/grid-track-sizing-002-ref.html
+++ b/layout/reftests/css-grid/grid-track-sizing-002-ref.html
@@ -31,17 +31,17 @@ x {
   width: 100px;
   height: 20px;
   background: black;
 }
 div div:nth-child(2n+1) {
   background: grey;
 }
 .grid.c3 div {
-  grid-column:1/span 3;
+  margin-right: 30px;
 }
 y { display: block; width: 130px; }
 </style>
 </head>
 <body>
 
 <div class="grid">
   <x></x>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -46,22 +46,22 @@ skip-if(Android) fuzzy-if(winWidget,1,32
 == grid-relpos-items-001.html grid-relpos-items-001-ref.html
 == grid-item-sizing-percent-001.html grid-item-sizing-percent-001-ref.html
 == grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html
 == grid-item-dir-001.html grid-item-dir-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
 == grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
 == grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html
-fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
+# fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html TODO: bug 1303643
 == grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html
 == grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
 == grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
 == grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
-== grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html
+skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html # bug 1305716
 == grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
 == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
 == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
 == grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html
 == grid-track-percent-sizing-001.html grid-track-percent-sizing-001-ref.html
 == grid-track-fit-content-sizing-001.html grid-track-fit-content-sizing-001-ref.html
 == grid-track-fit-content-sizing-002.html grid-track-fit-content-sizing-002-ref.html
 == grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html