Bug 851379, part 3: Add reftest with percent-valued vertical margin & padding on flex items. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 11 Apr 2013 07:51:55 -0700
changeset 128449 8de3dbbec45df06e7b8ca7b633d066a6f81a6942
parent 128448 0e4434a4e7f3927ade2d551c2da024eaceb9994f
child 128450 b16ed870d536c54d712865bd5676c180ca4b4e13
push id24528
push userryanvm@gmail.com
push dateThu, 11 Apr 2013 19:19:41 +0000
treeherdermozilla-central@7b8ed29c6bc0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs851379
milestone23.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 851379, part 3: Add reftest with percent-valued vertical margin & padding on flex items. r=mats
layout/reftests/flexbox/flexbox-mbp-horiz-4-ref.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-4.xhtml
layout/reftests/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-4-ref.xhtml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case - identical to the testcase, but with with the flex items'
+     vertical margin and padding values set to 0 by default, and then set to
+     specific pixel values for the items that have a 50px percent-basis.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+        border: 1px dotted black;
+      }
+      div.height50 { height: 50px; }
+
+      .marginA  { margin:  0  8% 0  4%; }
+      .marginB  { margin:  0 10% 0 14%; }
+      .paddingA { padding: 0  6% 0  2%; }
+      .paddingB { padding: 0  8% 0 12%; }
+
+      div.height50 > .marginA {
+        margin-top: 5px;
+        margin-bottom: 3px;
+      }
+      div.height50 > .marginB {
+        margin-top: 4px;
+        margin-bottom: 6px;
+      }
+      div.height50 > .paddingA {
+        padding-top: 4px;
+        padding-bottom: 2px;
+      }
+      div.height50 > .paddingB {
+        padding-top: 3px;
+        padding-bottom: 5px;
+      }
+
+      div.child1 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.child2 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: purple;
+      }
+
+      div.filler {
+        /* Filler-div to fill up content-box and make padding easier to see. */
+        height: 10px;
+        width: 100%;
+        background: lightgrey;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50" style="align-items: flex-end"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50"
+         ><div class="child1 paddingA marginA"><div class="filler"/></div
+         ><div class="child2 paddingB marginB"><div class="filler"/></div
+    ></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-4.xhtml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with percent-valued padding and/or margin on flex items. The spec
+     says that percentage values on padding/margin-top and -bottom should be
+     resolved against the flex container's height (not its width, as would
+     be the case in a block).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+        border: 1px dotted black;
+      }
+      div.height50 { height: 50px; }
+
+      .marginA  { margin: 10%  8%  6%  4%; }
+      .marginB  { margin:  8% 10% 12% 14%; }
+      .paddingA { padding: 8%  6%  4%  2%; }
+      .paddingB { padding: 6%  8% 10% 12%; }
+
+      div.child1 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.child2 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: purple;
+      }
+
+      div.filler {
+        /* Filler-div to fill up content-box and make padding easier to see. */
+        height: 10px;
+        width: 100%;
+        background: lightgrey;
+      }
+
+    </style>
+  </head>
+  <body>
+    <!-- Flex container is auto-height - vertical margin and padding should
+         resolve to 0, since they don't have anything to resolve % against. -->
+    <div class="flexbox"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- Flex container has height: 50px - vertical margin and padding should
+         resolve % values against that. -->
+    <div class="flexbox height50"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- ...and now with align-items: flex-end, so we can see the margin-bottom
+         in action -->
+    <div class="flexbox height50" style="align-items: flex-end"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- ...and finally, with margin and padding applied to the same items -->
+    <div class="flexbox height50"
+         ><div class="child1 paddingA marginA"><div class="filler"/></div
+         ><div class="child2 paddingB marginB"><div class="filler"/></div
+    ></div>
+  </body>
+</html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -185,16 +185,17 @@ fails == flexbox-minSize-vert-1.xhtml  f
 == flexbox-mbp-horiz-1.xhtml             flexbox-mbp-horiz-1-ref.xhtml
 == flexbox-mbp-horiz-1-reverse.xhtml     flexbox-mbp-horiz-1-reverse-ref.xhtml
 == flexbox-mbp-horiz-1-rtl.xhtml         flexbox-mbp-horiz-1-reverse-ref.xhtml
 == flexbox-mbp-horiz-1-rtl-reverse.xhtml flexbox-mbp-horiz-1-ref.xhtml
 == flexbox-mbp-horiz-2a.xhtml            flexbox-mbp-horiz-2-ref.xhtml
 == flexbox-mbp-horiz-2b.xhtml            flexbox-mbp-horiz-2-ref.xhtml
 == flexbox-mbp-horiz-3.xhtml             flexbox-mbp-horiz-3-ref.xhtml
 == flexbox-mbp-horiz-3-reverse.xhtml     flexbox-mbp-horiz-3-reverse-ref.xhtml
+== flexbox-mbp-horiz-4.xhtml             flexbox-mbp-horiz-4-ref.xhtml
 
 # Tests for flex containers with the "overflow" property set
 == flexbox-overflow-horiz-1.html flexbox-overflow-horiz-1-ref.html
 == flexbox-overflow-horiz-2.html flexbox-overflow-horiz-2-ref.html
 == flexbox-overflow-horiz-3.html flexbox-overflow-horiz-3-ref.html
 == flexbox-overflow-vert-1.html flexbox-overflow-vert-1-ref.html
 == flexbox-overflow-vert-2.html flexbox-overflow-vert-2-ref.html
 == flexbox-overflow-vert-3.html flexbox-overflow-vert-3-ref.html