Bug 1450390 part 2: Add reftest to verify that "flex-basis" doesn't affect layout of abspos flex children. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 03 Apr 2018 15:10:13 -0700
changeset 777147 363cd8bba7744e99cc7de66a9b89a3617551334e
parent 777146 c259dc509f8be5f10d457a7113d3cb6a13e687b9
child 777148 763909764666b7d617875226e21cce0c8074b959
push id105088
push userjdescottes@mozilla.com
push dateWed, 04 Apr 2018 10:12:11 +0000
reviewersmats
bugs1450390
milestone61.0a1
Bug 1450390 part 2: Add reftest to verify that "flex-basis" doesn't affect layout of abspos flex children. r=mats MozReview-Commit-ID: KnGmIgk2DFa
layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-002-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-002.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-002-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .tealBlock {
+      background: teal;
+      width: 10px;
+      height: 10px;
+      margin-bottom: 5px;
+    }
+    .purpleBlock {
+      background: purple;
+      width: 10px;
+      height: 10px;
+      margin-bottom: 5px;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="purpleBlock"></div>
+  <div class="purpleBlock"></div>
+  <div class="purpleBlock"></div>
+  <div class="purpleBlock"></div>
+
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-002.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Test that "flex-basis" doesn't affect layout of abspos flex child
+  </title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
+  <link rel="match" href="flexbox-abspos-child-001-ref.html">
+  <style>
+    .flex {
+      display: flex;
+      height: 10px;
+      width: 10px;
+      background: purple;
+      margin-bottom: 5px;
+      position: relative;
+    }
+    .flex > * {
+      position: absolute;
+      background: teal;
+      height: 10px;
+    }
+    .sized {
+      width: 10px;
+    }
+    .implied {
+      left: 0;
+      right: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- In all cases below, flex-basis should have no effect on layout (because
+       it's on an element that is abspos and hence not a flex item). -->
+
+  <!-- Abspos child has auto width (which should end up 0): -->
+  <div class="flex"><div style="flex-basis: 2px"></div></div>
+  <div class="flex"><div style="flex-basis: 100px"></div></div>
+  <div class="flex"><div style="flex-basis: 80%"></div></div>
+  <div class="flex"><div style="flex-basis: content"></div></div>
+
+  <!-- Abspos child has explicit 10px width: -->
+  <div class="flex"><div class="sized" style="flex-basis: 2px"></div></div>
+  <div class="flex"><div class="sized" style="flex-basis: 100px"></div></div>
+  <div class="flex"><div class="sized" style="flex-basis: 80%"></div></div>
+  <div class="flex"><div class="sized" style="flex-basis: content"></div></div>
+
+  <!-- Abspos child has implicit 10px width (implied by auto width and
+       constrained left/right properties): -->
+  <div class="flex"><div class="implied" style="flex-basis: 2px"></div></div>
+  <div class="flex"><div class="implied" style="flex-basis: 100px"></div></div>
+  <div class="flex"><div class="implied" style="flex-basis: 80%"></div></div>
+  <div class="flex"><div class="implied" style="flex-basis: content"></div></div>
+
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -1,11 +1,12 @@
 # Tests for absolutely-positioned children of a flex container
 == flexbox-abspos-child-001a.html flexbox-abspos-child-001-ref.html
 == flexbox-abspos-child-001b.html flexbox-abspos-child-001-ref.html
+== flexbox-abspos-child-002.html flexbox-abspos-child-002-ref.html
 
 # Tests for handling anonymous flex items
 == flexbox-anonymous-items-001.html flexbox-anonymous-items-001-ref.html
 
 # Tests for alignment of flex lines (align-content property)
 == flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001-ref.xhtml
 == flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml
 == flexbox-align-content-vert-001a.xhtml  flexbox-align-content-vert-001-ref.xhtml