Bug 969460 part 3: regression tests for "display:flex" on root node. r=bz
authorDaniel Holbert <dholbert@cs.stanford.edu>
Sat, 15 Feb 2014 10:43:11 -0800
changeset 169404 509cfc636986025dbcdaaa14b3a623ea5690c331
parent 169403 90c1ec4ae807618ed69662ea6057dd1c1d6b461c
child 169405 20d7a9037429b138123195e3e994a7ebbbf59459
push id270
push userpvanderbeken@mozilla.com
push dateThu, 06 Mar 2014 09:24:21 +0000
reviewersbz
bugs969460
milestone30.0a1
Bug 969460 part 3: regression tests for "display:flex" on root node. r=bz
layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
layout/reftests/flexbox/reftest.list
layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1b.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
layout/style/test/mochitest.ini
layout/style/test/test_root_node_display.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100%" height="100%">
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     style="display:flex"
+     width="100%" height="100%">
+
+  <title>Test that we ignore "display:flex" on a root SVG node</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=969460 -->
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -128,13 +128,16 @@ fails == flexbox-inlinecontent-horiz-1b.
 == flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
 
 # Tests for invalidation after dynamic modifications
 == flexbox-invalidation-1.html flexbox-invalidation-1-ref.html
 
 # Tests for flexbox in an iframe that gets resized.
 skip-if(B2G) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
 
+# Tests for flexbox styling on things that don't support it
+== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg
+
 # Tests with widgets as flex items
 fuzzy-if(gtk2Widget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
 fuzzy-if(gtk2Widget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
 fuzzy-if(gtk2Widget,1,58) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html
 fuzzy-if(gtk2Widget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html style="display: flex; justify-content: center">
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    div {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <div>centered</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle 'display:flex' property on
+     the root <html> element, with the <body> as the sole flex item. -->
+<html style="display: flex; justify-content: center">
+<head>
+  <title>CSS Test: Testing 'display:flex' on root node</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
+  <link rel="match" href="flexbox-root-node-1-ref.html">
+  <style>
+    html {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  centered
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-1b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle 'display:flex' property on
+     the root <html> element, with no explicit <body>. -->
+<html style="display: flex; justify-content: center">
+<head>
+  <title>CSS Test: Testing 'display:flex' on root node</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
+  <link rel="match" href="flexbox-root-node-1-ref.html">
+  <style>
+    html {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+centered
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -135,16 +135,20 @@ fuzzy-if(Android,158,32) == flexbox-alig
 == flexbox-overflow-vert-3.html flexbox-overflow-vert-3-ref.html
 == flexbox-overflow-vert-4.html flexbox-overflow-vert-4-ref.html
 == flexbox-overflow-vert-5.html flexbox-overflow-vert-5-ref.html
 
 # Tests for the order in which we paint flex items
 == flexbox-paint-ordering-1.xhtml flexbox-paint-ordering-1-ref.xhtml
 == flexbox-paint-ordering-2.xhtml flexbox-paint-ordering-2-ref.xhtml
 
+# Tests for "display:flex" on root node
+== flexbox-root-node-1a.html flexbox-root-node-1-ref.html
+== flexbox-root-node-1b.html flexbox-root-node-1-ref.html
+
 # Tests for sizing of flex containers, e.g. under min/max size constraints
 == flexbox-sizing-horiz-1.xhtml flexbox-sizing-horiz-1-ref.xhtml
 == flexbox-sizing-horiz-2.xhtml flexbox-sizing-horiz-2-ref.xhtml
 == flexbox-sizing-vert-1.xhtml  flexbox-sizing-vert-1-ref.xhtml
 == flexbox-sizing-vert-2.xhtml  flexbox-sizing-vert-2-ref.xhtml
 
 # Tests for table-fixup on flex items
 == flexbox-table-fixup-1a.xhtml flexbox-table-fixup-1-ref.xhtml
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -156,16 +156,17 @@ skip-if = toolkit == 'android'
 support-files = file_position_sticky.html
 [test_priority_preservation.html]
 [test_property_syntax_errors.html]
 [test_pseudoelement_state.html]
 [test_pseudoelement_parsing.html]
 [test_redundant_font_download.html]
 support-files = redundant_font_download.sjs
 [test_rem_unit.html]
+[test_root_node_display.html]
 [test_rule_insertion.html]
 [test_rule_serialization.html]
 [test_rules_out_of_sheets.html]
 [test_selectors.html]
 skip-if = toolkit == 'android' #bug 775227
 [test_selectors_on_anonymous_content.html]
 [test_shorthand_property_getters.html]
 [test_specified_value_serialization.html]
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_root_node_display.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=969460
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 969460</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=969460">Mozilla Bug 969460</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="float" style="float: left"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 969460: Test that "display" on the root node is computed
+    using the same conversion that we use for display on floated elements **/
+
+function test_display_value(val)
+{
+  var floatElem = document.getElementById("float");
+  floatElem.style.display = val;
+  var floatConversion = window.getComputedStyle(floatElem, null).display;
+  floatElem.style.display = "";
+
+  var rootNode = document.documentElement;
+  rootNode.style.display = val;
+  rootNode.offsetHeight; // (Flush layout, to be sure layout can handle 'val')
+  var rootConversion = window.getComputedStyle(rootNode, null).display;
+  rootNode.style.display = "";
+
+  // Special case: "display:list-item" does not get modified by 'float',
+  // but the spec allows us to convert it to 'block' on the root node
+  // (and we do convert it, so that we don't have to support documents whose
+  // root node is a list-item).
+  if (val == "list-item") {
+    is(floatConversion, val, "'float' shouldn't affect 'display:list-item'");
+    is(rootConversion, "block",
+       "We traditionally convert 'display:list-item' on the root node to " +
+       "'display:block' (though if that changes, it's not technically a bug, " +
+       "as long as we support it properly).");
+  } else {
+    is(rootConversion, floatConversion,
+       "root node should make 'display:" + val + "' compute to the same " +
+       "value that it computes to on a floated element");
+  }
+}
+
+var displayInfo = gCSSProperties["display"];
+displayInfo.initial_values.forEach(test_display_value);
+displayInfo.other_values.forEach(test_display_value);
+
+</script>
+</pre>
+</body>
+</html>