| author | Daniel Holbert <dholbert@cs.stanford.edu> |
| Fri, 22 Mar 2013 08:13:50 -0700 | |
| changeset 125929 | 1d7b2eafeebcd7863173737b09a9d29a3c1e5813 |
| parent 125928 | 472f6793e512f9c585b648801970a3607bbfecb3 |
| child 125930 | 2250dcdfd268527df615e7017eb4125981f3d524 |
| push id | 25173 |
| push user | dholbert@mozilla.com |
| push date | Fri, 22 Mar 2013 15:14:44 +0000 |
| treeherder | mozilla-inbound@1d7b2eafeebc [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | bz |
| bugs | 782441 |
| milestone | 22.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + display: inline-block; + height: 200px; + width: 75%; + float: left; + } + .smallItem { + background: teal; + width: 25%; + /* In the testcase, we'll stretch to container's height, + minus our 10px margin-bottom. */ + height: calc(100% - 10px); + float: left; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .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> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle the "overflow" property on + a horizontal flex container with overflowing contents. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 200px; + flex: 3; + } + .smallItem { + background: teal; + margin-bottom: 10px; + flex: 1; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .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> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-2-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + align-items: center; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 50px 2px; + flex: 3; + } + .smallItem { + background: teal; + height: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 30px 2px; + } + </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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-2.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-items" on a horizontal + flex container that has "overflow: hidden". We use a huge border on + one of the flex items, large enough that it overflows the container, + to be sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + align-items: center; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 50px 2px; + flex: 3; + } + .smallItem { + background: teal; + height: 20px; + flex: 1; + } + .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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-3-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + justify-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 20px; + height: 200px; + } + .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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-horiz-3.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "justify-content" on a horizontal + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container, to be sure that + "overflow: hidden" is actually applying. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + justify-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 20px; + height: 200px; + } + .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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-1-ref.html @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + width: 200px; + background: blue; + height: 75%; + } + .smallItem { + background: teal; + margin-right: 10px; + height: 25%; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .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> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle the "overflow" property on + a vertical flex container with overflowing contents. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + flex: 3; + } + .smallItem { + background: teal; + margin-right: 10px; + flex: 1; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .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> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-2-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + align-items: center; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 2px 50px; + flex: 3; + } + .smallItem { + background: teal; + width: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 2px 30px; + } + </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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-2.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-items" on a vertical + flex container that has "overflow: hidden". We use a huge border on + one of the flex items, large enough that it overflows the container, + to be sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + align-items: center; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 2px 50px; + flex: 3; + } + .smallItem { + background: teal; + width: 20px; + flex: 1; + } + .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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-3-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + 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 height 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-overflow-vert-3.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "justify-content" on a vertical + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container, to be sure that + "overflow: hidden" is actually applying. --> +<html> +<head> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + 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>
--- a/layout/reftests/flexbox/reftest.list +++ b/layout/reftests/flexbox/reftest.list @@ -167,16 +167,24 @@ HTTP(..) == flexbox-intrinsic-sizing-hor == flexbox-mbp-horiz-1-reverse.xhtml flexbox-mbp-horiz-1-reverse-ref.xhtml == flexbox-mbp-horiz-1-rtl.xhtml flexbox-mbp-horiz-1-reverse-ref.xhtml == flexbox-mbp-horiz-1-rtl-reverse.xhtml flexbox-mbp-horiz-1-ref.xhtml == flexbox-mbp-horiz-2a.xhtml flexbox-mbp-horiz-2-ref.xhtml == flexbox-mbp-horiz-2b.xhtml flexbox-mbp-horiz-2-ref.xhtml == flexbox-mbp-horiz-3.xhtml flexbox-mbp-horiz-3-ref.xhtml == flexbox-mbp-horiz-3-reverse.xhtml flexbox-mbp-horiz-3-reverse-ref.xhtml +# Tests for flex containers with the "overflow" property set +== 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-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 + # Tests for flexbox in an iframe that gets resized. skip-if(B2G) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml # Tests for sizing of flex containers, e.g. under min/max size constraints == flexbox-sizing-horiz-1.xhtml flexbox-sizing-horiz-1-ref.xhtml == flexbox-sizing-horiz-2.xhtml flexbox-sizing-horiz-2-ref.xhtml == flexbox-sizing-vert-1.xhtml flexbox-sizing-vert-1-ref.xhtml == flexbox-sizing-vert-2.xhtml flexbox-sizing-vert-2-ref.xhtml