Skip to content
Snippets Groups Projects
Commit f6b1fcff authored by Ting-Yu Lin's avatar Ting-Yu Lin
Browse files

Bug 1743890 Part 3 - Add more web-platform tests. r=dholbert 

Tests failed:

- single-line-column-flex-fragmentation-062.html is adapted from
  single-line-column-flex-fragmentation-061.html, with flex-direction value
  changed from column to column-reverse.

- multi-line-row-flex-fragmentation-073.html is adapted from
  multi-line-row-flex-fragmentation-072.html, with flex-wrap value
  changed from wrap to wrap-reverse.

Tests passed with Part 2.

- single-line-column-flex-fragmentation-063.html tests `justify-content: end` so
  that there are empty flex container fragments at the beginning of the columns.

- single-line-column-flex-fragmentation-064.html tests `justify-content: space-between` so
  that there are empty flex container fragments in the middle columns.

- multi-line-row-flex-fragmentation-074.html tests `align-content: space-between;` so
  that there are empty flex container fragments in the middle columns.

- multi-line-row-flex-fragmentation-075-print.html and
  multi-line-row-flex-fragmentation-076-print.html are adapted from Daniel
  Holbert's testcase in bug 1743890 comment 18, testing a item shift bug occurred
  in Part 2 WIP.

- single-line-row-flex-fragmentation-043.html tests `align-self: start` and
  `align-self: end` on items so that there are empty flex container fragments in
  the middle columns.

