зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1627125 Part 7 - Add reftests for flex containers with "box-decoration-break: clone" and unbreakable children. r=dholbert
These reftests are copied from flexbox-unbreakable-child-1-*.html and flexbox-unbreakable-child-1-*-wrap.html with "box-decoration-break: clone" added to the flex container. Note that flexbox-unbreakable-child-3-ref.html is redesigned. It is not copied from flexbox-unbreakable-child-1-ref.html with "box-decoration-break: clone" added because the bottom border doesn't show up in sub-test 3 & 4. (bug 1564726 perhaps?) Differential Revision: https://phabricator.services.mozilla.com/D69475
This commit is contained in:
Ting-Yu Lin
Родитель
9414e316e9
Коммит
71de052a6a
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
position: relative;
|
||||
}
|
||||
.flexContainer {
|
||||
width: 40px;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.continuation {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
<div class="flexContainer continuation" style="height: 0px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
<div class="flexContainer continuation" style="height: 0px"></div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
<div class="flexContainer continuation" style="height: 4px"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row",
|
||||
"flex-wrap: wrap", and "box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row" and
|
||||
"box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row-reverse",
|
||||
"flex-wrap: wrap" and "box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row-reverse" and
|
||||
"box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column",
|
||||
"flex-wrap: wrap", and "box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column" and
|
||||
"box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column-reverse",
|
||||
"flex-wrap: wrap" and "box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column-reverse" and
|
||||
"box-decoration-break: clone".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
column-width: 30px;
|
||||
column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-end;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -28,3 +28,14 @@ fuzzy-if(Android&&webrender,0-128,0-10) == flexbox-empty-2d.html flexbox-empty-2
|
|||
== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html
|
||||
|
||||
# Tests for how we fragment a flex container with one unbreakable child and
|
||||
# "box-decoration-break: clone"
|
||||
== flexbox-unbreakable-child-3a.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3a-wrap.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3b.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3b-wrap.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3c.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3c-wrap.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3d.html flexbox-unbreakable-child-3-ref.html
|
||||
== flexbox-unbreakable-child-3d-wrap.html flexbox-unbreakable-child-3-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче