Bug 1234941 part 1: Add reftests for "-webkit-box" rendering, with -webkit-box-orient unset. r=heycam
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 30 Dec 2015 23:36:31 -0800
changeset 313268 3d715941e8d723ec10e33dcd988fb36d5bfda688
parent 313267 0b5ed5e4a39503e655b752aba844a42bf9d9d3c8
child 313269 f69d91bcc0d6024a7e395be16274a203fc612222
push id5703
push userraliiev@mozilla.com
push dateMon, 07 Mar 2016 14:18:41 +0000
treeherdermozilla-beta@31e373ad5b5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1234941
milestone46.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 1234941 part 1: Add reftests for "-webkit-box" rendering, with -webkit-box-orient unset. r=heycam
layout/reftests/reftest.list
layout/reftests/webkit-box/reftest.list
layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
layout/reftests/webkit-box/webkit-box-align-horiz-1a.html
layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -365,16 +365,19 @@ skip-if(Android) include xul-document-lo
 skip-if(Android) include xul/reftest.list
 
 # xul (no XUL theme on Android)
 skip-if(Android) include ../xul/reftest/reftest.list
 
 # xul grid (no XUL theme on Android)
 skip-if(Android) include ../xul/grid/reftests/reftest.list
 
+# -webkit-box & associated properties (mapped to modern flexbox)
+include webkit-box/reftest.list
+
 # -webkit-gradient expressions
 include webkit-gradient/reftest.list
 
 # writing-mode
 include writing-mode/reftest.list
 
 # z-index/
 include z-index/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/reftest.list
@@ -0,0 +1,9 @@
+# This directory contains tests for "display: -webkit-box" and associated
+# CSS properties. These tests require webkit prefix support to be enabled.
+default-preferences pref(layout.css.prefixes.webkit,true)
+
+# Tests for "-webkit-box-align" (cross-axis alignment):
+== webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html
+
+# Tests for "-webkit-box-pack" (main-axis alignment):
+== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { align-items: flex-start; }
+    .bacenter   { align-items: center;     }
+    .baend      { align-items: flex-end;   }
+    .babaseline { align-items: baseline;   }
+    .bastretch  { align-items: stretch;    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-align values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { -webkit-box-align: start;    }
+    .bacenter   { -webkit-box-align: center;   }
+    .baend      { -webkit-box-align: end;      }
+    .babaseline { -webkit-box-align: baseline; }
+    .bastretch  { -webkit-box-align: stretch;  }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { justify-content: flex-start; }
+    .bpcenter  { justify-content: center;     }
+    .bpend     { justify-content: flex-end;   }
+    .bpjustify { justify-content: justify;
+                 display:none; /* XXXdholbert Disabling until bug 1231682 is fixed */ }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-pack values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { -webkit-box-pack: start;   }
+    .bpcenter  { -webkit-box-pack: center;  }
+    .bpend     { -webkit-box-pack: end;     }
+    .bpjustify { -webkit-box-pack: justify;
+                 display:none; /* XXXdholbert Disabling until bug 1231682 is fixed */ }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>