Bug 1227162 - [css-grid] Reftests for grid container with overflow:hidden.
authorMats Palmgren <mats@mozilla.com>
Sat, 28 Nov 2015 21:37:44 +0100
changeset 308712 46d92bfcb874b52977d687825475ac987ca0ea3f
parent 308711 607f76dd78e71325a3fc72e22caee050cfb8eb98
child 308713 d58f495ddcfb01b82312c1922e78b3d457c55ee1
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1227162
milestone45.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 1227162 - [css-grid] Reftests for grid container with overflow:hidden.
layout/reftests/css-grid/grid-container-overflow-001-ref.html
layout/reftests/css-grid/grid-container-overflow-001.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-overflow-001-ref.html
@@ -0,0 +1,113 @@
+<!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: overflow:hidden/auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-template-columns: repeat(3, 8px);
+  border: 1px solid black;
+  grid-row-gap: 4px;
+  grid-column-gap: 2px;
+  float: left;
+}
+
+.grid :first-child { background:lime; }
+.grid :nth-child(2n) { border-left:1px solid black; }
+
+x { background: grey;  width:7px; height:5px; }
+y { background: blue;  width:7px; height:5px; }
+z { background: green; width:7px; height:5px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; grid-template-columns: repeat(1, 8px);">
+<x></x>
+<y></y>
+<z></z>
+</div>
+
+<div class="grid" style="height:8px; grid-template-rows: repeat(1, 5px);">
+<x></x><x></x><x></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; grid-template-columns: 8px; grid-template-rows: 5px;">
+<x></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; justify-content:center;  grid-template-columns: 8px; grid-template-rows: 5px;">
+<x style="background:grey; border-left:1px solid black;"></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; align-content:center;">
+<y style="background:blue; border-left:1px solid black;"></y>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-rows: 10px;; align-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-overflow-001.html
@@ -0,0 +1,124 @@
+<!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: overflow:hidden/auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-container-overflow-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-template-columns: repeat(3, 8px);
+  border: 1px solid black;
+  grid-row-gap: 4px;
+  grid-column-gap: 2px;
+  float: left;
+  overflow: hidden;
+}
+
+.grid :first-child { background:lime; }
+.grid :nth-child(2n) { border-left:1px solid black; }
+
+x { background: grey;  width:7px; height:5px; }
+y { background: blue;  width:7px; height:5px; }
+z { background: green; width:7px; height:5px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px; justify-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-rows: 10px;; align-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -72,8 +72,9 @@ fuzzy-if(winWidget,1,36) == grid-auto-mi
 == grid-justify-content-003.html grid-justify-content-003-ref.html
 == grid-column-gap-001.html grid-column-gap-001-ref.html
 == grid-column-gap-002.html grid-column-gap-002-ref.html
 == grid-column-gap-003.html grid-column-gap-003-ref.html
 == grid-row-gap-001.html grid-row-gap-001-ref.html
 == grid-row-gap-002.html grid-row-gap-002-ref.html
 == grid-row-gap-003.html grid-row-gap-003-ref.html
 == grid-row-gap-004.html grid-row-gap-004-ref.html
+== grid-container-overflow-001.html grid-container-overflow-001-ref.html