wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 880104 part 1: Rewrite flexbox-align-self-* reftests to not depend on prefixed intrinsic sizing keywords. rs=dbaron

Browse Source
This commit is contained in:
Daniel Holbert 2013-06-06 00:27:23 -07:00
parent 984ba95807
commit 5099ca7b17
16 changed files with 203 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
View File

@ -11,8 +11,7 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
width: -moz-fit-content;
display: flex;
display: inline-flex;
font-size: 10px;
line-height: 10px;

3
layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
View File

@ -11,8 +11,7 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
width: -moz-fit-content;
display: flex;
display: inline-flex;
font-size: 10px;
line-height: 10px;

6
layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
View File

@ -12,9 +12,10 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
width: -moz-fit-content;
display: inline-block;
font-size: 10px;
line-height: 10px;
vertical-align: top;
}
.flexbox > div { float: left }
@ -61,6 +62,7 @@
<div class="center" style="top: 86px">center</div>
<div class="center big" style="top: 41px">a b c d e f</div>
</div>
<br/>
<div class="flexbox">
<!-- We use inline-blocks inside of a wrapper-block as references for the
baseline-aligned flex items, since inline-blocks get
@ -68,7 +70,7 @@
manually here since the "flexbox > div" child-selector doesn't
handle these guys (since they're grandchildren).
-->
<div style="width: -moz-fit-content;">
<div>
<div class="baseline"
style="display: inline-block">base</div
><div class="baseline big"

6
layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
View File

@ -12,10 +12,10 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
width: -moz-fit-content;
display: flex;
display: inline-flex;
font-size: 10px;
line-height: 10px;
vertical-align: top;
}
.flexbox > div {
@ -23,7 +23,6 @@
margin: 1px 2px 3px 4px;
border-width: 2px 3px 4px 5px;
padding: 3px 4px 5px 6px;
border-style: dotted;
}
@ -65,6 +64,7 @@
<div class="center">center</div>
<div class="center big">a b c d e f</div>
</div>
<br/>
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big">abc</div>

3
layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
View File

@ -13,8 +13,7 @@
border: 1px dashed blue;
padding: 3px;
height: 4px;
width: -moz-fit-content;
display: flex;
display: inline-flex;
font-size: 10px;
line-height: 10px;
font-family: sans-serif;

6
layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
View File

@ -13,12 +13,13 @@
border: 1px dashed blue;
padding: 3px;
height: 4px;
width: -moz-fit-content;
display: inline-block;
font-size: 10px;
line-height: 10px;
font-family: sans-serif;
margin-top: 20px;
margin-bottom: 120px;
vertical-align: top;
}
.flexbox > div { float: left }
@ -65,6 +66,7 @@
<div class="center" style="top: -12px">center</div>
<div class="center big" style="top: -57px">a b c d e f</div>
</div>
<br/>
<div class="flexbox">
<!-- We use inline-blocks inside of a wrapper-block as references for the
baseline-aligned flex items, since inline-blocks get
@ -72,7 +74,7 @@
manually here since the "flexbox > div" child-selector doesn't
handle these guys (since they're grandchildren).
-->
<div style="width: -moz-fit-content;">
<div>
<div class="baseline"
style="display: inline-block">base</div
><div class="baseline big"

6
layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
View File

@ -13,13 +13,13 @@
border: 1px dashed blue;
padding: 3px;
height: 4px;
width: -moz-fit-content;
display: flex;
display: inline-flex;
font-size: 10px;
line-height: 10px;
font-family: sans-serif;
margin-top: 20px;
margin-bottom: 120px;
vertical-align: top;
}
.flexbox > div {
@ -27,7 +27,6 @@
margin: 1px 2px 3px 4px;
border-width: 2px 3px 4px 5px;
padding: 3px 4px 5px 6px;
border-style: dotted;
}
@ -70,6 +69,7 @@
<div class="center">center</div>
<div class="center big">a b c d e f</div>
</div>
<br/>
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big">abc</div>

37
layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
View File

@ -27,21 +27,19 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: left;
}
.flex-end {
background: orange;
float: right;
width: -moz-max-content;
}
.center {
background: lightblue;
margin: auto;
width: -moz-max-content;
}
.baseline {
background: teal;
width: -moz-max-content;
float: left;
}
.stretch {
background: pink;
@ -50,22 +48,29 @@
.auto {
background: yellow;
margin: auto;
width: -moz-max-content;
}
.unspecified {
background: lightgreen;
margin: auto;
width: -moz-max-content;
}
.initial {
background: aqua;
margin: auto;
width: -moz-max-content;
}
.inherit {
background: violet;
float: right;
width: -moz-max-content;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. -->
.centerParent {
text-align: center;
}
.centerParent > * {
display: inline-block;
text-align: left; /* Keep parent's centering from tweaking my text */
}
</style>
</head>
@ -75,15 +80,23 @@
<div class="flex-start big">a b c d e f</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b c d e f</div>
<div class="center">center</div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div class="center big">a b c d e f</div>
<div class="baseline">base</div>
<div class="baseline big">abc</div>
<div class="stretch">stretch</div>
<div class="stretch big">a b c d e f</div>
<div class="auto">auto</div>
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="centerParent">
<div class="auto">auto</div>
</div>
<div class="centerParent">
<div class="unspecified">unspec</div>
</div>
<div class="centerParent">
<div class="initial">initial</div>
</div>
<div class="inherit">inherit</div>
<!-- Since that last div is floated right, the container doesn't include
its height by default. So we add some invisible hacky text (of the

44
layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
View File

@ -32,27 +32,31 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: left;
}
.flex-end {
background: orange;
width: -moz-max-content;
float: right;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. -->
.centerParent {
text-align: center;
}
.center {
background: lightblue;
width: -moz-max-content;
float: left;
display: inline-block;
text-align: left; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: left;
}
.stretch {
background: pink;
width: auto;
}
.clearFloats { clear: both }
</style>
</head>
<body>
@ -61,31 +65,23 @@
<div class="flex-start big">a b c d e f</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b c d e f</div>
<div style="margin: auto; width: -moz-max-content">
<div class="clearFloats"></div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div style="margin: auto; width: -moz-max-content">
<div class="centerParent">
<div class="center big">a b c d e f</div>
</div>
</div>
<!-- NOTE: I'm not using floats in this flex container, since floating
makes it harder to emulate the "stretch" behavior.
(We need to use width: auto - not width:100% - because we need to
allow space for our margins/borders/padding. And width:auto doesn't do
what we want if we're floated.)
However, since our children aren't floated, their adjacent vertical
margins will collapse by default (which doesn't match what happens in
the testcase, since margins don't collapse in a flexbox). So, we
compensate for that by bumping up the margin-top value on every
collapsed top-margin to "4px", which is the total amount of vertical
margin we're expecting between consecutive flex items in the testcase.
(4px = 3px margin-bottom + 1px margin-top)
-->
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big" style="margin-top: 4px">abc</div>
<div class="stretch" style="margin-top: 4px">stretch</div>
<div class="baseline big">abc</div>
<div class="clearFloats"></div>
<div class="stretch">stretch</div>
<!-- Force a 3px + 1px = 4px margin between this and the previous div
(to thwart the effects of margin-collapsing). This is the only
place we need this hack, because everywhere else in this test
we use floats or inline-blocks, whose margins don't collapse. -->
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
</div>
</body>

38
layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
View File

@ -22,32 +22,39 @@
width: 50px;
}
.flexbox > * {
clear: both;
}
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: left;
}
.flex-end {
background: orange;
float: right;
width: -moz-max-content;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. For this to work, the parent has to be at
least as wide as the centered content inside of it, so we make it
large with a negative margin such that its center aligns with the
4px-wide container's center. -->
.centerParent {
text-align: center;
width: 100px;
margin-left: -48px;
}
.center {
background: lightblue;
margin: auto;
width: -moz-max-content;
display: inline-block;
text-align: left; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: left;
}
.stretch {
background: pink;
}
.clearFloats { clear: both }
</style>
</head>
<body>
@ -56,20 +63,15 @@
<div class="flex-start big">a b</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b</div>
<!-- We're using auto margins as references for "align-self:center", but
auto margins only work if we've got extra space available, and we
don't have extra space available in this case. So, we create a
wide wrapper-div that _will_ have space available. We position
that wrapper-div using a negative margin, so that centering in it
is equivalent to centering in our reference for the flex container.
-->
<div style="width: 100px; margin-left: -48px">
<div class="centerParent clearFloats">
<div class="center">center</div>
</div>
<div class="centerParent">
<div class="center big">a b</div>
</div>
<div class="baseline">base</div>
<div class="baseline big">abc</div>
<div class="stretch">stretch</div>
<div class="stretch clearFloats">stretch</div>
<div class="stretch big">a b</div>
</div>
</body>

64
layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
View File

@ -34,26 +34,36 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: left;
}
.flex-end {
background: orange;
width: -moz-max-content;
float: right;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. For this to work, the parent has to be at
least as wide as the centered content inside of it, so we make it
large with a negative margin such that its center aligns with the
4px-wide container's center. -->
.centerParent {
text-align: center;
width: 100px;
margin-left: -48px;
}
.center {
background: lightblue;
width: -moz-max-content;
display: inline-block;
text-align: left; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: left;
}
.stretch {
background: pink;
width: auto;
}
.clearFloats { clear: both }
</style>
</head>
<body>
@ -61,41 +71,23 @@
<div class="flex-start">start</div>
<div class="flex-start big">a b</div>
<div class="flex-end">end</div>
<div class="flex-end big" style="margin-bottom: 4px">a b</div>
<!-- We're using auto margins as references for "align-self:center", but
auto margins only work if we've got extra space available, and we
don't have extra space available in this case. So, we create a
wide wrapper-div that _will_ have space available. We position
that wrapper-div using a negative margin, so that centering in it
is equivalent to centering in our reference for the flex container.
-->
<div style="width: 100px; margin-left: -48px">
<div style="margin: auto; width: -moz-max-content">
<div class="center">center</div>
</div>
<div style="margin: auto; width: -moz-max-content">
<div class="center big" style="margin-top: 4px">a b</div>
</div>
<div class="flex-end big">a b</div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div class="centerParent">
<div class="center big">a b</div>
</div>
</div>
<!-- NOTE: I'm not using floats in this flex container, since floating
makes it harder to emulate the "stretch" behavior.
(We need to use width: auto - not width:100% - because we need to
allow space for our margins/borders/padding. And width:auto doesn't do
what we want if we're floated.)
However, since our children aren't floated, their adjacent vertical
margins will collapse by default (which doesn't match what happens in
the testcase, since margins don't collapse in a flexbox). So, we
compensate for that by bumping up the margin-top value on every
collapsed top-margin to "4px", which is the total amount of vertical
margin we're expecting between consecutive flex items in the testcase.
(4px = 3px margin-bottom + 1px margin-top)
-->
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big" style="margin-top: 4px">abc</div>
<div class="stretch" style="margin-top: 4px">stretch</div>
<div class="baseline big">abc</div>
<div class="clearFloats"></div>
<div class="stretch">stretch</div>
<!-- Force a 3px + 1px = 4px margin between this and the previous div
(to thwart the effects of margin-collapsing). This is the only
place we need this hack, because everywhere else in this test
we use floats or inline-blocks, whose margins don't collapse. -->
<div class="stretch big" style="margin-top: 4px">a b</div>
</div>
</body>

44
layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
View File

@ -30,21 +30,19 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: right;
}
.flex-end {
background: orange;
float: left;
width: -moz-max-content;
}
.center {
background: lightblue;
margin: auto;
width: -moz-max-content;
}
.baseline {
background: teal;
width: -moz-max-content;
float: right;
}
.stretch {
background: pink;
@ -53,26 +51,29 @@
.auto {
background: yellow;
margin: auto;
width: -moz-max-content;
}
.unspecified {
background: lightgreen;
margin: auto;
width: -moz-max-content;
}
.initial {
background: aqua;
margin: auto;
width: -moz-max-content;
}
.inherit {
background: violet;
float: left;
width: -moz-max-content;
}
.hack {
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. -->
.centerParent {
text-align: center;
}
.centerParent > * {
display: inline-block;
width: 100px;
text-align: left; /* Keep parent's centering from tweaking my text */
}
</style>
</head>
@ -82,22 +83,23 @@
<div class="flex-start big">a b c d e f</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b c d e f</div>
<div class="center">center</div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div class="center big">a b c d e f</div>
<div class="baseline">base</div>
<div class="baseline big">abc</div>
<div class="stretch">stretch</div>
<div class="stretch big">a b c d e f</div>
<div class="auto">auto</div>
<!-- This particular text ("unspec") appears to trigger a slight
difference in behavior between the testcase's & reference case's
centering techniques - the "s" ends up being shifted by ~1px.
(Probably because the length of the text is a fractional amount of
pixels, or something like that.) To hack around that, we add a
fixed-width wrapper-div - we should be able to center _that_
consistently. -->
<div class="unspecified"><div class="hack">unspec</div></div>
<div class="initial">initial</div>
<div class="centerParent">
<div class="auto">auto</div>
</div>
<div class="centerParent">
<div class="unspecified">unspec</div>
</div>
<div class="centerParent">
<div class="initial">initial</div>
</div>
<div class="inherit">inherit</div>
<!-- Since that last div is floated right, the container doesn't include
its height by default. So we add some invisible hacky text (of the

13
layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
View File

@ -68,10 +68,6 @@
background: violet;
align-self: inherit;
}
.hack {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
@ -87,14 +83,7 @@
<div class="stretch">stretch</div>
<div class="stretch big">a b c d e f</div>
<div class="auto">auto</div>
<!-- This particular text ("unspec") appears to trigger a slight
difference in behavior between the testcase's & reference case's
centering techniques - the "s" ends up being shifted by ~1px.
(Probably because the length of the text is a fractional amount of
pixels, or something like that.) To hack around that, we add a
fixed-width wrapper-div - we should be able to center _that_
consistently. -->
<div class="unspecified"><div class="hack">unspec</div></div>
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="inherit">inherit</div>
</div>

44
layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
View File

@ -35,27 +35,31 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: right;
}
.flex-end {
background: orange;
width: -moz-max-content;
float: left;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. -->
.centerParent {
text-align: center;
}
.center {
background: lightblue;
width: -moz-max-content;
float: right;
display: inline-block;
text-align: right; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: right;
}
.stretch {
background: pink;
width: auto;
}
.clearFloats { clear: both }
</style>
</head>
<body>
@ -64,31 +68,23 @@
<div class="flex-start big">a b c d e f</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b c d e f</div>
<div style="margin: auto; width: -moz-max-content">
<div class="clearFloats"></div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div style="margin: auto; width: -moz-max-content">
<div class="centerParent">
<div class="center big">a b c d e f</div>
</div>
</div>
<!-- NOTE: I'm not using floats in this flex container, since floating
makes it harder to emulate the "stretch" behavior.
(We need to use width: auto - not width:100% - because we need to
allow space for our margins/borders/padding. And width:auto doesn't do
what we want if we're floated.)
However, since our children aren't floated, their adjacent vertical
margins will collapse by default (which doesn't match what happens in
the testcase, since margins don't collapse in a flexbox). So, we
compensate for that by bumping up the margin-top value on every
collapsed top-margin to "4px", which is the total amount of vertical
margin we're expecting between consecutive flex items in the testcase.
(4px = 3px margin-bottom + 1px margin-top)
-->
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big" style="margin-top: 4px">abc</div>
<div class="stretch" style="margin-top: 4px">stretch</div>
<div class="baseline big">abc</div>
<div class="clearFloats"></div>
<div class="stretch">stretch</div>
<!-- Force a 3px + 1px = 4px margin between this and the previous div
(to thwart the effects of margin-collapsing). This is the only
place we need this hack, because everywhere else in this test
we use floats or inline-blocks, whose margins don't collapse. -->
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
</div>
</body>

38
layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
View File

@ -24,32 +24,39 @@
width: 50px;
}
.flexbox > * {
clear: both;
}
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: right;
}
.flex-end {
background: orange;
float: left;
width: -moz-max-content;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. For this to work, the parent has to be at
least as wide as the centered content inside of it, so we make it
large with a negative margin such that its center aligns with the
4px-wide container's center. -->
.centerParent {
text-align: center;
width: 100px;
margin-right: -48px;
}
.center {
background: lightblue;
margin: auto;
width: -moz-max-content;
display: inline-block;
text-align: right; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: right;
}
.stretch {
background: pink;
}
.clearFloats { clear: both }
</style>
</head>
<body>
@ -58,20 +65,15 @@
<div class="flex-start big">a b</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b</div>
<!-- We're using auto margins as references for "align-self:center", but
auto margins only work if we've got extra space available, and we
don't have extra space available in this case. So, we create a
wide wrapper-div that _will_ have space available. We position
that wrapper-div using a negative margin, so that centering in it
is equivalent to centering in our reference for the flex container.
-->
<div style="width: 100px; margin-right: -48px">
<div class="centerParent clearFloats">
<div class="center">center</div>
</div>
<div class="centerParent">
<div class="center big">a b</div>
</div>
<div class="baseline">base</div>
<div class="baseline big">abc</div>
<div class="stretch">stretch</div>
<div class="stretch clearFloats">stretch</div>
<div class="stretch big">a b</div>
</div>
</body>

65
layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
View File

@ -36,66 +36,59 @@
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
width: -moz-max-content;
float: right;
}
.flex-end {
background: orange;
width: -moz-max-content;
float: left;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. For this to work, the parent has to be at
least as wide as the centered content inside of it, so we make it
large with a negative margin such that its center aligns with the
4px-wide container's center. -->
.centerParent {
text-align: center;
width: 100px;
margin-right: -48px;
}
.center {
background: lightblue;
width: -moz-max-content;
display: inline-block;
text-align: right; /* Keep parent's centering from tweaking my text */
}
.baseline {
background: teal;
width: -moz-max-content;
float: right;
}
.stretch {
background: pink;
width: auto;
}
.clearFloats { clear: both }
</style>
</head>
<body>
<!-- NOTE: I'm not using floats in this flex container, since floating
makes it harder to emulate the "stretch" behavior.
(We need to use width: auto - not width:100% - because we need to
allow space for our margins/borders/padding. And width:auto doesn't do
what we want if we're floated.)
However, since our children aren't floated, their adjacent vertical
margins will collapse by default (which doesn't match what happens in
the testcase, since margins don't collapse in a flexbox). So, we
compensate for that by bumping up the margin-top value on every
collapsed top-margin to "4px", which is the total amount of vertical
margin we're expecting between consecutive flex items in the testcase.
(4px = 3px margin-bottom + 1px margin-top)
-->
<div class="flexbox">
<div class="flex-start">start</div>
<div class="flex-start big" style="margin-top: 4px">a b</div>
<div class="stretch" style="margin-top: 4px">stretch</div>
<div class="flex-start big">a b</div>
<div class="clearFloats"></div>
<div class="stretch">stretch</div>
<!-- Force a 3px + 1px = 4px margin between this and the previous div
(to thwart the effects of margin-collapsing). This is the only
place we need this hack, because everywhere else in this test
we use floats or inline-blocks, whose margins don't collapse. -->
<div class="stretch big" style="margin-top: 4px">a b</div>
<!-- We're using auto margins as references for "align-self:center", but
auto margins only work if we've got extra space available, and we
don't have extra space available in this case. So, we create a
wide wrapper-div that _will_ have space available. We position
that wrapper-div using a negative margin, so that centering in it
is equivalent to centering in our reference for the flex container.
-->
<div style="width: 100px; margin-right: -48px">
<div style="margin: auto; width: -moz-max-content">
<div class="center" style="margin-top: 4px">center</div>
</div>
<div style="margin: auto; width: -moz-max-content">
<div class="center big" style="margin-top: 4px">a b</div>
</div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div class="centerParent">
<div class="center big">a b</div>
</div>
</div>
<div class="flexbox">
<div class="baseline">base</div>
<div class="baseline big" style="margin-top: 4px">abc</div>
<div class="baseline big">abc</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b</div>
</div>