Bug 1105571 Part 3: Add a css Box Align test to ensure block containers with box align styles respond similarly to flex containers.
MozReview-Commit-ID: DVlsnwqiRPC
new file mode 100644
--- /dev/null
+++ b/layout/reftests/box-align/box-justify-content-001-ref.xhtml
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference: css-align: Box container justify-content</title>
+ <link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105571"/>
+ <link rel="help" href="https://drafts.csswg.org/css-align/#propdef-justify-content"/>
+
+ <style>
+ div {
+ display: flex;
+ width: 500px;
+ border: blue dashed 1px;
+ margin: 10px;
+ padding: 10px;
+ }
+
+ span {
+ display: inline-block;
+ }
+
+ .short {
+ width: 50px;
+ }
+
+ .medium {
+ width: 100px;
+ }
+
+ .long {
+ width: 200px;
+ }
+
+ .jc-center {
+ justify-content: center;
+ }
+
+ .jc-start {
+ justify-content: start;
+ }
+
+ .jc-end {
+ justify-content: end;
+ }
+
+ .jc-flex-start {
+ justify-content: flex-start;
+ }
+
+ .jc-flex-end {
+ justify-content: flex-end;
+ }
+
+ .jc-left {
+ justify-content: left;
+ }
+
+ .jc-right {
+ justify-content: right;
+ }
+
+ .jc-space-between {
+ justify-content: space-between;
+ }
+
+ .jc-space-around {
+ justify-content: space-around;
+ }
+
+ .jc-space-evenly {
+ justify-content: space-evenly;
+ }
+
+ .jc-stretch {
+ justify-content: stretch;
+ }
+
+ .jc-baseline {
+ justify-content: baseline;
+ }
+
+ .jc-last-baseline {
+ justify-content: last baseline;
+ }
+
+ .lime { background: lime; }
+ .yellow { background: yellow; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ .tan { background: tan; }
+ </style>
+ </head>
+ <body>
+ <div class="jc-center"
+ >center<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-start"
+ >start<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-end"
+ >end<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-flex-start"
+ >flex-start<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-flex-end"
+ >flex-end<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-left"
+ >left<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-right"
+ >right<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-between"
+ >space-between<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-around"
+ >space-around<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-evenly"
+ >space-evenly<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-stretch"
+ >stretch<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-baseline"
+ >baseline<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-last-baseline"
+ >last baseline<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/box-align/box-justify-content-001.xhtml
@@ -0,0 +1,163 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css-align: Box container justify-content</title>
+ <link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105571"/>
+ <link rel="help" href="https://drafts.csswg.org/css-align/#propdef-justify-content"/>
+ <link rel="match" href="box-justify-content-001-ref.html"/>
+ <style>
+ div {
+ width: 500px;
+ border: blue dashed 1px;
+ margin: 10px;
+ padding: 10px;
+ }
+
+ span {
+ display: inline-block;
+ }
+
+ .short {
+ width: 50px;
+ }
+
+ .medium {
+ width: 100px;
+ }
+
+ .long {
+ width: 200px;
+ }
+
+ .jc-center {
+ justify-content: center;
+ }
+
+ .jc-start {
+ justify-content: start;
+ }
+
+ .jc-end {
+ justify-content: end;
+ }
+
+ .jc-flex-start {
+ justify-content: flex-start;
+ }
+
+ .jc-flex-end {
+ justify-content: flex-end;
+ }
+
+ .jc-left {
+ justify-content: left;
+ }
+
+ .jc-right {
+ justify-content: right;
+ }
+
+ .jc-space-between {
+ justify-content: space-between;
+ }
+
+ .jc-space-around {
+ justify-content: space-around;
+ }
+
+ .jc-space-evenly {
+ justify-content: space-evenly;
+ }
+
+ .jc-stretch {
+ justify-content: stretch;
+ }
+
+ .jc-baseline {
+ justify-content: baseline;
+ }
+
+ .jc-last-baseline {
+ justify-content: last baseline;
+ }
+
+ .lime { background: lime; }
+ .yellow { background: yellow; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ .tan { background: tan; }
+ </style>
+ </head>
+ <body>
+ <div class="jc-center"
+ >center<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-start"
+ >start<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-end"
+ >end<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-flex-start"
+ >flex-start<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-flex-end"
+ >flex-end<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-left"
+ >left<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-right"
+ >right<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-between"
+ >space-between<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-around"
+ >space-around<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-space-evenly"
+ >space-evenly<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-stretch"
+ >stretch<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-baseline"
+ >baseline<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ <div class="jc-last-baseline"
+ >last baseline<span class="lime short">a</span
+ ><span class="yellow medium">b</span
+ ><span class="orange long">c</span
+ ></div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/box-align/reftest.list
@@ -0,0 +1,1 @@
+!= box-justify-content-001.xhtml box-justify-content-001-ref.xhtml
--- a/layout/reftests/moz.build
+++ b/layout/reftests/moz.build
@@ -64,16 +64,18 @@ with Files('backgrounds/**'):
with Files('bidi/**'):
BUG_COMPONENT = ('Core', 'Layout: Text')
with Files('border-image/**'):
BUG_COMPONENT = ('Core', 'Layout')
with Files('border-radius/**'):
BUG_COMPONENT = ('Core', 'Layout')
with Files('box/**'):
BUG_COMPONENT = ('Core', 'XP Toolkit/Widgets: XUL')
+with Files('box-align/**'):
+ BUG_COMPONENT = ('Core', 'Layout')
with Files('box-ordinal/**'):
BUG_COMPONENT = ('Core', 'XP Toolkit/Widgets: XUL')
with Files('box-properties/**'):
BUG_COMPONENT = ('Core', 'Layout')
with Files('box-shadow/**'):
BUG_COMPONENT = ('Core', 'Layout')
with Files('box-sizing/**'):
BUG_COMPONENT = ('Core', 'Layout')
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -37,16 +37,19 @@ include border-dotted/reftest.list
include border-image/reftest.list
# border-radius/
include border-radius/reftest.list
# -moz-box tests
include box/reftest.list
+# box-align/
+include box-align/reftest.list
+
# box-ordinal/
include box-ordinal/reftest.list
# box-properties/
include box-properties/reftest.list
# box-shadow/
include box-shadow/reftest.list
