Bug 1262049 part 6: Add reftest for -webkit-box-direction. (no review)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 20 Apr 2016 16:43:40 -0700
changeset 332070 c402a683b04fcf324b7c174eb257df04eccb260f
parent 332069 020c4ce999d9c1cbafa7caa5c380c904f0042349
child 332071 78c0ed23344315ac74651295cfb27c95b5aa4415
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1262049
milestone48.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 1262049 part 6: Add reftest for -webkit-box-direction. (no review) MozReview-Commit-ID: 1UfJetSgLb
layout/reftests/webkit-box/reftest.list
layout/reftests/webkit-box/webkit-box-direction-1-ref.html
layout/reftests/webkit-box/webkit-box-direction-1.html
--- a/layout/reftests/webkit-box/reftest.list
+++ b/layout/reftests/webkit-box/reftest.list
@@ -14,16 +14,19 @@ fails == webkit-box-anon-flex-items-3.ht
 # Tests for "-webkit-box" & "-webkit-inline-box" as display values:
 == webkit-display-values-1.html webkit-display-values-1-ref.html
 
 # Tests for "-webkit-box-align" (cross-axis alignment):
 == webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html
 == webkit-box-align-horiz-1b.html webkit-box-align-horiz-1-ref.html
 == webkit-box-align-vert-1.html webkit-box-align-vert-1-ref.html
 
+# Tests for "-webkit-box-direction":
+== webkit-box-direction-1.html webkit-box-direction-1-ref.html
+
 # Tests for "-webkit-box-flex" (flexibility of items)
 == webkit-box-flex-1.html webkit-box-flex-1-ref.html
 
 # Tests for "-webkit-box-ordinal-group"
 == webkit-box-ordinal-group-1.html webkit-box-ordinal-group-1-ref.html
 # XXXdholbert The following test fails because we accept "0" as a valid value
 # for -webkit-box-ordinal-group (unlike Chrome/Blink), because that's simply
 # how its aliased property (-moz-box-ordinal-group) behaves. This shouldn't
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-1-ref.html
@@ -0,0 +1,82 @@
+<!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;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      flex-direction: row;
+    }
+    .horizReverse {
+      flex-direction: row-reverse;
+    }
+    .vertNormal {
+      flex-direction: column;
+    }
+    .vertReverse {
+      flex-direction: column-reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-1.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "-webkit-box-direction" property
+    in a -webkit-box with default writing-mode
+  </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;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+    }
+    .horizReverse {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: reverse;
+    }
+    .vertNormal {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+    }
+    .vertReverse {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>