Bug 1314206 part 3 - [css-grid] Reftests for <button> grid items.
authorMats Palmgren <mats@mozilla.com>
Sat, 05 Nov 2016 02:57:08 +0100
changeset 321269 253395be59f635d21a4204539233613d7c35c2b9
parent 321268 5eed1210b69a03c364741fa7b35107703e1114c2
child 321270 41d172f46ee99f38dbbd5d874f06fbce81f64c44
push id30920
push userphilringnalda@gmail.com
push dateSat, 05 Nov 2016 20:41:02 +0000
treeherdermozilla-central@c44c01dfd264 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1314206
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 1314206 part 3 - [css-grid] Reftests for <button> grid items.
layout/reftests/css-grid/grid-item-button-001-ref.html
layout/reftests/css-grid/grid-item-button-001.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-button-001-ref.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching/clamping button item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  float: left;
+  margin-bottom:20px;
+  margin-right:20px;
+  border:1px solid;
+  line-height: 0;
+}
+button {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  vertical-align:top;
+}
+button:nth-child(1n) { background: blue; }
+button:nth-child(2n) { background: grey; }
+button:nth-child(3n) { background: tan; }
+button:nth-child(4n) { background: silver; }
+.sz > button {
+  width:20px; height:10px;
+}
+.mw > button {
+  min-width:15px;
+}
+.mw40 > button {
+  min-width:40px;
+}
+.sz.t2 > button {
+  width:10px; height:20px;
+}
+a30 {
+  display: inline-block;
+  height: 0;
+  width: 30px;
+  margin-left: 5px;
+  text-align: right;
+}
+.rel > button {
+  position:absolute;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<button>AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:15px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:15px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid sz t2">
+<button>AB</button><button style="margin-left:5px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid" style="width:215px">
+<button style="width:10px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver">AB</button></a30><button style="width:10px;margin-left:5px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver;">AB</button></a30></div>
+
+<div class="grid">
+<button>AB</button><button>AB</button><br><button style="background:tan">AB</button><button style="background:silver">AB</button></div>
+
+<div class="grid rel" style="width:100px; height:100px; position:relative">
+<button style="top:0;width:50px;height:50px">AB</button><button style="top:0;right:0;height:50px">&nbsp;&nbsp;</button><button style="bottom:0;width:50px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+
+<div class="grid rel" style="height:40px; position:relative">
+<button style="left:0;top:0;height:20px">AB</button><button style="top:0;right:0;height:20px">AB</button><button style="left:0;bottom:0;">AB</button><button style="bottom:0;right:0">AB</button><button style="position:static;visibility:hidden">AB</button><button style="position:static;visibility:hidden">AB</button>
+</div>
+
+<div class="grid sz t2 mw">
+<button>AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid mw40" style="width:215px">
+<button>AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button></div>
+
+<div class="grid rel" style="width:100px; height:100px; position:relative">
+<button style="top:0;width:40px;height:40px">AB</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-button-001.html
@@ -0,0 +1,153 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching/clamping button item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-button-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  margin-bottom:20px;
+  margin-right:20px;
+  border:1px solid;
+}
+button {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+}
+button:nth-child(1n) { background: blue; }
+button:nth-child(2n) { background: grey; }
+button:nth-child(3n) { background: tan; }
+button:nth-child(4n) { background: silver; }
+.sz > button {
+  width:20px; height:10px;
+}
+.mw > button {
+  min-width:15px;
+}
+.mw40 > button {
+  min-width:40px;
+}
+.max40 > button {
+  max-width:40px;
+  max-height:40px;
+}
+.sz.t2 > button {
+  width:10px; height:20px;
+}
+
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid sz t2">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid" style="grid:50px 50px/50px 50px">
+<button>AB</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">AB</button>
+<button class="end">&nbsp;&nbsp;</button>
+</div>
+
+<div class="grid" style="grid:minmax(auto,20px) 20px/auto auto">
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid sz t2 mw">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid mw40">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid max40" style="grid:50px 50px/50px 50px">
+<button>AB</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">AB</button>
+<button class="end">&nbsp;&nbsp;</button>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -100,16 +100,17 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
 == grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
 == grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
 == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
 == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html
+skip-if(Android) == grid-item-button-001.html grid-item-button-001-ref.html
 == grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
 skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto
 == grid-align-content-001.html grid-align-content-001-ref.html