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@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@mozilla.com"> <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@mozilla.com"> - <link rel="author" title="David Grogan" href="mailto:dgrogan@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@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@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>