mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1543267 Part 1 - Make 'stretch' fallback to 'flex-start' for flexbox's abspos children. r=dholbert 

In Flexbox spec 4.1, Example 3 [1]:
   ... since the absolutely-positioned box is considered to be
   "fixed-size", a value of stretch is treated the same as flex-start.

Also, per Alignment 3 spec [2]:
  The default fallback alignment for 'stretch' is 'flex-start'.

Thus, when computing the alignment for flexbox's abspos children in
CSSAlignmentForAbsPosChild(), we convert 'stretch' to 'flex-start', and let the
subsequent logic convert 'flex-start' to either 'start' or 'end', because
nsAbsoluteContainingBlock don't know how to deal with the flex-relative axis.

This patch makes us behave the same as Google Chrome on the modified testcases.

[1] https://drafts.csswg.org/css-flexbox/#abspos-items
[2] https://drafts.csswg.org/css-align/#valdef-align-content-stretch

Differential Revision: https://phabricator.services.mozilla.com/D134543
This commit is contained in:
Ting-Yu Lin 2021-12-23 02:08:03 +00:00
Родитель a1ab1d2f8f
Коммит 2d47a61355
11 изменённых файлов: 124 добавлений и 261 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

12
layout/generic/nsFlexContainerFrame.cpp
Просмотреть файл

@ -1317,6 +1317,11 @@ StyleAlignFlags nsFlexContainerFrame::CSSAlignmentForAbsPosChild(
}
}
if (alignment == StyleAlignFlags::STRETCH) {
// The default fallback alignment for 'stretch' is 'flex-start'.
alignment = StyleAlignFlags::FLEX_START;
}
// Resolve flex-start, flex-end, auto, left, right, baseline, last baseline;
if (alignment == StyleAlignFlags::FLEX_START) {
alignment = isAxisReversed ? StyleAlignFlags::END : StyleAlignFlags::START;
@ -1332,6 +1337,13 @@ StyleAlignFlags nsFlexContainerFrame::CSSAlignmentForAbsPosChild(
alignment = StyleAlignFlags::END;
}
MOZ_ASSERT(alignment != StyleAlignFlags::STRETCH,
"We should've converted 'stretch' to the fallback alignment!");
MOZ_ASSERT(alignment != StyleAlignFlags::FLEX_START &&
alignment != StyleAlignFlags::FLEX_END,
"nsAbsoluteContainingBlock doesn't know how to handle "
"flex-relative axis for flex containers!");
return (alignment | alignmentFlags);
}

4
testing/web-platform/meta/css/css-flexbox/abspos/position-absolute-002.html.ini
Просмотреть файл

@ -1,4 +0,0 @@
[position-absolute-002.html]
[.flexbox 5]
expected: FAIL

145
testing/web-platform/meta/css/css-flexbox/abspos/position-absolute-013.html.ini
Просмотреть файл

@ -1,145 +0,0 @@
[position-absolute-013.html]
[.flexbox 99]
expected: FAIL
[.flexbox 102]
expected: FAIL
[.flexbox 105]
expected: FAIL
[.flexbox 108]
expected: FAIL
[.flexbox 111]
expected: FAIL
[.flexbox 114]
expected: FAIL
[.flexbox 117]
expected: FAIL
[.flexbox 120]
expected: FAIL
[.flexbox 123]
expected: FAIL
[.flexbox 126]
expected: FAIL
[.flexbox 129]
expected: FAIL
[.flexbox 132]
expected: FAIL
[.flexbox 135]
expected: FAIL
[.flexbox 138]
expected: FAIL
[.flexbox 141]
expected: FAIL
[.flexbox 144]
expected: FAIL
[.flexbox 243]
expected: FAIL
[.flexbox 246]
expected: FAIL
[.flexbox 249]
expected: FAIL
[.flexbox 252]
expected: FAIL
[.flexbox 255]
expected: FAIL
[.flexbox 258]
expected: FAIL
[.flexbox 261]
expected: FAIL
[.flexbox 264]
expected: FAIL
[.flexbox 267]
expected: FAIL
[.flexbox 270]
expected: FAIL
[.flexbox 273]
expected: FAIL
[.flexbox 276]
expected: FAIL
[.flexbox 279]
expected: FAIL
[.flexbox 282]
expected: FAIL
[.flexbox 285]
expected: FAIL
[.flexbox 288]
expected: FAIL
[.flexbox 387]
expected: FAIL
[.flexbox 390]
expected: FAIL
[.flexbox 393]
expected: FAIL
[.flexbox 396]
expected: FAIL
[.flexbox 399]
expected: FAIL
[.flexbox 402]
expected: FAIL
[.flexbox 405]
expected: FAIL
[.flexbox 408]
expected: FAIL
[.flexbox 411]
expected: FAIL
[.flexbox 414]
expected: FAIL
[.flexbox 417]
expected: FAIL
[.flexbox 420]
expected: FAIL
[.flexbox 423]
expected: FAIL
[.flexbox 426]
expected: FAIL
[.flexbox 429]
expected: FAIL
[.flexbox 432]
expected: FAIL

8
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html
Просмотреть файл

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>

8
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html
Просмотреть файл

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>

8
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html
Просмотреть файл

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y=""></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>

8
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html
Просмотреть файл

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>

48
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html
Просмотреть файл

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>

48
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html
Просмотреть файл

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>

48
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html
Просмотреть файл

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>

48
testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html
Просмотреть файл

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>