mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-30 00:01:50 +00:00
Bug 948654: Uncomment lines to make 'align-content' and 'flex-wrap' inherit through scroll frames to scrolled flex containers. r=mats
--HG-- rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5.html
This commit is contained in:
Daniel Holbert
parent
62542a3d51
commit
e407ed515a
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden > .bigItem {
|
||||
/* To match the testcase's "overflow:hidden"-cropped flex item, we
|
||||
just use a smaller height that exactly fits the space remaining
|
||||
in our container, after wrapping */
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- This testcase checks that we honor "flex-wrap" on a horizontal
|
||||
flex container that has "overflow:hidden". We use a large flex item,
|
||||
large enough that it overflows the container in the cross axis, to be
|
||||
sure that "overflow: hidden" is actually applying. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-overflow-horiz-4-ref.html">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden { overflow: hidden }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
flex: none; /* prevent shrinking (so we can intentionally overflow) */
|
||||
width: 72px;
|
||||
height: 20px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden > .bigItem {
|
||||
/* To match the testcase's "overflow:hidden"-cropped flex item, we
|
||||
just use a smaller width that exactly fits our container (and
|
||||
doesn't overflow). */
|
||||
width: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- This testcase checks that we honor "align-content" on a horizontal
|
||||
flex container that has "overflow:hidden". We use a large flex item,
|
||||
large enough that it overflows the container in the main axis, to be
|
||||
sure that "overflow: hidden" is actually applying. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property">
|
||||
<link rel="match" href="flexbox-overflow-horiz-5-ref.html">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
flex: none; /* prevent shrinking (so we can intentionally overflow) */
|
||||
width: 72px;
|
||||
height: 20px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden { overflow: hidden }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
}
|
||||
.hidden > .bigItem {
|
||||
/* To match the testcase's "overflow:hidden"-cropped flex item, we
|
||||
just use a smaller width that exactly fits the space remaining
|
||||
in our container, after wrapping */
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- This testcase checks that we honor "flex-wrap" on a vertical
|
||||
flex container that has "overflow:hidden". We use a large flex item,
|
||||
large enough that it overflows the container in the cross axis, to be
|
||||
sure that "overflow: hidden" is actually applying. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-overflow-vert-4-ref.html">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
}
|
||||
.hidden { overflow: hidden }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="smallItem"></div>
|
||||
<div class="bigItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
flex: none; /* prevent shrinking (so we can intentionally overflow) */
|
||||
width: 20px;
|
||||
height: 72px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden > .bigItem {
|
||||
/* To match the testcase's "overflow:hidden"-cropped flex item, we
|
||||
just use a smaller height that exactly fits our container (and
|
||||
doesn't overflow). */
|
||||
height: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- This testcase checks that we honor "align-content" on a vertical
|
||||
flex container that has "overflow:hidden". We use a large flex item,
|
||||
large enough that it overflows the container in the main axis, to be
|
||||
sure that "overflow: hidden" is actually applying. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property">
|
||||
<link rel="match" href="flexbox-overflow-vert-5-ref.html">
|
||||
<style>
|
||||
.flexContainer {
|
||||
background: purple;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bigItem {
|
||||
background: blue;
|
||||
flex: none; /* prevent shrinking (so we can intentionally overflow) */
|
||||
width: 20px;
|
||||
height: 72px;
|
||||
}
|
||||
.smallItem {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.hidden { overflow: hidden }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><!-- (overflow un-set) -->
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer hidden">
|
||||
<div class="bigItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -106,9 +106,13 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml flexbox-align-s
|
||||
== flexbox-overflow-horiz-1.html flexbox-overflow-horiz-1-ref.html
|
||||
== flexbox-overflow-horiz-2.html flexbox-overflow-horiz-2-ref.html
|
||||
== flexbox-overflow-horiz-3.html flexbox-overflow-horiz-3-ref.html
|
||||
== flexbox-overflow-horiz-4.html flexbox-overflow-horiz-4-ref.html
|
||||
== flexbox-overflow-horiz-5.html flexbox-overflow-horiz-5-ref.html
|
||||
== flexbox-overflow-vert-1.html flexbox-overflow-vert-1-ref.html
|
||||
== flexbox-overflow-vert-2.html flexbox-overflow-vert-2-ref.html
|
||||
== flexbox-overflow-vert-3.html flexbox-overflow-vert-3-ref.html
|
||||
== flexbox-overflow-vert-4.html flexbox-overflow-vert-4-ref.html
|
||||
== flexbox-overflow-vert-5.html flexbox-overflow-vert-5-ref.html
|
||||
|
||||
# Tests for the order in which we paint flex items
|
||||
== flexbox-paint-ordering-1.xhtml flexbox-paint-ordering-1-ref.xhtml
|
||||
|
||||
@ -142,10 +142,10 @@
|
||||
-moz-column-gap: inherit;
|
||||
-moz-column-rule: inherit;
|
||||
/* CSS3 flexbox properties that apply to the flex container: */
|
||||
/* align-content: inherit; FIXME: not yet supported (bug 702508) */
|
||||
align-content: inherit;
|
||||
align-items: inherit;
|
||||
flex-direction: inherit;
|
||||
/* flex-wrap: inherit; FIXME: not yet supported (bug 702508) */
|
||||
flex-wrap: inherit;
|
||||
justify-content: inherit;
|
||||
/* Do not change these. nsCSSFrameConstructor depends on them to create a good
|
||||
frame tree. */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user