[tbb-commits] [tor-browser] 24/36: Bug 1786910: Ignore 'align-content' when determining the aligned static position of abspos flex children. r=TYLin a=RyanVM
gitolite role
git at cupani.torproject.org
Thu Oct 13 07:51:12 UTC 2022
This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to annotated tag FIREFOX_102_4_0esr_BUILD1
in repository tor-browser.
commit 4d1d82153e0998374bf9946a1c043d9e7d5ec84b
Author: Daniel Holbert <dholbert at cs.stanford.edu>
AuthorDate: Mon Sep 19 20:36:05 2022 +0000
Bug 1786910: Ignore 'align-content' when determining the aligned static position of abspos flex children. r=TYLin a=RyanVM
Before this patch, we honored `align-content` (in combination with
`align-self`) for cross-axis alignment for abspos flex children **in cases
where the flex container was multi-line**. This was a bit weird, but was
required by the spec, and made some sense in the spirit of aligning the abspos
box as if it were the sole flex item in a flex container.
Now the CSSWG has resolved in [1] to simplify things by just ignoring
`align-content` for abspos flex children. So, this patch updates us in
accordance with this change. Such items now only have to look at `align-self`
for cross-axis alignment to determine their static position in their flex
container.
Before this commit, we had a bunch of WPT tests to check the impact of every
align-content value, with all of the various flavors of directionality. Now
that align-content has *no effect* in any of these cases, all of these tests
become pretty trivial and redundant. Rather than carrying them all forward
with trivial "no impact" expectations for each scenario, I've just updated the
first/simplest such test to expect no-behavioral-impact and I've removed the
rest.
[1] https://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646
Differential Revision: https://phabricator.services.mozilla.com/D157571
---
layout/generic/nsFlexContainerFrame.cpp | 46 ++++-----
.../flex-abspos-staticpos-align-content-001.html | 36 +++----
.../flex-abspos-staticpos-align-content-002.html | 106 --------------------
.../flex-abspos-staticpos-align-content-003.html | 106 --------------------
.../flex-abspos-staticpos-align-content-004.html | 106 --------------------
.../flex-abspos-staticpos-align-content-005.html | 106 --------------------
.../flex-abspos-staticpos-align-content-006.html | 106 --------------------
.../flex-abspos-staticpos-align-content-007.html | 106 --------------------
.../flex-abspos-staticpos-align-content-008.html | 106 --------------------
...lex-abspos-staticpos-align-content-rtl-001.html | 107 ---------------------
...lex-abspos-staticpos-align-content-rtl-002.html | 107 ---------------------
...-abspos-staticpos-align-content-vertWM-001.html | 107 ---------------------
...-abspos-staticpos-align-content-vertWM-002.html | 107 ---------------------
...s-staticpos-fallback-align-content-001-ref.html | 87 -----------------
...bspos-staticpos-fallback-align-content-001.html | 76 ---------------
15 files changed, 38 insertions(+), 1377 deletions(-)
diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp
index 90da61059ba5..134a3d2d135b 100644
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1278,36 +1278,30 @@ StyleAlignFlags nsFlexContainerFrame::CSSAlignmentForAbsPosChild(
StyleAlignFlags alignment{0};
StyleAlignFlags alignmentFlags{0};
if (isMainAxis) {
+ // We're aligning in the main axis: align according to 'justify-content'.
+ // (We don't care about justify-self; it has no effect on children of flex
+ // containers, unless https://github.com/w3c/csswg-drafts/issues/7644
+ // changes that.)
alignment = SimplifyAlignOrJustifyContentForOneItem(
containerStylePos->mJustifyContent,
/*aIsAlign = */ false);
} else {
- const StyleAlignFlags alignContent =
- SimplifyAlignOrJustifyContentForOneItem(
- containerStylePos->mAlignContent,
- /*aIsAlign = */ true);
- if (StyleFlexWrap::Nowrap != containerStylePos->mFlexWrap &&
- alignContent != StyleAlignFlags::STRETCH) {
- // Multi-line, align-content isn't stretch --> align-content determines
- // this child's alignment in the cross axis.
- alignment = alignContent;
- } else {
- // Single-line, or multi-line but the (one) line stretches to fill
- // container. Respect align-self.
- alignment = aChildRI.mStylePosition->UsedAlignSelf(Style())._0;
- // Extract and strip align flag bits
- alignmentFlags = alignment & StyleAlignFlags::FLAG_BITS;
- alignment &= ~StyleAlignFlags::FLAG_BITS;
-
- if (alignment == StyleAlignFlags::NORMAL) {
- // "the 'normal' keyword behaves as 'start' on replaced
- // absolutely-positioned boxes, and behaves as 'stretch' on all other
- // absolutely-positioned boxes."
- // https://drafts.csswg.org/css-align/#align-abspos
- alignment = aChildRI.mFrame->IsFrameOfType(nsIFrame::eReplaced)
- ? StyleAlignFlags::START
- : StyleAlignFlags::STRETCH;
- }
+ // We're aligning in the cross axis: align according to 'align-self'.
+ // (We don't care about align-content; it has no effect on abspos flex
+ // children, per https://github.com/w3c/csswg-drafts/issues/7596 )
+ alignment = aChildRI.mStylePosition->UsedAlignSelf(Style())._0;
+ // Extract and strip align flag bits
+ alignmentFlags = alignment & StyleAlignFlags::FLAG_BITS;
+ alignment &= ~StyleAlignFlags::FLAG_BITS;
+
+ if (alignment == StyleAlignFlags::NORMAL) {
+ // "the 'normal' keyword behaves as 'start' on replaced
+ // absolutely-positioned boxes, and behaves as 'stretch' on all other
+ // absolutely-positioned boxes."
+ // https://drafts.csswg.org/css-align/#align-abspos
+ alignment = aChildRI.mFrame->IsFrameOfType(nsIFrame::eReplaced)
+ ? StyleAlignFlags::START
+ : StyleAlignFlags::STRETCH;
}
}
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
index b1c22ba74f7d..6e99510cd13a 100644
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
+++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
@@ -9,6 +9,7 @@
<link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+ <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646">
<meta charset="utf-8">
<style>
.container {
@@ -38,10 +39,9 @@
background: teal;
height: 6px;
width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
+ /* This "align-self" is actually the only alignment that matters here.
+ The flex containers' various "align-content" values have no impact on
+ the positioning of absolutely-positioned flex children. */
align-self: center;
}
</style>
@@ -57,23 +57,23 @@
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
+ <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
+ <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+ <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
+ <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="3"></div></div>
+ <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
+ <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="3"></div></div>
+ <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
</div>
<div class="small">
@@ -83,23 +83,23 @@
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
+ <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
+ <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+ <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+ <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-1"></div></div>
+ <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+ <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-1"></div></div>
+ <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
</div>
</body>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html
deleted file mode 100644
index cc94b9eb5e12..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: row wrap-reverse;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html
deleted file mode 100644
index f0f163cf838c..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: row-reverse wrap;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html
deleted file mode 100644
index 74ccc0c527a7..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: row-reverse wrap-reverse;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html
deleted file mode 100644
index ac48584bf852..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column wrap;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html
deleted file mode 100644
index e9be819b490a..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column wrap-reverse;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html
deleted file mode 100644
index 0b6f8123c32d..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column-reverse wrap;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="5"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html
deleted file mode 100644
index 37812f59dffb..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column-reverse wrap-reverse;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="5"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html
deleted file mode 100644
index 214c2670cfa3..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: row wrap;
- direction: rtl;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html
deleted file mode 100644
index 2dfc20a9a18e..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column wrap;
- direction: rtl;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html
deleted file mode 100644
index d983b501f292..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: row wrap;
- writing-mode: vertical-rl;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html
deleted file mode 100644
index a24247185f84..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="author" title="David Grogan" href="mailto:dgrogan at chromium.org">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- position: relative;
- flex-flow: column wrap;
- writing-mode: vertical-rl;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- /* This "align-self" only gets a chance to take effect when our container
- has "align-content: stretch". In that case, it helps us verify that
- the container's "align-content: stretch" is actually taking effect
- and stretching the flex line (and giving us space to center in). */
- align-self: center;
- }
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('.container > div')">
- <div class="big">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
- <br>
- </div>
- <div class="small">
- <!-- The various align-content values, from
- https://www.w3.org/TR/css-align-3/#propdef-align-content -->
- <!-- normal -->
- <div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <baseline-position> -->
- <div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-distribution> -->
- <div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <br>
- <!-- <content-position>, part 1 -->
- <div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
- <div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- <!-- <content-position>, part 2 -->
- <div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
- <div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-ref.html
deleted file mode 100644
index ec0d6cc41278..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-ref.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Reference</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <meta charset="utf-8">
- <style>
- .container {
- display: block;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- background: teal;
- height: 6px;
- width: 8px;
- }
- .big .alignStart { /* nothing special */ }
- .big .alignCenter { margin-top: 2px }
- .big .alignEnd { margin-top: 4px }
- .small .alignStart { /* nothing special */ }
- .small .alignCenter { margin-top: -2px }
- .small .alignEnd { margin-top: -4px }
- </style>
-</head>
-<body>
- <div class="big">
- <!-- <content-distribution> with implied fallback -->
- <div class="container"><div class="alignStart"><!--space-between--></div></div>
- <div class="container"><div class="alignCenter"><!--space-around--></div></div>
- <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
- <div class="container"><div class="alignStart"><!--stretch--></div></div>
- <br>
- <!-- <content-distribution> with explicit "flex-end" fallback -->
- <div style="display: none">
- <!--
- These tests will be valid when
- https://github.com/w3c/csswg-drafts/issues/1002 is fixed
- -->
- <div class="container"><div class="alignEnd"><!--space-between--></div></div>
- <div class="container"><div class="alignEnd"><!--space-around--></div></div>
- <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
- <div class="container"><div class="alignEnd"><!--stretch--></div></div>
- </div>
- <br>
- </div>
- <div class="small">
- <!-- <content-distribution> with implied fallback -->
- <div class="container"><div class="alignStart"><!--space-between--></div></div>
- <div class="container"><div class="alignCenter"><!--space-around--></div></div>
- <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
- <div class="container"><div class="alignStart"><!--stretch--></div></div>
- <br>
- <!-- <content-distribution> with explicit "flex-end" fallback -->
- <div style="display: none">
- <!--
- These tests will be valid when
- https://github.com/w3c/csswg-drafts/issues/1002 is fixed
- -->
- <div class="container"><div class="alignEnd"><!--space-between--></div></div>
- <div class="container"><div class="alignEnd"><!--space-around--></div></div>
- <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
- <div class="container"><div class="alignEnd"><!--stretch--></div></div>
- </div>
- <br>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html
deleted file mode 100644
index 80dd2f68f951..000000000000
--- a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
- <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title>
- <link rel="author" title="Daniel Holbert" href="mailto:dholbert at mozilla.com">
- <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
- <link rel="match" href="flex-abspos-staticpos-fallback-align-content-001-ref.html">
- <meta charset="utf-8">
- <style>
- .container {
- display: flex;
- flex-flow: row wrap;
- padding: 1px 2px;
- border: 1px solid black;
- background: yellow;
- margin-bottom: 5px;
- margin-right: 5px;
- float: left; /* For testing in "rows" of containers */
- }
- br { clear: both }
-
- .big > .container {
- height: 10px;
- width: 16px;
- }
- .small > .container {
- height: 2px;
- width: 4px;
- }
-
- .container > * {
- position: absolute;
- background: teal;
- height: 6px;
- width: 8px;
- }
- </style>
-</head>
-<body>
- <div class="big">
- <!-- <content-distribution> with implied fallback -->
- <div class="container" style="align-content: space-between"><div></div></div>
- <div class="container" style="align-content: space-around"><div></div></div>
- <div class="container" style="align-content: space-evenly"><div></div></div>
- <div class="container" style="align-content: stretch"><div></div></div>
- <br>
- <!-- <content-distribution> with explicit "flex-end" fallback -->
- <!--
- <div class="container" style="align-content: space-between flex-end"><div></div></div>
- <div class="container" style="align-content: space-around flex-end"><div></div></div>
- <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
- <div class="container" style="align-content: stretch flex-end"><div></div></div>
- -->
- <br>
- </div>
- <div class="small">
- <!-- <content-distribution> with implied fallback -->
- <div class="container" style="align-content: space-between"><div></div></div>
- <div class="container" style="align-content: space-around"><div></div></div>
- <div class="container" style="align-content: space-evenly"><div></div></div>
- <div class="container" style="align-content: stretch"><div></div></div>
- <br>
- <!-- <content-distribution> with explicit "flex-end" fallback -->
- <!--
- <div class="container" style="align-content: space-between flex-end"><div></div></div>
- <div class="container" style="align-content: space-around flex-end"><div></div></div>
- <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
- <div class="container" style="align-content: stretch flex-end"><div></div></div>
- -->
- </div>
-</body>
-</html>
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the tbb-commits
mailing list