Bug 1221525 part 5 - [css-grid] Reftests for align|justify-self:baseline|last-baseline.
authorMats Palmgren <mats@mozilla.com>
Thu, 02 Jun 2016 17:46:58 +0200
changeset 341234 be927454459860da4b24bf174312ae72b62c7e15
parent 341233 017d5f6391838e1a00b9500770b30966c7914fb7
child 341235 7294fad22949eef3cf91c5e484f5c8a02e4a105b
push id1183
push userraliiev@mozilla.com
push dateMon, 05 Sep 2016 20:01:49 +0000
treeherdermozilla-release@3148731bed45 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1221525
milestone49.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 1221525 part 5 - [css-grid] Reftests for align|justify-self:baseline|last-baseline.
layout/reftests/css-grid/grid-item-self-baseline-001-ref.html
layout/reftests/css-grid/grid-item-self-baseline-001.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-self-baseline-001-ref.html
@@ -0,0 +1,92 @@
+<!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: align-self/justify-self:baseline/last-baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+  align-items: start;
+  justify-items: start;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+<div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-self-baseline-001.html
@@ -0,0 +1,96 @@
+<!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: align-self/justify-self:baseline/last-baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="grid-item-self-baseline-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  align-items: start;
+  justify-items: start;
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last-baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last-baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid"><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid"><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid c"><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c"><span class="jfb vl pbe">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c vl"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vl"><span class="jfb hl pbs">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl pbe">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid"><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -71,16 +71,17 @@ fuzzy-if(winWidget,1,36) == grid-auto-mi
 == grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
 == grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html
 == grid-item-align-001.html grid-item-align-001-ref.html
 == grid-item-align-002.html grid-item-align-002-ref.html
 == grid-item-align-003.html grid-item-align-003-ref.html
 == grid-item-justify-001.html grid-item-justify-001-ref.html
 == grid-item-justify-002.html grid-item-justify-002-ref.html
 == grid-item-stretch-001.html grid-item-stretch-001-ref.html
+== grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
 == grid-align-content-001.html grid-align-content-001-ref.html
 == grid-justify-content-001.html grid-justify-content-001-ref.html
 skip-if(Android&&isDebugBuild) == grid-justify-content-002.html grid-justify-content-002-ref.html # Bug 1245884 - slow
 skip-if(Android&&isDebugBuild) == grid-justify-content-003.html grid-justify-content-003-ref.html # Bug 1245884 - slow
 skip-if(Android&&isDebugBuild) == grid-column-gap-001.html grid-column-gap-001-ref.html # Bug 1245884 - slow
 == grid-column-gap-002.html grid-column-gap-002-ref.html
 == grid-column-gap-003.html grid-column-gap-003-ref.html
 == grid-column-gap-004.html grid-column-gap-004-ref.html