Bug 1148294 part 2: Add one reftest for writing-mode & direction properties' influence on flex axes.
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 27 Mar 2015 12:06:03 -0700
changeset 266590 7c6354ab3e22d21460681b92b0fcb3bc78f7c8f5
parent 266589 52c1155d7bff4dba1b5e53bdb07f62767ad1daef
child 266591 2e874a1e7a7a260eb3936f417d21fa11014ef074
push id830
push userraliiev@mozilla.com
push dateFri, 19 Jun 2015 19:24:37 +0000
treeherdermozilla-release@932614382a68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1148294
milestone39.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 1148294 part 2: Add one reftest for writing-mode & direction properties' influence on flex axes.
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      height: 30px;
+      width: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: horizontal-tb; */
+    }
+    .flexContainer > * {
+      width: 15px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      height: 30px;
+      width: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: horizontal-tb;
+    }
+    .flexContainer > * {
+      width: 15px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -177,8 +177,11 @@ skip-if(Mulet) == flexbox-overflow-vert-
 == flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001-ref.xhtml
 == flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001-ref.xhtml
 == flexbox-whitespace-handling-002.xhtml  flexbox-whitespace-handling-002-ref.xhtml
 
 # Tests for flex containers with pseudo-elements
 == flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001-ref.html
 == flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html
 == flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html
+
+# Tests for combined influence of 'writing-mode' & 'direction' on flex axes
+test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html