Bug 1173646 part 1: Add reftest with flex items whose writing-mode differs from their flex container. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 12 Jun 2015 14:28:24 -0700
changeset 279497 449d7f5271d555ecabb8687f1cf4b671a97e9fd5
parent 279496 3f6b09143c8b6fe2a6345a6c9c7163d0fc73d0b8
child 279498 a3a9f3ac9f3b1b94c395edb2a1d7245033ba45fc
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1173646
milestone41.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 1173646 part 1: Add reftest with flex items whose writing-mode differs from their flex container. r=mats
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.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-007-ref.html
@@ -0,0 +1,56 @@
+<!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 {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer > * {
+      width: 20px;
+      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">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: horizontal-tb;
+      flex-flow: row wrap;
+    }
+    .flexContainer > * {
+      width: 20px;
+      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;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <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
@@ -185,8 +185,9 @@ fails == flexbox-min-width-auto-002b.htm
 
 # 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
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
 test-pref(layout.css.vertical-text.enabled,true) fails == flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html # bug 1131451
 test-pref(layout.css.vertical-text.enabled,true) fails == flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html # bug 1131451
+test-pref(layout.css.vertical-text.enabled,true) fails == flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html # bug 1173646