Differential Revision: https://phabricator.services.mozilla.com/D167978
parent f3117a69
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 572 additions and 0 deletions
testing/web-platform/meta/css/css-break/flexbox/multi-line-row-flex-fragmentation-073.html.ini 0 → 100644
+ 3
− 0
View file @ f6b1fcff
[multi-line-row-flex-fragmentation-073.html]
expected: FAIL
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1812485
testing/web-platform/meta/css/css-break/flexbox/single-line-column-flex-fragmentation-062.html.ini 0 → 100644
+ 3
− 0
View file @ f6b1fcff
[single-line-column-flex-fragmentation-062.html]
expected: FAIL
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1812485
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-072.html 0 → 100644
+ 44
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
background: red;
inline-size: 100px;
block-size: 100px;
}
.flexbox {
display: flex;
flex-wrap: wrap;
row-gap: 5px;
font: 40px/1 Ahem;
background: green;
color: green;
border: solid green;
border-width: 15px 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 50px; height: 20px; background: green;"></div>
<div class="flexbox">
<div>X</div>
<div>X</div> <!-- The second item should be at the top of the second column. -->
<div>X</div>
</div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-073.html 0 → 100644
+ 44
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
background: red;
inline-size: 100px;
block-size: 100px;
}
.flexbox {
display: flex;
flex-wrap: wrap-reverse;
row-gap: 5px;
font: 40px/1 Ahem;
background: green;
color: green;
border: solid green;
border-width: 15px 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 50px; height: 20px; background: green;"></div>
<div class="flexbox">
<div>X</div>
<div>X</div> <!-- The second item should be at the top of the second column. -->
<div>X</div>
</div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-074.html 0 → 100644
+ 51
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0;
column-fill: auto;
background: red;
width: 100px;
height: 100px;
}
.multicol > div {
background: green;
}
.flexbox {
display: flex;
flex-wrap: wrap;
height: 280px;
border: 5px solid green;
align-content: space-between;
}
.flexbox > div {
contain: size;
width: 95%; /* one flex item per line */
height: 40px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 100%; height: 50px; background: green;"></div>
<div class="flexbox">
<div></div>
<div></div>
</div>
<div style="width: 100%; height: 60px; background: green;"></div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print-ref.html 0 → 100644
+ 50
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
@page { size: 5in 3in; margin: 0.5in; }
body { margin: 0; }
.flexbox {
border: 0.25in solid black;
font-size: 0.25in;
height: 3in;
}
.flexbox > div {
position: relative;
}
.item {
position: absolute;
contain: size;
box-sizing: border-box;
border: 4px solid purple;
width: 25%;
height: 0.5in;
}
</style>
<!-- This div makes the flexbox not at the top of first page. -->
<div style="height: 0.25in; background: gray;"></div>
<div class="flexbox">
<div style="height: 1.5in;">
<div class="item" style="top: 1in">1</div>
<div class="item" style="left: 25%;">2</div>
</div>
<div style="height: 1in;">
<div class="item" style="left: 50%; height: 1in;">3</div>
<div class="item" style="left: 75%;">4</div>
</div>
<div>
<div class="item">5</div>
<div class="item" style="left: 25%">6</div>
<div class="item" style="left: 50%">7</div>
<div class="item" style="left: 75%">8</div>
</div>
</div>
<div style="height: 0.25in; background: gray;"></div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print.html 0 → 100644
+ 45
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<!-- This is a multi-line extension of: single-line-row-flex-fragmentation-042-print.html -->
<html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="multi-line-row-flex-fragmentation-075-print-ref.html">
<style>
@page { size: 5in 3in; margin: 0.5in; }
body { margin: 0; }
.flexbox {
display: flex;
border: 0.25in solid black;
font-size: 0.25in;
flex-flow: row wrap;
}
.item {
contain: size;
box-sizing: border-box;
border: 4px solid purple;
width: 25%;
height: 0.5in;
}
</style>
<!-- This div makes the flexbox not at the top of first page. -->
<div style="height: 0.25in; background: gray;"></div>
<div class="flexbox">
<div class="item" style="margin-top: 1in;">1</div>
<div class="item">2</div>
<div class="item" style="margin-top: 1in; height: 1in;">3</div>
<div class="item" style="align-self: flex-end;">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div style="height: 0.25in; background: gray;"></div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print-ref.html 0 → 100644
+ 50
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
@page { size: 5in 3in; margin: 0.5in; }
body { margin: 0; }
.flexbox {
border: 0.25in solid black;
font-size: 0.25in;
height: 3in;
}
.flexbox > div {
position: relative;
}
.item {
position: absolute;
contain: size;
box-sizing: border-box;
border: 4px solid purple;
width: 25%;
height: 0.5in;
}
</style>
<!-- This div makes the flexbox not at the top of first page. -->
<div style="height: 0.25in; background: gray;"></div>
<div class="flexbox">
<div style="height: 1.5in;">
<div class="item" style="top: 0.5in">1</div>
<div class="item" style="left: 25%;">2</div>
</div>
<div style="height: 1in;">
<div class="item" style="left: 50%; height: 1in;">3</div>
<div class="item" style="left: 75%; top: 0.5in">4</div>
</div>
<div>
<div class="item">5</div>
<div class="item" style="left: 25%">6</div>
<div class="item" style="left: 50%">7</div>
<div class="item" style="left: 75%">8</div>
</div>
</div>
<div style="height: 0.25in; background: gray;"></div>
</html>
testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print.html 0 → 100644
+ 45
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<!-- This is a multi-line extension of: single-line-row-flex-fragmentation-042-print.html -->
<html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="multi-line-row-flex-fragmentation-076-print-ref.html">
<style>
@page { size: 5in 3in; margin: 0.5in; }
body { margin: 0; }
.flexbox {
display: flex;
border: 0.25in solid black;
font-size: 0.25in;
flex-flow: row wrap;
}
.item {
contain: size;
box-sizing: border-box;
border: 4px solid purple;
width: 25%;
height: 0.5in;
}
</style>
<!-- This div makes the flexbox not at the top of first page. -->
<div style="height: 0.25in; background: gray;"></div>
<div class="flexbox">
<div class="item" style="margin-top: 0.5in;">1</div>
<div class="item">2</div>
<div class="item" style="margin-top: 1in; height: 1in;">3</div>
<div class="item" style="margin-top: 2in;">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div style="height: 0.25in; background: gray;"></div>
</html>
testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-061.html 0 → 100644
+ 44
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
background: red;
inline-size: 100px;
block-size: 100px;
}
.flexbox {
display: flex;
flex-direction: column;
row-gap: 5px;
font: 40px/1 Ahem;
background: green;
color: green;
border: solid green;
border-width: 15px 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 50px; height: 20px; background: green;"></div>
<div class="flexbox">
<div>X</div>
<div>X</div> <!-- The second item should be at the top of the second column. -->
<div>X</div>
</div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-062.html 0 → 100644
+ 44
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
background: red;
width: 100px;
height: 100px;
}
.flexbox {
display: flex;
flex-direction: column-reverse;
row-gap: 5px;
font: 40px/1 Ahem;
background: green;
color: green;
border: solid green;
border-width: 15px 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 50px; height: 20px; background: green;"></div>
<div class="flexbox">
<div>X</div>
<div>X</div> <!-- The second item should be at the top of the second column. -->
<div>X</div>
</div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-063.html 0 → 100644
+ 49
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0;
column-fill: auto;
background: red;
width: 100px;
height: 100px;
}
.multicol > div {
background: green;
}
.flexbox {
display: flex;
flex-direction: column;
height: 340px;
border: 5px solid green;
justify-content: end;
}
.flexbox > div {
contain: size;
width: 15px;
height: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 50px; height: 50px;"></div>
<div class="flexbox">
<div></div>
<div></div>
</div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-064.html 0 → 100644
+ 51
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0;
column-fill: auto;
background: red;
width: 100px;
height: 100px;
}
.multicol > div {
background: green;
}
.flexbox {
display: flex;
flex-direction: column;
height: 280px;
justify-content: space-between;
border: 5px solid green;
}
.flexbox > div {
contain: size;
width: 15px;
height: 40px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 100%; height: 50px;"></div>
<div class="flexbox">
<div></div>
<div></div>
</div>
<div style="width: 100%; height: 60px;"></div>
</div>
</html>
testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-043.html 0 → 100644
+ 49
− 0
View file @ f6b1fcff
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0;
column-fill: auto;
background: red;
width: 100px;
height: 100px;
}
.multicol > div {
background: green;
}
.flexbox {
display: flex;
height: 280px;
border: 5px solid green;
}
.flexbox > div {
contain: size;
width: 50%;
height: 40px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<!-- This div makes the flexbox not at the top of first column. -->
<div style="width: 100%; height: 50px"></div>
<div class="flexbox">
<div style="align-self: start"></div>
<div style="align-self: end"></div>
</div>
<div style="width: 100%; height: 60px"></div>
</div>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment