diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/flexbox')
298 files changed, 24497 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html new file mode 100644 index 000000000..95c1f3341 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html @@ -0,0 +1,26 @@ +<!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"> + <meta charset="utf-8"> + <style> + .tealBlock { + background: teal; + width: 20px; + height: 20px; + margin-bottom: 5px; + } + </style> +</head> +<body> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html new file mode 100644 index 000000000..fabe204b2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> + <link rel="match" href="flexbox-abspos-child-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 10px; + width: 10px; + background: purple; + margin-bottom: 15px; + position: relative; + } + .absPos { + position: absolute; + background: teal; + } + .testMinWidth { + width: 10px; + height: 20px; + min-width: 20px; + } + .testMaxWidth { + width: 50px; + height: 20px; + max-width: 20px; + } + .testMinHeight { + width: 20px; + height: 10px; + min-height: 20px; + } + .testMaxHeight { + width: 20px; + height: 50px; + max-height: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="absPos testMinWidth"></div></div> + <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> + <div class="flexContainer"><div class="absPos testMinHeight"></div></div> + <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html new file mode 100644 index 000000000..30fc58c3d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> + <link rel="match" href="flexbox-abspos-child-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-direction: column; + height: 10px; + width: 10px; + background: purple; + margin-bottom: 15px; + position: relative; + } + .absPos { + position: absolute; + background: teal; + } + .testMinWidth { + width: 10px; + height: 20px; + min-width: 20px; + } + .testMaxWidth { + width: 50px; + height: 20px; + max-width: 20px; + } + .testMinHeight { + width: 20px; + height: 10px; + min-height: 20px; + } + .testMaxHeight { + width: 20px; + height: 50px; + max-height: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="absPos testMinWidth"></div></div> + <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> + <div class="flexContainer"><div class="absPos testMinHeight"></div></div> + <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml new file mode 100644 index 000000000..18d4c5848 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml @@ -0,0 +1,171 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 20px; + height: 200px; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 30px; + background: pink; + } + div.c { + width: 20px; + height: 40px; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 160px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 120px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 80px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 60px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-top: 60px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"/> + <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"/> + <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-top: 40px"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(160px / 3)"/> + <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 30px"/> + <div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-top: 30px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml new file mode 100644 index 000000000..c7ef7d6af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml @@ -0,0 +1,180 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 20px; /* Skinny, to force us to wrap */ + height: 200px; + display: flex; + flex-wrap: wrap; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + width: 20px; + height: 10px; + flex: none; + background: lightgreen; + } + div.b { + width: 20px; + height: auto; /* height comes from contents */ + flex: none; + background: pink; + } + div.c { + width: 20px; + height: 40px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml new file mode 100644 index 000000000..19054382c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml @@ -0,0 +1,181 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. Additionally, + the flex container derives its width from the "max-width" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + max-width: 20px; /* Skinny, to force us to wrap */ + height: 200px; + display: flex; + flex-wrap: wrap; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + height: 10px; + width: 20px; + flex: none; + background: lightgreen; + } + div.b { + height: auto; /* height comes from contents */ + width: 20px; + flex: none; + background: pink; + } + div.c { + height: 40px; + width: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml new file mode 100644 index 000000000..460ccef05 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml @@ -0,0 +1,174 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + margin-bottom: 2px; + background: lightgray; + height: 20px; + clear: all; + } + div.a { + width: 10px; + height: 20px; + background: lightgreen; + float: left; + } + div.b { + width: 30px; + height: 20px; + background: pink; + float: left; + } + div.c { + width: 40px; + height: 20px; + background: orange; + float: left; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 160px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 120px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 80px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 60px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-left: 60px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/> + <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"/> + <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-left: 40px"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(160px / 3)"/> + <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 30px"/> + <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-left: 30px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 160px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 120px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml new file mode 100644 index 000000000..ef91d5fb7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml @@ -0,0 +1,180 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + height: 20px; /* Short, to force us to wrap */ + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-bottom: 2px; + background: lightgray; + } + div.a { + width: 10px; + height: 20px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; /* width comes from contents */ + height: 20px; + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml new file mode 100644 index 000000000..9b9b2fa72 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml @@ -0,0 +1,181 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. Additionally, + the flex container derives its height from the "max-height" property.--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + max-height: 20px; /* Short, to force us to wrap */ + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-bottom: 2px; + background: lightgray; + } + div.a { + width: 10px; + height: 20px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; /* width comes from contents */ + height: 20px; + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: left"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox" style="align-content: right"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml new file mode 100644 index 000000000..e5efb7560 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self. + + NOTE: For multi-line 'display: block' elements in the testcase (and inline + content that gets wrapped in an anonymous block), we add an inline-table + wrapper here in the reference case, so that we get first-line baseline + alignment instead of the last-line baseline-alignment that an inline-block + would give us. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + div { display: inline-block; } + table { display: inline-table; } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">blk_1line</div + ><table cellspacing="0" cellpadding="0" + class="yellow">blk<br/>2lines</table + ><div class="orange"><span class="super">super</span></div + ><div class="pink"><span class="sub">sub</span></div + ><table cellspacing="0" cellpadding="0" + class="aqua big">big<br/>text<br/>3lines</table + ><table class="tan" cellspacing="0" cellpadding="0"> + <i>ital<br/>ic</i> + </table> + </div> + <div class="flexbox"> + <div class="lime">blk_1line</div + ><div class="yellow">blk<br/>2lines</div + ><div class="orange"><span class="super">super</span></div + ><div class="pink"><span class="sub">sub</span></div + ><div class="aqua big">big<br/>text<br/>3lines</div + ><div class="tan"><i>ital<br/>ic</i></div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml new file mode 100644 index 000000000..0460f4162 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly). This test baseline-aligns various types of + content, and the flexbox's vertical size depends on the aggregate + post-alignment height of its children. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> + <style> + .flexbox { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml new file mode 100644 index 000000000..3a656e41e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly). This test baseline-aligns various types of + content, and the flexbox's vertical size depends on the aggregate + post-alignment height of its children. This test also uses + "flex-wrap: wrap-reverse" to make the cross-axis bottom-to-top instead + of top-to-bottom. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> + <style> + .flexbox { + display: flex; + flex-wrap: wrap-reverse; + border: 1px dashed blue; + font: 14px sans-serif; + } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml new file mode 100644 index 000000000..7cfded599 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div>a</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml new file mode 100644 index 000000000..8aa364ec5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml @@ -0,0 +1,90 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how a baseline-aligned flex item's position is impacted by + cross-axis margins, in a fixed-size flex container. + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-002-ref.xhtml"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + flex: 1; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-bottom: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-bottom: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-bottom: 4px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-bottom: 25px">a</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml new file mode 100644 index 000000000..6e941360f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 22px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 14px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-top: -7px">a</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml new file mode 100644 index 000000000..0b8e8499c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how a baseline-aligned flex item's position is impacted by + cross-axis margins, in a fixed-size flex container with the cross axis + reversed via "flex-wrap: wrap-reverse". + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-003-ref.xhtml"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + flex-wrap: wrap-reverse; /* Just to flip cross-axis */ + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + flex: 1; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-bottom: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-bottom: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-bottom: 4px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-bottom: 25px">a</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml new file mode 100644 index 000000000..73a312375 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + </div> + <div class="flexbox"> + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + </div> + <div class="flexbox"> + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml new file mode 100644 index 000000000..14fbf4bc6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly), in a multi-line flex container. + This test baseline-aligns variously-sized flex items, and the container's + vertical size depends on the aggregate post-alignment height of its items. + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-004-ref.xhtml"/> + <style> + .flexbox { + display: flex; + flex-wrap: wrap; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; /* 3 items per Flex Line */ + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml new file mode 100644 index 000000000..e8b2791f4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <!-- Note: The lines are reversed here with respect to the testcase, + due to the testcase's "wrap-reverse". --> + <div class="flexbox"> + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + <div class="flexbox"> + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + </div> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml new file mode 100644 index 000000000..cfe0d1b02 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly), in a wrap-reverse multi-line flex container. + This test baseline-aligns variously-sized flex items, and the container's + vertical size depends on the aggregate post-alignment height of its items. + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-005-ref.xhtml"/> + <style> + .flexbox { + display: flex; + flex-wrap: wrap-reverse; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; /* 3 items per Flex Line */ + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml new file mode 100644 index 000000000..50036ff6d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self when tested against content with an orthogonal writing-mode. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .ortho { writing-mode: vertical-rl; + width: 17px; + height: 40px; + float: left; } + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .start { align-self: flex-start; } + .end { align-self: flex-end; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime ortho start">ortho</div + ><div class="yellow offset start">one line</div + ><div class="orange offset start">two<br/>lines</div + ><div class="pink offset start">offset</div> + </div> + <div class="container"> + <div class="lime ortho end">ortho</div + ><div class="yellow offset end">one line</div + ><div class="orange offset end">two<br/>lines</div + ><div class="pink offset end">offset</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml new file mode 100644 index 000000000..417f96658 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly). This test baseline-aligns various types of + content against content that is exempt from alignment due to an + orthognal writing-mode. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .base { align-items: baseline; } + .lastbase { align-items: last baseline; } + + .ortho { writing-mode: vertical-rl; + width: 17px; + height: 40px; } + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container base"> + <div class="lime ortho">ortho</div> + <div class="yellow">one line</div> + <div class="orange">two<br/>lines</div> + <div class="pink offset">offset</div> + </div> + <div class="container lastbase"> + <div class="lime ortho">ortho</div> + <div class="yellow">one line</div> + <div class="orange">two<br/>lines</div> + <div class="pink offset">offset</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml new file mode 100644 index 000000000..37520d66c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of 'baseline' and 'last baseline' values + for align-items and align-self. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .start { align-self: flex-start; } + .end { align-self: flex-end; } + + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime offset start">one line (first)</div + ><div class="yellow offset end">one line (last)</div + ><div class="orange offset end">two<br/>lines and offset (last)</div + ><div class="pink offset start">offset (first)</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml new file mode 100644 index 000000000..50d74f5eb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of 'baseline' and 'last baseline' values + for align-items (and align-self, implicitly). This test confirms + non-interference between the 'baseline' and 'last baseline' items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-007-ref.xhtml"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .base { align-self: baseline; } + .lastbase { align-self: last baseline; } + + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime base">one line (first)</div> + <div class="yellow lastbase">one line (last)</div> + <div class="orange offset lastbase">two<br/>lines and offset (last)</div> + <div class="pink offset base">offset (first)</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml new file mode 100644 index 000000000..569312a70 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .flexbox > div { + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .left { + background: tan; + align-self: left; + } + .right { + background: brown; + align-self: right; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml new file mode 100644 index 000000000..356ab3d1c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml @@ -0,0 +1,99 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using margin-top in place of the align-items / + align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + width: 640px; + font-size: 10px; + line-height: 10px; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + .left { + background: tan; + } + .right { + background: brown; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="margin-top: 190px">end</div> + <div class="flex-end big" style="margin-top: 100px">a b c d e f</div> + <div class="center" style="margin-top: 95px">center</div> + <div class="center big" style="margin-top: 50px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" + style="width: 40px; display: inline-block">base</div + ><div class="baseline big" + style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="margin-top: 95px">auto</div> + <div class="unspecified" style="margin-top: 95px">unspec</div> + <div class="initial" style="margin-top: 95px">initial</div> + <div class="inherit" style="margin-top: 190px">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml new file mode 100644 index 000000000..10180adac --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml @@ -0,0 +1,109 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .flexbox > * { + display: table; + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + display: block; /* XXXdholbert Hackaround for bug 799725 */ + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .left { + background: tan; + align-self: left; + } + .right { + background: brown; + align-self: right; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml new file mode 100644 index 000000000..59d13a645 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-block; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: 172px">end</div> + <div class="flex-end big" style="top: 82px">a b c d e f</div> + <div class="center" style="top: 86px">center</div> + <div class="center big" style="top: 41px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" + style="display: inline-block">base</div + ><div class="baseline big" + style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 182px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml new file mode 100644 index 000000000..cddd5b455 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml new file mode 100644 index 000000000..229087cb8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + width: 600px; + height: 4px; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + .normal { + background: tan; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="position: relative; top: -6px">end</div> + <div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div> + <div class="center" style="position: relative; top: -3px">center</div> + <div class="center big" style="position: relative; top: -48px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" + style="width: 40px; display: inline-block">base</div + ><div class="baseline big" + style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="height: 100%">auto</div> + <div class="unspecified" style="height: 100%">unspec</div> + <div class="initial" style="height: 100%">initial</div> + <div class="inherit" style="height: 100%">inherit</div> + <div class="normal" style="height: 100%">normal</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml new file mode 100644 index 000000000..4414d0a0a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being shorter than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-003-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + } + + .flexbox > div { + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .normal { + background: tan; + align-self: normal; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="normal">normal</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml new file mode 100644 index 000000000..5143e07c4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml @@ -0,0 +1,89 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-block; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + margin-top: 20px; + margin-bottom: 120px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: -24px">end</div> + <div class="flex-end big" style="top: -114px">a b c d e f</div> + <div class="center" style="top: -12px">center</div> + <div class="center big" style="top: -57px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" + style="display: inline-block">base</div + ><div class="baseline big" + style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 2px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml new file mode 100644 index 000000000..b7bdf396a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being shorter than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-004-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + margin-top: 20px; + margin-bottom: 120px; + vertical-align: top; + } + + .flexbox > div { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + min-height: 2px; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml new file mode 100644 index 000000000..48c215ad6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior with auto + margins in play. This reference case uses fixed margin-top values + in place of the testcase's auto margins. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 140px; + width: 400px; + display: flex; + font-size: 10px; + line-height: 10px; + margin-bottom: 10px; + } + + .kidsAutoTop > div { margin-top: 130px; } + .kidsAutoTop > div.big { margin-top: 60px; } + .kidsAutoBoth > div { margin-top: 65px; } + .kidsAutoBoth > div.big { margin-top: 30px; } + + .flexbox > div { + width: 40px; + height: 10px; + } + + .flexbox > div.big { + height: 80px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox kidsAutoTop"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBottom"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBoth"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml new file mode 100644 index 000000000..cff89d325 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior with auto margins in + play (which should negate the effects of align-items / align-self, + because there won't be any available space in which to align the item + after the auto margins are resolved). --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> + <link rel="match" href="flexbox-align-self-horiz-005-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 140px; + width: 400px; + display: flex; + font-size: 10px; + line-height: 10px; + margin-bottom: 10px; + } + + .kidsAutoTop > div { margin-top: auto; } + .kidsAutoBottom > div { margin-bottom: auto; } + .kidsAutoBoth > div { margin: auto 0; } + + .flexbox > div { + width: 40px; + } + + .flexbox > div.big { + height: 80px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox kidsAutoTop"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBottom"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBoth"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html new file mode 100644 index 000000000..3ffa8647b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we just have the testcases's text placed directly + in the outermost wrapper-block, with a lime background on that wrapper + instead of on a flex item. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.fixedWidthWrapper { + width: 200px; + /* Small enough that 3 characters can _easily_ fit in our width */ + font-size: 12px; + background: lime; + } + </style> +</head> +<body> + <div class="fixedWidthWrapper"> + A B C + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html new file mode 100644 index 000000000..578dff9ca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html"> + <meta name="assert" content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size"> + <meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23"> + <meta charset="utf-8"> + <style> + div.fixedWidthWrapper { + width: 200px; + /* Small enough that 3 characters can _easily_ fit in our width */ + font-size: 12px; + } + div.vertContainer { + display: flex; + flex-direction: column; + } + div.vertItem { + background: red; + } + div.horizContainer { + display: flex; + } + div.horizItem { + flex: 1; + background: lime; + } + </style> +</head> +<body> + <div class="fixedWidthWrapper"> + <div class="vertContainer"> + <div class="vertItem"> + <div class="horizContainer"> + <div class="horizItem">A B C</div> + <div class="horizItem"></div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html new file mode 100644 index 000000000..4e02cd8b1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we use floated fixed-sized divs to mimic the + testcases's flex items. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.container { + width: 100px; + height: 20px; + border: 2px solid black; + } + div.item { + width: 48px; + height: 15px; + float: left; + border: 1px dotted blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html new file mode 100644 index 000000000..c2b903011 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html"> + <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed."> + <meta charset="utf-8"> + <style> + div.container { + display: flex; + flex-flow: column wrap; + width: 100px; + height: 20px; + border: 2px solid black; + } + div.item { + /* Tall enough to force wrapping (since parent height is 20px): */ + min-height: 15px; + border: 1px dotted blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml new file mode 100644 index 000000000..1d19034a1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml @@ -0,0 +1,119 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + .flexbox > * { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: right; + } + .left { + background: tan; + float: left; + } + .right { + background: brown; + float: right; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + <!-- Since the last three divs are floated, the container doesn't include + their heights by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml new file mode 100644 index 000000000..e611f48fc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + font-size: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .left { + background: tan; + align-self: left; + } + .right { + background: brown; + align-self: right; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml new file mode 100644 index 000000000..3a5ad06a5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml @@ -0,0 +1,90 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"></div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml new file mode 100644 index 000000000..c45d737bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml @@ -0,0 +1,77 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + float: left; + font-size: 10px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml new file mode 100644 index 000000000..4412b3931 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml new file mode 100644 index 000000000..23b320941 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-003-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml new file mode 100644 index 000000000..b63c2c7fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml @@ -0,0 +1,96 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml new file mode 100644 index 000000000..4c5287574 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-004-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml new file mode 100644 index 000000000..a9235f07e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml @@ -0,0 +1,122 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + .flexbox > * { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: left; + } + .left { + background: tan; + float: left; + } + .right { + background: brown; + float: right; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + <!-- Since the last three divs are floated, the container doesn't include + their heights by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml new file mode 100644 index 000000000..d0ef2963c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + "direction: rtl" to swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .left { + background: tan; + align-self: left; + } + .right { + background: brown; + align-self: right; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="left">left</div> + <div class="right">right</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml new file mode 100644 index 000000000..16cd5611c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml @@ -0,0 +1,93 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"></div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml new file mode 100644 index 000000000..a3a81e25d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each, and with "direction: rtl" to swap + the horizontal (cross) axis item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + direction: rtl; + float: left; + font-family: sans-serif; + font-size: 10px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml new file mode 100644 index 000000000..5be37085a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + direction: rtl; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml new file mode 100644 index 000000000..9a3bfccb3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items, and with "direction: rtl" to + swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-003-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml new file mode 100644 index 000000000..faeb28662 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml new file mode 100644 index 000000000..4f4f49afd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items, and with "direction: rtl" to + swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-004-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + direction: rtl; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs + swapped in the ordering, with respect to the other + flexbox-align-self-* testcases. That's because "stretch" and + "flex-end" overflow in opposite directions, and in RTL mode (with 2 + flex containers side by side), they overflow *at* each other and + overlap. If we swap them, they float away from each other and we can + still see them.) --> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html new file mode 100644 index 000000000..d14234b45 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html @@ -0,0 +1,15 @@ +<!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"> + <meta charset="utf-8"> +</head> +<body> + a ab bx x +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html new file mode 100644 index 000000000..0c85c46d5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-anonymous-items-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + } + </style> +</head> +<body> + <div class="flexContainer"> + a a + <div style="order: 1">x x</div> + b b + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html new file mode 100644 index 000000000..84e231512 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + body { + margin: 0; + font-size: 20px; + line-height: 20px; + } + .flexContainer { + display: inline-block; + background: lightblue; + vertical-align: top; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .flexContainer > * { display: inline; } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div>c</div + ><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div + ><div>f</div + ><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div + ><div class="smallFont">i</div + ><div>j</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html new file mode 100644 index 000000000..a7308f748 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex items, some of which have "align-self:baseline". The + spec says this about this case: + If any of the flex items on the flex container's first line + participate in baseline alignment, the flex container's + main-axis baseline is the baseline of those flex items. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-align-self-baseline-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + margin: 0; + font-size: 20px; + line-height: 20px; + } + .flexContainer { + display: inline-flex; + background: lightblue; + align-items: baseline; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + /* This one flex item won't be baseline-aligned, so it won't impact + the flex container's positioning */ + align-self: stretch; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div> + <div>c</div> + <div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div> + <div>f</div> + <div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div> + <div class="smallFont">i</div> + <div>j</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html new file mode 100644 index 000000000..1528298dd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + <div style="display: inline-block; margin-top: 12px">a</div> + <div class="flexContainer" style="margin-top: 20px"> + <div class="smallFont">b</div + ><div>c</div + ><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div + ><div>f</div + ><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div + ><div class="smallFont">i</div + ><div>j</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html new file mode 100644 index 000000000..25b87367d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container with + several flex items, some of which have "align-self:baseline". Since we're + vertical and the items' baselines are horizontal, they do not end up + participating in baseline alignment, so their "align-self:baseline" + computed style doesn't have any special effect on the container's + baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-align-self-baseline-vert-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-flex; + flex-direction: column; + background: lightblue; + align-items: baseline; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + /* This one flex item won't be baseline-aligned, so it won't impact + the flex container's positioning */ + align-self: stretch; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div> + <div>c</div> + <div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div> + <div>f</div> + <div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div> + <div class="smallFont">i</div> + <div>j</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html new file mode 100644 index 000000000..fc574143e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we have inline-blocks instead of inline + flex containers. Otherwise it's the same. --> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html new file mode 100644 index 000000000..aaf8bb3e5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with no flex items. This is the main-axis baseline. The spec says this + about this case: + https://drafts.csswg.org/css-flexbox/#flex-baselines + "Otherwise, the flex container has no first/last main-axis baseline set, + and one is synthesized if needed according to the rules of its alignment context." + + The alignment context in this case is inline-level so the margin-box + should be used to synthesize the baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of an empty horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-empty-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-flex; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html new file mode 100644 index 000000000..74f13fbba --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with no flex items. This is the cross-axis baseline. The spec says this + about this case: + https://drafts.csswg.org/css-flexbox/#flex-baselines + "Otherwise, the flex container has no first/last main-axis baseline set, + and one is synthesized if needed according to the rules of its alignment context." + + The alignment context in this case is inline-level so the margin-box + should be used to synthesize the baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of an empty vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-empty-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-flex; + flex-direction: column; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html new file mode 100644 index 000000000..e6f570ed2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + background: lightblue; + } + .flexContainer > * { display: inline; } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <div class="flexContainer smallFont"> + <div class="smallFont">b</div + ><div class="bigFont unaligned">c</div> + </div> + <div class="flexContainer bigFont"> + <div class="bigFont">d</div + ><div class="smallFont unaligned">e</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html new file mode 100644 index 000000000..94bbdec20 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex items, none of which have "align-self:baseline". The + spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html new file mode 100644 index 000000000..203d1fcaa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + inline-blocks manually positioned with "vertical-align:top" and + margin-top. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + a + <div class="flexContainer" style="margin-top: 8px"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html new file mode 100644 index 000000000..55fab78e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex items, none of which have "align-self:baseline". The + spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-flex; + flex-direction: column; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html new file mode 100644 index 000000000..66513652a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html new file mode 100644 index 000000000..0faf41bb3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex lines. + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html new file mode 100644 index 000000000..361f0965b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + /* Split testcase's 40px height into 20px of padding-top and 20px of + height, to set aside space for the testcase's (invisible) second line + (which is above the first line, since this is wrap-reverse) */ + height: 20px; + padding-top: 20px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html new file mode 100644 index 000000000..bd13de7f9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex lines (wrapping in the reverse direction). + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap-reverse; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html new file mode 100644 index 000000000..ef9e8051d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html @@ -0,0 +1,85 @@ +<!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"> + <meta charset="utf-8"> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + </div> + <div class="flexContainer" style="align-items: baseline"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html new file mode 100644 index 000000000..ef7d787be --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap; + width: 40px; + height: 100px; + background: lightgray; + + /* Use "align-content", to test that packing space is considered when + getting container's baseline from its first FlexLine:*/ + align-content: center; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + + <!-- Flex container with all items baseline-aligned, and with some padding + (only those on first line should set the container's baseline) --> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + n +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html new file mode 100644 index 000000000..212b3b1e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html @@ -0,0 +1,85 @@ +<!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"> + <meta charset="utf-8"> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column-reverse; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + </div> + <div class="flexContainer" style="align-items: baseline"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html new file mode 100644 index 000000000..21db212f9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-004-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap-reverse; + width: 40px; + height: 100px; + background: lightgray; + + /* Use "align-content", to test that packing space is considered when + getting container's baseline from its first FlexLine:*/ + align-content: center; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + + <!-- Flex container with all items baseline-aligned, and with some padding + (only those on first line should set the container's baseline) --> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + n +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html new file mode 100644 index 000000000..ce47baa87 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><br><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><br><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><br><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html new file mode 100644 index 000000000..d2b510ade --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex lines. + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + height: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html new file mode 100644 index 000000000..f66096644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + /* Split testcase's 40px width into 20px of padding-left and 20px of + width, to set aside space for the testcase's (invisible) second line + (which is to the left of the first line, since this is wrap-reverse) + */ + width: 20px; + padding-left: 20px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><br><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><br><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><br><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html new file mode 100644 index 000000000..5bffc8463 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex lines (wrapping in the reverse direction). + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap-reverse; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + height: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html new file mode 100644 index 000000000..afca91154 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex. --> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html new file mode 100644 index 000000000..b9df6c23f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with one flex item. This is the main-axis baseline. The spec says this + about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with one flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-flex; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html new file mode 100644 index 000000000..523045894 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with one flex item. This is the cross-axis baseline. The spec says this + about this case: + If the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's cross axis, the flex container's cross-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with one flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-flex; + flex-direction: column; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml new file mode 100644 index 000000000..9076e1081 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + } + div.b { + display: inline-block; + background: yellow; + } + div.c { + display: inline-block; + background: orange; + } + div.auto { + display: inline-block; + background: pink; + } + div.inflex { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 185px"/><div class="auto"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 170px"/><div class="auto"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 45px"/><div class="b" style="width: 50px" + /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml new file mode 100644 index 000000000..1345263df --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a horizontal flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + background: yellow; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml new file mode 100644 index 000000000..c8a6ae4d3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 50px; } + div.flexbox { + border: 1px dashed blue; + float: left; + } + div.a { + background: lightgreen; + } + div.b { + background: yellow; + } + div.c { + background: orange; + } + div.auto { + background: pink; + } + div.inflex { + background: gray; + } + div.spacer { + width: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 185px"/><div class="auto"> + <div class="spacer" style="height: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="height: 170px"/><div class="auto"> + <div class="spacer" style="height: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 45px"/><div class="b" style="height: 50px" + /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml new file mode 100644 index 000000000..92c32c828 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a vertical flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> + <style> + div { width: 50px; } + div.flexbox { + float: left; + border: 1px dashed blue; + height: 200px; + font-size: 10px; + display: flex; + flex-direction: column; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + background: yellow; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml new file mode 100644 index 000000000..274ac15fc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <canvas style="float:right"/> + </div> + + <div class="flexbox"> + <canvas style="width: 122.5px" + /><canvas style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 93px" + /><canvas style="width: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 114px" + /><canvas style="width: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 106px" + /><canvas style="width: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 46px" + /><canvas style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml new file mode 100644 index 000000000..6d3629e32 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="width: 150px; flex: 1 4 auto"/> + <canvas style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml new file mode 100644 index 000000000..232ae9e76 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + canvas { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <canvas/> + </div> + + <div class="flexbox"> + <canvas style="height: 122.5px" + /><canvas style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 93px" + /><canvas style="height: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 114px" + /><canvas style="height: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 106px" + /><canvas style="height: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 46px" + /><canvas style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml new file mode 100644 index 000000000..1bae70438 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + canvas { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="height: 150px; flex: 1 4 auto"/> + <canvas style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml new file mode 100644 index 000000000..edb4a42f2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + clear: all; + height: 22px; + } + fieldset { + width: 10px; + height: 20px; + border: 1px dotted green; + margin: 0; + padding: 0; + float: left; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <fieldset style="float:right"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 122.5px" + /><fieldset style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 93px" + /><fieldset style="width: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 114px" + /><fieldset style="width: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 106px" + /><fieldset style="width: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 46px" + /><fieldset style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml new file mode 100644 index 000000000..8a504859d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that fieldset elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-fieldset-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + fieldset { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <fieldset/> + </div> + + <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <fieldset/> + </div> + + <!-- C) Two fieldset elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <fieldset style="flex: 5"/> + <fieldset style="flex: 3"/> + </div> + + <!-- D) Two fieldset elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <fieldset style="width: 150px; flex: 1 4 auto"/> + <fieldset style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml new file mode 100644 index 000000000..41b193019 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + fieldset { + width: 20px; + height: 10px; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <fieldset/> + </div> + + <div class="flexbox"> + <fieldset style="height: 122.5px" + /><fieldset style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 93px" + /><fieldset style="height: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 114px" + /><fieldset style="height: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 106px" + /><fieldset style="height: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 46px" + /><fieldset style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml new file mode 100644 index 000000000..75d592f4c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that fieldset elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-fieldset-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + fieldset { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <fieldset/> + </div> + + <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <fieldset/> + </div> + + <!-- C) Two fieldset elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <fieldset style="flex: 5"/> + <fieldset style="flex: 3"/> + </div> + + <!-- D) Two fieldset elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <fieldset style="height: 150px; flex: 1 4 auto"/> + <fieldset style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml new file mode 100644 index 000000000..bee1ae0bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + iframe { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <iframe style="float:right"/> + </div> + + <div class="flexbox"> + <iframe style="width: 122.5px" + /><iframe style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 93px" + /><iframe style="width: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 114px" + /><iframe style="width: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 106px" + /><iframe style="width: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 46px" + /><iframe style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml new file mode 100644 index 000000000..323b06519 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that iframe elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-iframe-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + iframe { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <iframe/> + </div> + + <!-- B) Text and an iframe (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <iframe/> + </div> + + <!-- C) Two iframe elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <iframe style="flex: 5"/> + <iframe style="flex: 3"/> + </div> + + <!-- D) Two iframe elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <iframe style="width: 150px; flex: 1 4 auto"/> + <iframe style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml new file mode 100644 index 000000000..7737008f1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + iframe { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <iframe/> + </div> + + <div class="flexbox"> + <iframe style="height: 122.5px" + /><iframe style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 93px" + /><iframe style="height: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 114px" + /><iframe style="height: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 106px" + /><iframe style="height: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 46px" + /><iframe style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml new file mode 100644 index 000000000..8b227c67c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that iframe elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-iframe-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + iframe { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <iframe/> + </div> + + <!-- B) Text and an iframe (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <iframe/> + </div> + + <!-- C) Two iframe elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <iframe style="flex: 5"/> + <iframe style="flex: 3"/> + </div> + + <!-- D) Two iframe elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <iframe style="height: 150px; flex: 1 4 auto"/> + <iframe style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml new file mode 100644 index 000000000..a6cd54312 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + img { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <img src="support/solidblue.png" style="float:right"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 122.5px" + /><img src="support/solidblue.png" style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 93px" + /><img src="support/solidblue.png" style="width: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 114px" + /><img src="support/solidblue.png" style="width: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 106px" + /><img src="support/solidblue.png" style="width: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 46px" + /><img src="support/solidblue.png" style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml new file mode 100644 index 000000000..b5f3a6fce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that img elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-img-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + img { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <!-- B) Text and an img (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <img src="support/solidblue.png"/> + </div> + + <!-- C) Two img elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 5"/> + <img src="support/solidblue.png" style="flex: 3"/> + </div> + + <!-- D) Two img elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/> + <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml new file mode 100644 index 000000000..09c7fc87f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + img { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 122.5px" + /><img src="support/solidblue.png" style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 93px" + /><img src="support/solidblue.png" style="height: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 114px" + /><img src="support/solidblue.png" style="height: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 106px" + /><img src="support/solidblue.png" style="height: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 46px" + /><img src="support/solidblue.png" style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml new file mode 100644 index 000000000..e2949b1e3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that img elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-img-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + img { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <!-- B) Text and an img (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <img src="support/solidblue.png"/> + </div> + + <!-- C) Two img elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 5"/> + <img src="support/solidblue.png" style="flex: 3"/> + </div> + + <!-- D) Two img elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/> + <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml new file mode 100644 index 000000000..7ea5a05d8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + textarea { + width: 10px; + height: 20px; + background: white; + border-radius: 0; + border: 1px dotted green; + padding: 0; + margin: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox" + style="height: 22px"><!-- height of textarea's border-box --> + some words + <textarea style="float:right"/> + </div> + + <div class="flexbox"> + <textarea style="width: 122.5px" + /><textarea style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 93px" + /><textarea style="width: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 114px" + /><textarea style="width: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 106px" + /><textarea style="width: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 46px" + /><textarea style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml new file mode 100644 index 000000000..7906d242a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml @@ -0,0 +1,109 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that textarea elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-textarea-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + textarea { + min-width: 0; + width: 10px; + height: 20px; + background: white; + border-radius: 0; + border: 1px dotted green; + padding: 0; + margin: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <textarea/> + </div> + + <!-- B) Text and a textarea (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <textarea/> + </div> + + <!-- C) Two textarea elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <textarea style="flex: 5"/> + <textarea style="flex: 3"/> + </div> + + <!-- D) Two textarea elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <textarea style="width: 150px; flex: 1 4 auto"/> + <textarea style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea + style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea + style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml new file mode 100644 index 000000000..dbef1eac5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + textarea { + width: 20px; + height: 10px; + background: white; + border-radius: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <textarea/> + </div> + + <div class="flexbox"> + <textarea style="height: 122.5px" + /><textarea style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 93px" + /><textarea style="height: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 114px" + /><textarea style="height: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 106px" + /><textarea style="height: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 46px" + /><textarea style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml new file mode 100644 index 000000000..a935a101d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml @@ -0,0 +1,111 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that textarea elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-textarea-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + textarea { + width: 20px; + height: 10px; + min-height: 0; + background: white; + border-radius: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <textarea/> + </div> + + <!-- B) Text and a textarea (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <textarea/> + </div> + + <!-- C) Two textarea elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <textarea style="flex: 5"/> + <textarea style="flex: 3"/> + </div> + + <!-- D) Two textarea elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <textarea style="height: 150px; flex: 1 4 auto"/> + <textarea style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea + style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea + style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml new file mode 100644 index 000000000..e37920f17 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + video { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <video style="float:right"/> + </div> + + <div class="flexbox"> + <video style="width: 122.5px" + /><video style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <video style="width: 93px" + /><video style="width: 103px"/> + </div> + + <div class="flexbox"> + <video style="width: 114px" + /><video style="width: 82px"/> + </div> + + <div class="flexbox"> + <video style="width: 106px" + /><video style="width: 90px"/> + </div> + + <div class="flexbox"> + <video style="width: 46px" + /><video style="width: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml new file mode 100644 index 000000000..c976ccffb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that video elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-video-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + video { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <video/> + </div> + + <!-- B) Text and a video (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <video/> + </div> + + <!-- C) Two video elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <video style="flex: 5"/> + <video style="flex: 3"/> + </div> + + <!-- D) Two video elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <video style="width: 150px; flex: 1 4 auto"/> + <video style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml new file mode 100644 index 000000000..552d14e4c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + video { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <video/> + </div> + + <div class="flexbox"> + <video style="height: 122.5px" + /><video style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <video style="height: 93px" + /><video style="height: 103px"/> + </div> + + <div class="flexbox"> + <video style="height: 114px" + /><video style="height: 82px"/> + </div> + + <div class="flexbox"> + <video style="height: 106px" + /><video style="height: 90px"/> + </div> + + <div class="flexbox"> + <video style="height: 46px" + /><video style="height: 150px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml new file mode 100644 index 000000000..b45f853e6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that video elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-video-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + video { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <video/> + </div> + + <!-- B) Text and a video (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <video/> + </div> + + <!-- C) Two video elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <video style="flex: 5"/> + <video style="flex: 3"/> + </div> + + <!-- D) Two video elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <video style="height: 150px; flex: 1 4 auto"/> + <video style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html new file mode 100644 index 000000000..642c1e3d1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html @@ -0,0 +1,98 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html new file mode 100644 index 000000000..613acd27e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html new file mode 100644 index 000000000..3ef143639 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html new file mode 100644 index 000000000..28943c508 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html @@ -0,0 +1,101 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + div.shrunkMainSize { + width: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html new file mode 100644 index 000000000..3bf1ac438 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html new file mode 100644 index 000000000..3a53dace6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html new file mode 100644 index 000000000..a9a286770 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html @@ -0,0 +1,98 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html new file mode 100644 index 000000000..5be8d5307 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html new file mode 100644 index 000000000..87ba97a68 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html new file mode 100644 index 000000000..eeb8a4ea7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html @@ -0,0 +1,101 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + div.shrunkMainSize { + height: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html new file mode 100644 index 000000000..e68b98a5a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html new file mode 100644 index 000000000..cda5fecd4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html new file mode 100644 index 000000000..2aa1d74bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we get each container to be sized the same as + in the testcase, without any visible baseline alignemnt, by using some + hidden flex items. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 50px; + background: yellow; + border: 1px dotted black; + margin: 5px; + align-items: flex-start; + } + .hiddenItemForSizing { + width: 0; + min-width: 0; /* disable default min-width:auto behavior */ + color: transparent; + align-self: baseline; + } + .largeFont { + font-size: 20px; + background: lightblue; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-top: 5px; + } + .smallFont { + font-size: 10px; + background: pink; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-bottom: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="largeFont">a</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> + + <div class="flexContainer"> + <div class="smallFont">b</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html new file mode 100644 index 000000000..0ffa27761 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-baseline-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 50px; + background: yellow; + border: 1px dotted black; + margin: 5px; + align-items: baseline; + } + .collapse { + visibility: collapse; + } + .largeFont { + font-size: 20px; + background: lightblue; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-top: 5px; + } + .smallFont { + font-size: 10px; + background: pink; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-bottom: 20px; + } + </style> +</head> +<body> + <!-- Second item collapsed: --> + <div class="flexContainer"> + <div class="largeFont">a</div> + <div class="smallFont collapse">b</div> + </div> + + <!-- First item collapsed: --> + <div class="flexContainer"> + <div class="largeFont collapse">a</div> + <div class="smallFont">b</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html new file mode 100644 index 000000000..901318784 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we have blocks in place of the testcase's + flex containers. The testcase's collapsed flex items are entirely + absent here (and the remaining content is sized using exact pixel + values). +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .flexContainer > * { + /* All flex items have 20px base size */ + width: 20px; + } + .collapse { + flex-basis: 0; + height: 20px; + } + .flexible { + flex: 1 auto; + } + .heightTall { + height: 40px; + background: purple; + } + .heightAuto { + background: teal; + } + .heightShort { + height: 10px; + background: pink; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- Just one (collapsed) flex item, which ends up establishing + the container's size (even though it's collapsed): --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, one short flex item. + (Container ends up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightShort"></div> + </div> + <!-- (same, but with items in opposite order) --> + <div class="flexContainer"> + <div class="heightShort"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, one stretched flex item. + (Container and stretched item end up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightAuto"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightAuto"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- FOURTH ROW: --> + <!-- One collapsed flex item, one other flex item; both are flexible. + (The non-collapsed one should take all of the available width.) --> + <div class="flexContainer"> + <div class="heightAuto collapse"></div> + <div class="heightTall flexible"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightTall flexible"></div> + <div class="heightAuto collapse"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html new file mode 100644 index 000000000..2c4385af8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .flexContainer > * { + /* All flex items have 20px base size */ + width: 20px; + } + .collapse { + visibility: collapse; + } + .flexible { + flex: 1 auto; + } + .heightTall { + height: 40px; + background: purple; + } + .heightAuto { + background: teal; + } + .heightShort { + height: 10px; + background: pink; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- Just one (collapsed) flex item, which ends up establishing + the container's size (even though it's collapsed): --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, one short flex item. + (Container ends up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightShort"></div> + </div> + <!-- (same, but with items in opposite order) --> + <div class="flexContainer"> + <div class="heightShort"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, one stretched flex item. + (Container and stretched item end up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightAuto"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightAuto"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- FOURTH ROW: --> + <!-- One collapsed flex item, one other flex item; both are flexible. + (The non-collapsed one should take all of the available width.) --> + <div class="flexContainer"> + <div class="heightAuto flexible collapse"></div> + <div class="heightTall flexible"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightTall flexible"></div> + <div class="heightAuto flexible collapse"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html new file mode 100644 index 000000000..a9040e306 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html @@ -0,0 +1,108 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + + /* These let us show where each flex line begins (and hence, how tall + the flex lines end up) */ + align-content: flex-start; + align-items: flex-start; + + width: 30px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 25px; + } + .halfWidthItem { + width: 15px; + height: 15px; + background: teal; + } + .fullWidthItem { + width: 30px; + height: 20px; + background: purple; + } + .veryTallItem { + width: 15px; + height: 40px; + background: olive; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- One collapsed flex item, at the beginning of a flex line, which + ends up establishing its flex line's cross size: --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="halfWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <!-- ...and now with it being at the end of that flex line: --> + <div class="flexContainer"> + <div class="halfWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, initially in its own line. It ends + up being merged into another line after it collapses, due to its + (post-collapse) zero main-size. --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, initially in a line with an even-taller item. + The collapsed item ends up shifting into another line after it + collapses, but it carries the taller item's cross size with it, as its + strut size. --> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem" style="height: 40px"></div> + <div class="veryTallItem"></div> + </div> + <!-- ...and now with two (differently-sized) struts in first line: + (the one that's taller - due to being initially grouped with the tall + item - wins out.) --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem" style="height: 40px"></div> + <div class="veryTallItem"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html new file mode 100644 index 000000000..97af3805c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + + /* These let us show where each flex line begins (and hence, how tall + the flex lines end up) */ + align-content: flex-start; + align-items: flex-start; + + width: 30px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + visibility: collapse; + width: 15px; + height: 25px; + } + .halfWidthItem { + width: 15px; + height: 15px; + background: teal; + } + .fullWidthItem { + width: 30px; + height: 20px; + background: purple; + } + .veryTallItem { + width: 15px; + height: 40px; + background: olive; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- One collapsed flex item, at the beginning of a flex line, which + ends up establishing its flex line's cross size: --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="halfWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <!-- ...and now with it being at the end of that flex line: --> + <div class="flexContainer"> + <div class="halfWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, initially in its own line. It ends + up being merged into another line after it collapses, due to its + (post-collapse) zero main-size. --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, initially in a line with an even-taller item. + The collapsed item ends up shifting into another line after it + collapses, but it carries the taller item's cross size with it, as its + strut size. --> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> + <!-- ...and now with two (differently-sized) struts in first line: + (the one that's taller - due to being initially grouped with the tall + item - wins out.) --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-ref.html new file mode 100644 index 000000000..c8242106b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-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> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + align-content: stretch; /* Initial value; just here for emphasis */ + width: 25px; + height: 60px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 40px; + } + .shortItem { + width: 25px; + height: 10px; + background: purple; + } + .tallItem { + width: 10px; + height: 30px; + background: olive; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="shortItem"></div> + <div class="collapsedItem"></div> + <div class="tallItem"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html new file mode 100644 index 000000000..4476bc18f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + align-content: stretch; /* Initial value; just here for emphasis */ + width: 25px; + height: 60px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + visibility: collapse; + width: 10px; + } + .shortItem { + width: 25px; + height: 10px; + background: purple; + } + .tallItem { + width: 10px; + height: 30px; + background: olive; + } + </style> +</head> +<body> + <!-- In this testcase, the first flex line initially has a cross-size of + 10px, and the second flex line has a cross-size of 30px. Both lines are + stretched by 10px each (to hit the container's total cross-size, 60px). + Then, we handle "visibility:collapse" and convert the collapsed item + into a strut with the second line's stretched cross-size (40px), and we + restart flex layout. This strut then ends up in the *first* line (since + it has 0 main-size), which means both flex lines end up being 40px tall. + --> + <div class="flexContainer"> + <div class="shortItem"></div> + <div class="collapsedItem"></div> + <div class="tallItem"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html new file mode 100644 index 000000000..f46e11b39 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html @@ -0,0 +1,127 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 13px; + } + .singleLineVert > * { + height: 13px; + float: none; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html new file mode 100644 index 000000000..a29b89aa6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="match" href="flexbox-flex-flow-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + /* Explicitly set min-width & min-height to 0, to prevent their "auto" + value from influencing the sizes of our flex items (particularly for + the single-line chunks of this testcase, whose items may be shrunk a + little below the numerals' intrinsic sizes): */ + min-width: 0; + min-height: 0; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer" style="flex-flow: row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap-reverse row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer" style="flex-flow: wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html new file mode 100644 index 000000000..a325959a2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html @@ -0,0 +1,133 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 18px; + } + .singleLineVert > * { + height: 18px; + float: none; + } + .hidden { + /* We use this to hide the "4" box in each of the multi-line chunks. + The testcase has 3 flex items in each flex container, but it's easier + to write this reference case w/ a hidden 4th box as a space-filler. */ + visibility: hidden; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html new file mode 100644 index 000000000..8ba3abdf4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="match" href="flexbox-flex-flow-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + /* Explicitly set min-width & min-height to 0, to prevent their "auto" + value from influencing the sizes of our flex items (particularly for + the single-line chunks of this testcase, whose items may be shrunk a + little below the numerals' intrinsic sizes): */ + min-width: 0; + min-height: 0; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer" style="flex-flow: row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap-reverse row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer" style="flex-flow: wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html new file mode 100644 index 000000000..bb76cafff --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html @@ -0,0 +1,101 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 100px; + height: 12px; + margin-bottom: 2px; + } + div.halfMainSize { + width: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + width: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-left: 80px; width: 18px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-left: 80px"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" style="float: left"></div> + <div class="halfMainSize fullCrossSize" style="float: left"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize" style="width: 98px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="hugeMainSize halfCrossSize" style="width: 98px"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="hugeMainSize halfCrossSize"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html new file mode 100644 index 000000000..75137a2f3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing flex-wrap in horizontal flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 100px; + height: 12px; + margin-bottom: 2px; + } + div.halfMainSize { + width: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + width: 148px; + border: 1px solid purple; + background: fuchsia; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-left: 80px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-left: 80px; flex: none"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-right: 1px"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize" style="margin-right: 1px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize" style="flex: none"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize" style="flex: none"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html new file mode 100644 index 000000000..88c3beb19 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html @@ -0,0 +1,64 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + min-width: 100px; + height: 12px; + float: left; + clear: both; + margin-bottom: 2px; + } + div.smallItem { + width: 30px; + border: 1px solid blue; + background: lightblue; + float: left; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-width: 120px"> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html new file mode 100644 index 000000000..901a31ec5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + min-width: 100px; + height: 12px; + float: left; + clear: both; + margin-bottom: 2px; + } + div.smallItem { + width: 30px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-width: 120px"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html new file mode 100644 index 000000000..67f2c75da --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html @@ -0,0 +1,102 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + height: 100px; + margin-right: 2px; + float: left; + } + div.halfMainSize { + height: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + height: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + width: 10px; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-top: 80px; height: 18px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-top: 80px"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize" style="height: 98px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="hugeMainSize halfCrossSize" style="float: left"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html new file mode 100644 index 000000000..b5229b65b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing flex-wrap in vertical flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 12px; + height: 100px; + margin-right: 2px; + float: left; + } + div.halfMainSize { + height: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + height: 148px; + border: 1px solid purple; + background: fuchsia; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize"></div> + </div> + + <!-- Single small flex item with 'margin-top' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-top: 80px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-top' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-top: 80px; flex: none"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-bottom: 1px"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize" style="margin-bottom: 1px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize" style="flex: none"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize" style="flex: none"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html new file mode 100644 index 000000000..f9a4553cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html @@ -0,0 +1,59 @@ +<!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"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + min-height: 100px; + margin-right: 2px; + float: left; + } + div.smallItem { + height: 30px; + border: 1px solid blue; + background: lightblue; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-height: 120px"> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html new file mode 100644 index 000000000..8a2dcbc40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 12px; + min-height: 100px; + margin-right: 2px; + float: left; + } + div.smallItem { + height: 30px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-height: 120px"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html new file mode 100644 index 000000000..7441b282f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexbox { + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + vertical-align: top; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 34px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html new file mode 100644 index 000000000..43d512dcd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html new file mode 100644 index 000000000..229540ff4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html new file mode 100644 index 000000000..38071c22f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexbox { + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + vertical-align: top; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 16px; + height: 40px"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 40px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 34px; + height: 40px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html new file mode 100644 index 000000000..cf1c7a74c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html new file mode 100644 index 000000000..38e43a835 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexbox { + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + vertical-align: top; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 16px"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 34px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html new file mode 100644 index 000000000..bf2912f04 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html new file mode 100644 index 000000000..2bfd4550c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexbox { + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + vertical-align: top; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html new file mode 100644 index 000000000..fe7d806bc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html new file mode 100644 index 000000000..513fc0dca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexbox { + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + vertical-align: top; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 6px; + height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 40px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + height: 40px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html new file mode 100644 index 000000000..764075c10 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml new file mode 100644 index 000000000..7e02b799f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml @@ -0,0 +1,115 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, with floated elements in place of flex items, and using + "position: relative" on those elements, to make z-index work on them + outside of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 90px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + float: left; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + margin-right: 10px; + float: left; + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + .z0, .z1, .zn1 { position: relative; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zn1 { z-index: -1; } + + </style> + </head> + <body> + <!-- No "z-index" --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> + <div class="flexbox"> + <div class="a z0"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml new file mode 100644 index 000000000..fac905339 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml @@ -0,0 +1,114 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, with + "z-index" set on some of them, which should make them create + stacking contexts. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing that 'z-index' property makes flex items form stacking contexts</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> + <link rel="match" href="flexbox-items-as-stacking-contexts-001-ref.xhtml"/> + <style> + .flexbox { + width: 90px; + height: 10px; + border: 2px solid gray; + display: flex; + margin-bottom: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + margin-right: 10px; + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zn1 { z-index: -1; } + + </style> + </head> + <body> + <!-- No "z-index" --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> + <div class="flexbox"> + <div class="a z0"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html new file mode 100644 index 000000000..a67a31936 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html @@ -0,0 +1,66 @@ +<!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> + body { font: 10px sans-serif } + .flexContainer { + background: orange; + width: 70px; + padding: 2px; + margin-bottom: 2px; + } + + .flexContainer > div:first-child { + margin-right: 10px; /* the space between the flex items, in testcase */ + } + + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + } + </style> +</head> +<body> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item2">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> + + <div class="flexContainer" + ><div class="item2">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> + + <div class="flexContainer" + ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html new file mode 100644 index 000000000..4b21404a9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks flex items are painted atomically. In particular, + if one item has content that overflows into the region of another item, + then one item is painted "behind" the other; there shouldn't normally + any interleaving of backgrounds and content between the two items. + + This testcase also tests some special cases that will change the paint + ordering - specifically, the properties "position", "z-index", and + "order" on flex items. + --> +<!-- This was resolved by the CSSWG in April 2013: + http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> +<html> +<head> + <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> + <link rel="match" href="flexbox-items-as-stacking-contexts-002-ref.html"> + <style> + body { font: 10px sans-serif } + .flexContainer { + background: orange; + display: flex; + justify-content: space-between; + width: 70px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + background: lightblue; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + } + .item2 { + background: yellow; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + } + </style> +</head> +<body> + <!-- This container has two flex items, the first of which has content + sticking out & overlapping the second. If they're painting atomically + (and in the right order), the second item's background should cover the + first item's overflowing content. --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item is relatively positioned, which should make it paint + on top of everything. --> + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item is has "z-index" set, which should make it paint on + top of everything. --> + <div class="flexContainer" + ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item has "order" set to a higher value than default, + which should make it paint on top (and at the far right) --> + <div class="flexContainer" + ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- And for thoroughness, let's set "order" to a lower value than default, + on the second item. (Should render the same as previous example.) --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div + ></div> + + <!-- ...but if we relatively position that second item, it should paint + on top again, despite its low "order" value. --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div + ></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html new file mode 100644 index 000000000..814f06cca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html @@ -0,0 +1,71 @@ +<!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: orange; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + height: 16px; + padding: 2px; + margin-right: 2px; + vertical-align: top; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + height: 16px; + padding: 2px; + vertical-align: top; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <div class="flexContainer" + ><div class="item1" + ><div class="grandchildA"></div + ><div class="grandchildB"></div + ></div + ><div class="item2" + ><div class="grandchildC"></div + ></div + ></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html new file mode 100644 index 000000000..5f0fd8ba3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that flex items are painted as pseudo-stacking + contexts, instead of full stacking contexts. In other words, content + inside of one flex item should be able to iterleave between pieces of + content in another flex item, if we set appropriately interleaving + "z-index" values. --> +<!-- This was resolved by the CSSWG in April 2013: + http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> +<html> +<head> + <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> + <link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html"> + <style> + .flexContainer { + background: orange; + display: flex; + justify-content: space-between; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + background: lightblue; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + padding: 2px; + } + .item2 { + background: yellow; + width: 30px; + padding: 2px; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <!-- This flex container's first flex item has content that overflows + and overlap the second flex item. The z-index values are set such + that this content should interleave; grandchildC should + paint on top of grandchildA, but underneath grandchildB. --> + <div class="flexContainer" + ><div class="item1" + ><div class="grandchildA"></div + ><div class="grandchildB"></div + ></div + ><div class="item2" + ><div class="grandchildC"></div + ></div + ></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml new file mode 100644 index 000000000..4619337e7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml @@ -0,0 +1,145 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-left: 140px"/> + </div> + <div class="flexbox"> + <div class="a" + /><div class="b" style="margin-left: 20px" + /><div class="c" style="margin-left: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 35px" + /><div class="b" style="margin-left: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(40px / 6)" + /><div class="b" style="margin-left: calc(40px / 3)" + /><div class="c" style="margin-left: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(140px / 3)" + /><div class="b" style="margin-left: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 10px" + /><div class="b" style="margin-left: 10px" + /><div class="c" style="margin-left: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml new file mode 100644 index 000000000..37c9db7a3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml @@ -0,0 +1,139 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + div.a { + height: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 50px; + background: pink; + } + div.c { + height: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml new file mode 100644 index 000000000..43c540564 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml @@ -0,0 +1,145 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, testing each + possible value of the 'justify-content' property. The flex containers' + widths are determined by their "min-width" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + min-width: 200px; + display: flex; + margin-bottom: 2px; + + /* Use "float" to trigger intrinsic sizing, which in this case will + make us clamp to "min-width": */ + float: left; + clear: both; + } + div.a { + height: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 50px; + background: pink; + } + div.c { + height: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml new file mode 100644 index 000000000..0e43e6ff8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml @@ -0,0 +1,159 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + line-height: 0; + margin-bottom: 4px; + border: 1px dotted black; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 50px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-left: 118px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" + /><div style="margin-left: 4px"><div class="b"/></div + ><div style="margin-left: 4px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 29.5px" + /><div style="margin-left: 59px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(8px / 6)" + /><div style="margin-left: calc(8px / 3)"><div class="b"/></div + ><div style="margin-left: calc(8px / 3)"><div class="c"/></div> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(118px / 3)" + /><div style="margin-left: calc(118px / 3)"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 2px" + /><div style="margin-left: 2px"><div class="b"/></div + ><div style="margin-left: 2px"><div class="c"/></div> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml new file mode 100644 index 000000000..93d34ab79 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml @@ -0,0 +1,152 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of flex containers testing each possible value of + the 'justify-content' property, with margin/border/padding on the + flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-002-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 4px; + border: 1px dotted black; + } + div.a { + height: 10px; + flex: 0 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + flex: 0 50px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + flex: 0 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml new file mode 100644 index 000000000..4ad2dc202 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml @@ -0,0 +1,138 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 35px; + background: lightgreen; + } + div.b { + height: 20px; + width: 40px; + background: pink; + } + div.c { + height: 20px; + width: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml new file mode 100644 index 000000000..40c8fb5c0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml @@ -0,0 +1,147 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples testing each + possible value of the 'justify-content' property, and with each + individual flex item being wider than the flexbox itself (so that + there isn't any packing space available). + * For 'flex-start'/'space-between', we should overflow on the end + (right) side. + * For 'flex-end', we should overflow on the start (left) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-003-ref.xhtml"/> + <style> + body { margin-left: 100px; } /* So we can see left-overflowed stuff */ + div.flexbox { + width: 30px; + display: flex; + margin-bottom: 2px; + } + div.a { + height: 20px; + flex: 0 0 35px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 0 40px; + background: pink; + } + div.c { + height: 20px; + flex: 0 0 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml new file mode 100644 index 000000000..231729d85 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml @@ -0,0 +1,150 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + line-height: 0; + margin-bottom: 4px; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 40px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-left: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml new file mode 100644 index 000000000..8f46426e4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml @@ -0,0 +1,158 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples testing each + possible value of the 'justify-content' property, and with each + individual flex item being wider than the flexbox itself (so that + there isn't any packing space available). + * For 'flex-start'/'space-between', we should overflow on the end + (right) side. + * For 'flex-end', we should overflow on the start (left) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-004-ref.xhtml"/> + <style> + body { margin-left: 100px; } /* So we can see left-overflowed stuff */ + div.flexbox { + width: 30px; + display: flex; + margin-bottom: 4px; + } + div.a { + height: 10px; + flex: 0 0 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + flex: 0 0 40px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + flex: 0 0 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml new file mode 100644 index 000000000..82f872d29 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml @@ -0,0 +1,189 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { line-height: 0; } + + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + .centerParent { + text-align: center; + } + .center { + display: inline-block; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div style="clear:right;"></div> + + <!-- center --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="float: right"/> + </div> + <div class="flexbox"> + <div class="a" style="display:block; float: left"/> + <div class="c" style="float:right"/> + <!-- Use fixed-size margins to subtract space for "a" and "c", and then + use auto margins to center 'b' within the remaining space --> + <div style="display: block; margin-left: 10px; margin-right: 100px"> + <div class="b" style="margin: auto"/> + </div> + </div> + + <!-- space-around --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <!-- For the rest, we'll use a flex container with invisible flexible items + instead of packing space. That's simpler than trying to hack up + a width-independent reference case for "justify-content: space-around". + (There are other reftests to ensure that basic flex container + behavior is correct, so it's safe to rely on it here.) --> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 0.5"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 0.5"/> + </div> + + <!-- space-evenly --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <!-- As above with space-around, we'll use a flex container with invisible + flexible items instead of packing space. --> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 1"/> + </div> + + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div style="clear:right;"></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml new file mode 100644 index 000000000..53cba03fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml @@ -0,0 +1,138 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to exercise each possible value of the 'justify-content' + property, in an auto-sized horizontal flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in an auto-sized horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-005-ref.xhtml"/> + <style> + div.flexbox { + display: flex; + } + div.a { + height: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 50px; + background: pink; + } + div.c { + height: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml new file mode 100644 index 000000000..20f1c5df3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml @@ -0,0 +1,143 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-top: 140px"/> + </div> + <div class="flexbox"> + <div class="a" + /><div class="b" style="margin-top: 20px" + /><div class="c" style="margin-top: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 35px" + /><div class="b" style="margin-top: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(40px / 6)" + /><div class="b" style="margin-top: calc(40px / 3)" + /><div class="c" style="margin-top: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(140px / 3)" + /><div class="b" style="margin-top: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 10px" + /><div class="b" style="margin-top: 10px" + /><div class="c" style="margin-top: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml new file mode 100644 index 000000000..d4b32b391 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml @@ -0,0 +1,141 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml new file mode 100644 index 000000000..0ce154e24 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml @@ -0,0 +1,142 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. The flex containers' + heights are determined by their "min-height" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container with "min-height"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + min-height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml new file mode 100644 index 000000000..d0ca31012 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml @@ -0,0 +1,156 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + border: 1px dotted black; + float: left; + } + div.a { + width: 10px; + height: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 50px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 100px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-top: 123px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" + /><div style="margin-top: 9px"><div class="b"/></div + ><div style="margin-top: 10px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 29.5px" + /><div style="margin-top: 64px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(8px / 6)" + /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div + ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(118px / 3)" + /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 2px" + /><div style="margin-top: 7px"><div class="b"/></div + ><div style="margin-top: 8px"><div class="c"/></div> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml new file mode 100644 index 000000000..21683a6cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml @@ -0,0 +1,154 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of flex containers testing each possible value of + the 'justify-content' property, with margin/border/padding on the + flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-002-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 10px; + flex: 0 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + flex: 0 50px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + flex: 0 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml new file mode 100644 index 000000000..a205a6bad --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml @@ -0,0 +1,136 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 35px; + background: lightgreen; + } + div.b { + width: 20px; + height: 40px; + background: pink; + } + div.c { + width: 20px; + height: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml new file mode 100644 index 000000000..dd32333e4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml @@ -0,0 +1,150 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers testing each possible + value of the 'justify-content' property, and with each individual + flex item being larger than the flexbox itself (so that there isn't any + packing space available). + + * For 'flex-start'/'space-between', we should overflow on the end + (bottom) side. + * For 'flex-end', we should overflow on the start (top) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-003-ref.xhtml"/> + <style> + body { margin-top: 100px; } /* So we can see top-overflowed stuff */ + div.flexbox { + height: 30px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 0 35px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 0 40px; + background: pink; + } + div.c { + width: 20px; + flex: 0 0 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml new file mode 100644 index 000000000..b3a45e06f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml @@ -0,0 +1,147 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-right: 4px; + float: left; + } + div.a { + width: 10px; + height: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 40px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 45px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml new file mode 100644 index 000000000..770ba7ba4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml @@ -0,0 +1,161 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each possible + value of the 'justify-content' property, and with each individual + flex item being larger than the flexbox itself (so that there isn't any + packing space available). Also, we've got margin/border/padding on the + flex items. + * For 'flex-start'/'space-between', we should overflow on the end + (bottom) side. + * For 'flex-end', we should overflow on the start (top) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-004-ref.xhtml"/> + <style> + body { margin-top: 100px; } /* So we can see top-overflowed stuff */ + div.flexbox { + height: 30px; + display: flex; + flex-direction: column; + margin-right: 4px; + float: left; + } + div.a { + width: 10px; + flex: 0 0 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + flex: 0 0 40px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + flex: 0 0 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml new file mode 100644 index 000000000..ebc97819a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml @@ -0,0 +1,135 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml new file mode 100644 index 000000000..bb99dd09b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml @@ -0,0 +1,144 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to exercise each possible value of the 'justify-content' + property, in an auto-sized vertical flex container. The flex container + should shrink-wrap its contents' heights, leaving no packing space + available. So, the "justify-content" values should have no effect + in this testcase. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in an auto-sized vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/> + <style> + div.flexbox { + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml new file mode 100644 index 000000000..1321e5a38 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; } + div.flexbox { + width: 200px; + background: lightgray; + margin-bottom: 2px; + } + div.a { + width: 20px; + background: green; + display: inline-block; + } + div.b { + width: 20px; + background: pink; + display: inline-block; + } + div.c { + width: 20px; + background: purple; + display: inline-block; + } + + <!-- These classes allow us to conveniently/concisely specify margin + values below, for exact positioning of the items on each reference + line. ("l" = "margin-_l_eft", and the number = number of pixels) --> + div.l180 { margin-left: 180px } + div.l90 { margin-left: 90px } + div.l80 { margin-left: 80px } + div.l70 { margin-left: 70px } + div.l53 { margin-left: calc(160px / 3) } <!-- == 53.33333px --> + div.l35 { margin-left: 35px } + </style> + </head> + <body> + <!-- just one item --> + <div class="flexbox"> + <div class="a l180"/> + </div> + <div class="flexbox"> + <div class="b l90"/> + </div> + <div class="flexbox"> + <div class="c"/> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a l53"/><div class="b l53"/> + </div> + <div class="flexbox"> + <div class="a l80"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l53"/><div class="c l53"/> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a l35"/><div class="b l35"/><div class="c l35"/> + </div> + <div class="flexbox"> + <div class="a l35"/><div class="c"/><div class="b l70"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="a l70"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="c l35"/><div class="a l70"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="a l70"/><div class="b l35"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b l70"/><div class="a l70"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml new file mode 100644 index 000000000..76d7a8831 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-left and/or margin-right set to 'auto'. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing horizontal auto margins on flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> + <link rel="match" href="flexbox-margin-auto-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + height: 20px; + background: lightgray; + display: flex; + margin-bottom: 2px; + } + div.a { + width: 20px; + background: green; + margin-left: auto; + } + div.b { + width: 20px; + background: pink; + margin-left: auto; + margin-right: auto; + } + div.c { + width: 20px; + background: purple; + margin-right: auto; + } + </style> + </head> + <body> + <!-- just one item --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/> + </div> + <div class="flexbox"> + <div class="c"/> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="c"/> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="c"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="c"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml new file mode 100644 index 000000000..b310ab97c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-top and/or margin-bottom set to 'auto' on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 2px dotted black; + display: flex; + margin-bottom: 2px; + width: 100px; + } + div.fixedSize { + width: 20px; + height: 20px; + } + div.gray { background: gray; } + div.green { background: green; } + div.pink { background: pink; } + div.blue { background: blue; } + </style> + </head> + <body> + + <!-- fixed-height flexbox, with items that have auto margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 80px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 40px"/> + </div> + <!-- fixed-height flexbox, with items that have auto & fixed margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 70px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 30px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 15px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto & fixed margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 20px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml new file mode 100644 index 000000000..a31bc7d6f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-top and/or margin-bottom set to 'auto' on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing vertical auto margins on flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> + <link rel="match" href="flexbox-margin-auto-horiz-002-ref.xhtml"/> + <style> + div.flexbox { + border: 2px dotted black; + display: flex; + margin-bottom: 2px; + width: 100px; + } + div.fixedSize { + width: 20px; + height: 20px; + } + div.gray { background: gray; } + div.green { background: green; } + div.pink { background: pink; } + div.blue { background: blue; } + + div.autoTop { margin-top: auto; } + div.autoBottom { margin-bottom: auto; } + div.fixedTop { margin-top: 10px; } + div.fixedBottom { margin-bottom: 10px; } + </style> + </head> + <body> + + <!-- fixed-height flexbox, with items that have auto margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green autoTop"/> + <div class="fixedSize pink autoBottom"/> + <div class="fixedSize blue autoTop autoBottom"/> + </div> + <!-- fixed-height flexbox, with items that have auto & fixed margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green autoTop fixedBottom"/> + <div class="fixedSize pink autoBottom fixedTop"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto margins --> + <div class="flexbox"> + <div class="fixedSize green autoTop"/> + <div class="fixedSize pink autoBottom"/> + <div class="fixedSize blue autoTop autoBottom"/> + <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto & fixed margins --> + <div class="flexbox"> + <div class="fixedSize green autoTop fixedBottom"/> + <div class="fixedSize pink autoBottom fixedTop"/> + <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml new file mode 100644 index 000000000..d30386618 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 179px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 160px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 39px"/><div class="b" style="width: 40px" + /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml new file mode 100644 index 000000000..ca4ef80ba --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 15px"/> + </div><div class="a" style="width: 179px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 124px" + /><div class="b" style="width: 66px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 30px"/> + </div><div class="b" style="width: 160px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 85px" + /><div class="flexBasis" style="width: 20px" + /><div class="b" style="width: 40px" + /><div class="a" style="width: 39px"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml new file mode 100644 index 000000000..11c723221 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "flex-direction: row-reverse" to + reverse the flex container's main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + flex-direction: row-reverse; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml new file mode 100644 index 000000000..51186205d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "direction: rtl" and + "flex-direction: row-reverse" to *doubly* reverse the flex container's + main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + flex-direction: row-reverse; + direction: rtl; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml new file mode 100644 index 000000000..00f5aa54f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "direction: rtl" to reverse + the flex container's main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a horizontal flex container with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + direction: rtl; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml new file mode 100644 index 000000000..31560f446 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml new file mode 100644 index 000000000..6203a40a0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 175px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 154px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 35px"/><div class="b" style="width: 34px" + /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml new file mode 100644 index 000000000..b47b7aa55 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing margins and borders on flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 4px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml new file mode 100644 index 000000000..b8a861655 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border/padding on flex items. (NOTE: This renders + the same as the "-2a" variant, which lacks padding, because we've + just replaced some of the "-2a" variant's content-box area with + padding-box area in this test.) --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 9px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + padding-left: 5px; + padding-right: 6px; + } + div.b { + flex: 2 0 1px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + padding-left: 1px; + padding-right: 2px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml new file mode 100644 index 000000000..a91d72b9f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml new file mode 100644 index 000000000..7929c8907 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingB" + ><div class="child2"/><div class="child1"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml new file mode 100644 index 000000000..cbe4c58b4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a row-reverse flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-reverse-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + flex-direction: row-reverse; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml new file mode 100644 index 000000000..f0dc49b5a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders and padding on a horizontal flex container and its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml new file mode 100644 index 000000000..00db4823e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml @@ -0,0 +1,95 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case - identical to the testcase, but with with the flex items' + vertical margin and padding values set to 0 by default, and then set to + specific pixel values for the items that have a 50px percent-basis. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + border: 1px dotted black; + } + div.height50 { height: 50px; } + + .marginA { margin: 0 8% 0 4%; } + .marginB { margin: 0 10% 0 14%; } + .paddingA { padding: 0 6% 0 2%; } + .paddingB { padding: 0 8% 0 12%; } + + div.height50 > .marginA { + margin-top: 5px; + margin-bottom: 3px; + } + div.height50 > .marginB { + margin-top: 4px; + margin-bottom: 6px; + } + div.height50 > .paddingA { + padding-top: 4px; + padding-bottom: 2px; + } + div.height50 > .paddingB { + padding-top: 3px; + padding-bottom: 5px; + } + + div.child1 { + flex: none; + width: 10px; + height: 10px; + background: lightgreen; + } + div.child2 { + flex: none; + width: 10px; + height: 10px; + background: purple; + } + + div.filler { + /* Filler-div to fill up content-box and make padding easier to see. */ + height: 10px; + width: 100%; + background: lightgrey; + } + + </style> + </head> + <body> + <div class="flexbox" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" style="align-items: flex-end" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" + ><div class="child1 paddingA marginA"><div class="filler"/></div + ><div class="child2 paddingB marginB"><div class="filler"/></div + ></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml new file mode 100644 index 000000000..545e54f71 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with percent-valued padding and/or margin on flex items. The spec + says that percentage values on padding/margin-top and -bottom should be + resolved against the flex container's height (not its width, as would + be the case in a block). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing percent-valued padding and margin on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/> + <style> + div { border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + border: 1px dotted black; + } + div.height50 { height: 50px; } + + .marginA { margin: 10% 8% 6% 4%; } + .marginB { margin: 8% 10% 12% 14%; } + .paddingA { padding: 8% 6% 4% 2%; } + .paddingB { padding: 6% 8% 10% 12%; } + + div.child1 { + flex: none; + width: 10px; + height: 10px; + background: lightgreen; + } + div.child2 { + flex: none; + width: 10px; + height: 10px; + background: purple; + } + + div.filler { + /* Filler-div to fill up content-box and make padding easier to see. */ + height: 10px; + width: 100%; + background: lightgrey; + } + + </style> + </head> + <body> + <!-- Flex container is auto-height - vertical margin and padding should + resolve to 0, since they don't have anything to resolve % against. --> + <div class="flexbox" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- Flex container has height: 50px - vertical margin and padding should + resolve % values against that. --> + <div class="flexbox height50" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- ...and now with align-items: flex-end, so we can see the margin-bottom + in action --> + <div class="flexbox height50" style="align-items: flex-end" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- ...and finally, with margin and padding applied to the same items --> + <div class="flexbox height50" + ><div class="child1 paddingA marginA"><div class="filler"/></div + ><div class="child2 paddingB marginB"><div class="filler"/></div + ></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001-ref.html new file mode 100644 index 000000000..146a6ad6b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 50px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 10px; + height: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html new file mode 100644 index 000000000..f69ed9561 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-001-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (a), (b), or (c) above. Another test will check (d). +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 10px; + height: 80px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + <!-- *** (a) Used 'flex-basis' (from 'height') *** --> + <!-- First, without definite max-height: --> + <div class="flexbox"> + <div style="height: 50px"><div></div></div> + </div> + <!-- ...and now with definite (& large) 'max-height': --> + <div class="flexbox"> + <div style="height: 50px; max-height: 120px;"><div></div></div> + </div> + <!-- ...and now with used 'flex-basis' being a calc expression:--> + <div class="flexbox"> + <div style="height: calc(10% + 50px)"><div></div></div> + </div> + + <!-- *** (b) The computed 'max-height' *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <div style="height: 100px; max-height:50px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px; max-height:50px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px; max-height:50px"><div></div></div> + </div> + + <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <div style="height: 100px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px"><div></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html new file mode 100644 index 000000000..ca1aad42a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + img { + width: 30px; + height: 30px; + float: left; + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html new file mode 100644 index 000000000..0fd9207fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being "width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + width: 30px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html new file mode 100644 index 000000000..e8c94f766 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being "min-width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + min-width: 30px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html new file mode 100644 index 000000000..3093c65e5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being + max-width-clamped "width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + max-width: 30px; + width: 60px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html new file mode 100644 index 000000000..ff1ced0c0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html new file mode 100644 index 000000000..15ef35d9c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-003-ref.html"> +<!-- + This testcase checks how "overflow-y" impacts the sizing behavior of flex + items with "min-height:auto" (the new initial value for "min-height"). + + In particular, the flex-item-specific "min-height:auto" behavior is + supposed to be disabled (e.g. we end up with min-height:0) when + "overflow-y" is non-"visible". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 30px; /* Shrink flex items below min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <!-- min-height:auto should prevent shrinking below intrinsic height when + the flex item has "overflow-y: visible", but not for any other + overflow-y values. --> + <div class="flexbox"><div class="yvisible"><div></div></div></div> + <div class="flexbox"><div class="yhidden"><div></div></div></div> + <div class="flexbox"><div class="yscroll"><div></div></div></div> + <div class="flexbox"><div class="yauto"><div></div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html new file mode 100644 index 000000000..768185d43 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html new file mode 100644 index 000000000..a04b9b573 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-004-ref.html"> +<!-- + This testcase checks how "overflow-x" indirectly impacts the sizing + behavior of flex items with "min-height:auto" (the new initial value + for "min-height"), via its influence on "overflow-y". + + In particular, the flex-item-specific "min-height:auto" behavior is + supposed to be disabled (e.g. we end up with min-height:0) when + "overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a + scrolling value, it forces "overflow-y" to compute to a scrolling value + as well, as described at + http://www.w3.org/TR/css-overflow-3/#overflow-properties + So, "overflow-x" has an indirect effect (via "overflow-y") here. +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 30px; /* Shrink flex items below min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <!-- min-height:auto should prevent shrinking below intrinsic height when + the flex item has "overflow-x: visible", but not for any other + overflow-x values (because of overflow-x's influence on overflow-y). + --> + <div class="flexbox"><div class="xvisible"><div></div></div></div> + <div class="flexbox"><div class="xhidden"><div></div></div></div> + <div class="flexbox"><div class="xscroll"><div></div></div></div> + <div class="flexbox"><div class="xauto"><div></div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html new file mode 100644 index 000000000..946db39cf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 50px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 10px; + width: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html new file mode 100644 index 000000000..cb347abea --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-001-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (a), (b), or (c) above. Another test will check (d). +--> + <style> + .flexbox { + display: flex; + width: 1px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 10px; + width: 80px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + <!-- *** (a) Used 'flex-basis' (from 'width') *** --> + <!-- First, without definite max-width: --> + <div class="flexbox"> + <div style="width: 50px"><div></div></div> + </div> + <!-- ...and now with definite (& large) 'max-width': --> + <div class="flexbox"> + <div style="width: 50px; max-width: 120px;"><div></div></div> + </div> + <!-- ...and now with used 'flex-basis' being a calc expression:--> + <div class="flexbox"> + <div style="width: calc(10% + 50px)"><div></div></div> + </div> + + <!-- *** (b) The computed 'max-width' *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <div style="width: 100px; max-width:50px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px; max-width:50px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px; max-width:50px"><div></div></div> + </div> + + <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <div style="width: 100px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px"><div></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html new file mode 100644 index 000000000..21beb3f93 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + img { + width: 30px; + height: 30px; + display: block; + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html new file mode 100644 index 000000000..fe60255c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being "height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + height: 30px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html new file mode 100644 index 000000000..a56b214dc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being "min-height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + min-height: 30px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html new file mode 100644 index 000000000..95b98e5b5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being + max-height-clamped "height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + max-height: 30px; + height: 60px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html new file mode 100644 index 000000000..09066eef7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html new file mode 100644 index 000000000..ecc7ab717 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-003-ref.html"> +<!-- + This testcase checks how "overflow-x" impacts the sizing behavior of flex + items with "min-width:auto" (the new initial value for "min-width"). + + In particular, the flex-item-specific "min-width:auto" behavior is + supposed to be disabled (e.g. we end up with min-width:0) when + "overflow-x" is non-"visible". +--> + <style> + .flexbox { + display: flex; + width: 30px; /* Shrink flex items below min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <!-- min-width:auto should prevent shrinking below intrinsic width when + the flex item has "overflow-x: visible", but not for any other + overflow-x values. --> + <div class="flexbox"><div class="xvisible"><div></div></div></div> + <div class="flexbox"><div class="xhidden"><div></div></div></div> + <div class="flexbox"><div class="xscroll"><div></div></div></div> + <div class="flexbox"><div class="xauto"><div></div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html new file mode 100644 index 000000000..64501367a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html new file mode 100644 index 000000000..a090f2154 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-004-ref.html"> +<!-- + This testcase checks how "overflow-y" indirectly impacts the sizing + behavior of flex items with "min-width:auto" (the new initial value + for "min-width"), via its influence on "overflow-x". + + In particular, the flex-item-specific "min-width:auto" behavior is + supposed to be disabled (e.g. we end up with min-width:0) when + "overflow-x" is non-"visible". Moreover, when "overflow-y" is set to a + scrolling value, it forces "overflow-x" to compute to a scrolling value + as well, as described at + http://www.w3.org/TR/css-overflow-3/#overflow-properties + So, "overflow-y" has an indirect effect (via "overflow-x") here. +--> + <style> + .flexbox { + display: flex; + width: 30px; /* Shrink flex items below min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <!-- min-width:auto should prevent shrinking below intrinsic width when + the flex item has "overflow-y: visible", but not for any other + overflow-y values (because of overflow-y's influence on overflow-x). + --> + <div class="flexbox"><div class="yvisible"><div></div></div></div> + <div class="flexbox"><div class="yhidden"><div></div></div></div> + <div class="flexbox"><div class="yscroll"><div></div></div></div> + <div class="flexbox"><div class="yauto"><div></div></div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html new file mode 100644 index 000000000..82af03233 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html @@ -0,0 +1,56 @@ +<!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; + 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html new file mode 100644 index 000000000..afc08d8c4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html @@ -0,0 +1,56 @@ +<!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. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-001-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html new file mode 100644 index 000000000..16cc9f4fa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html @@ -0,0 +1,51 @@ +<!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; + 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.html new file mode 100644 index 000000000..545ebb12e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.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 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> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-002-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.html new file mode 100644 index 000000000..5693c9328 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.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; + 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.html new file mode 100644 index 000000000..66cbe7662 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.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 "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> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-003-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.html new file mode 100644 index 000000000..f9ae88ce4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.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-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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.html new file mode 100644 index 000000000..ca7471f1d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.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/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-overflow-horiz-004-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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.html new file mode 100644 index 000000000..589712c6a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.html new file mode 100644 index 000000000..da4e063ca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.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/css-flexbox-1/#align-content-property"> + <link rel="match" href="flexbox-overflow-horiz-005-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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.html new file mode 100644 index 000000000..3dfddb7bb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.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; + 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html new file mode 100644 index 000000000..9c6ad35c1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html @@ -0,0 +1,56 @@ +<!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> + <title>CSS Test: Testing 'overflow' property on a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-001-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html new file mode 100644 index 000000000..cf95a6b7b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html @@ -0,0 +1,51 @@ +<!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; + 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.html new file mode 100644 index 000000000..aeec44e54 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.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 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> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-items: center'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-002-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.html new file mode 100644 index 000000000..84bf02227 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.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; + 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 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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.html new file mode 100644 index 000000000..965b99a40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.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 "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> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-003-ref.html"> + <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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.html new file mode 100644 index 000000000..154fca8cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.html new file mode 100644 index 000000000..579cb4fd1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.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/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-overflow-vert-004-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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.html new file mode 100644 index 000000000..56022a478 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.html new file mode 100644 index 000000000..1de6d1b8c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.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/css-flexbox-1/#align-content-property"> + <link rel="match" href="flexbox-overflow-vert-005-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> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml new file mode 100644 index 000000000..635b0b29c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .container { + width: 40px; + height: 14px; + border: 2px solid green; + margin-bottom: 2px; + } + .a { + width: 16px; + height: 10px; + background: blue; + min-width: 0; + border: 2px solid lightblue; + } + .b { + width: 16px; + height: 10px; + background: purple; + min-width: 0; + border: 2px solid slateblue; + } + .aKid { + margin-left: 10px; + margin-top: 2px; + width: 16px; + height: 6px; + background: yellow; + border: 1px solid black; + } + .a, .b { float: left; } + </style> + </head> + <body> + <!-- Just 6 copies of the same container, since they all should look the + same (except for the final "position: fixed" one, which needs to be + explicitly marked as "position: fixed" or else it paints differently + on Android.) --> + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container" style="position: fixed"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml new file mode 100644 index 000000000..06b42e126 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml @@ -0,0 +1,90 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, to test + their paint-order. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> + <link rel="match" href="flexbox-paint-ordering-001-ref.xhtml"/> + <style> + body { + line-height: 0; + } + .container { + width: 40px; + height: 14px; + border: 2px solid green; + margin-bottom: 2px; + } + .a { + width: 16px; + height: 10px; + background: blue; + min-width: 0; + border: 2px solid lightblue; + } + .b { + width: 16px; + height: 10px; + background: purple; + min-width: 0; + border: 2px solid slateblue; + } + .aKid { + margin-left: 10px; + margin-top: 2px; + width: 16px; + height: 6px; + background: yellow; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- inline-level flex container --> + <div class="container" style="display: inline-flex"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- block-level flex container --> + <div class="container" style="display: flex"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- floated flex container --> + <div class="container" style="display: flex; float: left"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + <!-- Helper-div to clear floats: --> + <div style="clear: both"/> + + <!-- relatively-positioned flex container --> + <div class="container" style="display: flex; position: relative"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- absolutely-positioned flex container --> + <div class="container" style="display: flex; position: absolute"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + <!--- Spacer div, since abspos div doesn't set aside space for itself --> + <div style="height: 20px"/> + + <!-- fixed-position flex container --> + <div class="container" style="display: flex; position: fixed"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml new file mode 100644 index 000000000..55ca62df7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml @@ -0,0 +1,170 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for flex items containing overlapping content. + This reference uses inline-block in place of inline-flex, with floated + children in place of flex items, and with hardcoded DOM-reordering in + place of "order" reordering. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { + line-height: 0; + } + + .flexbox { + display: inline-block; + width: 20px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + margin-right: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + float: left; /* to stack horizontally, like a flex item */ + } + .b { + width: 10px; + height: 10px; + background: pink; + float: left; /* to stack horizontally, like a flex item */ + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + /* Need to set 'position' for z-index to take effect. */ + .zn2 { z-index: -2; position: relative; } + .zn1 { z-index: -1; position: relative; } + .z0 { z-index: 0; position: relative; } + .z1 { z-index: 1; position: relative; } + + </style> + </head> + <body> + <!-- order not set: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set, but it matches content order, so it shouldn't matter: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, but not such that it changes the paint order --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, in such a way that it affects paint order --> + <div class="flexbox"> + <!-- 'a' is behind the container's border --> + <div class="b"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn2"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both in front of the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b z1"><div class="bKid"/></div> + <div class="a z0"><div class="aKid"/></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml new file mode 100644 index 000000000..55a18d5b7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml @@ -0,0 +1,176 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, with + "order" and "z-index" set on some of them, to test how that affects + paint-order. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> + <link rel="match" href="flexbox-paint-ordering-002-ref.xhtml"/> + <style> + body { + line-height: 0; + } + + .flexbox { + display: inline-flex; + width: 20px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + margin-right: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + } + + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + .on1 { order: -1; } + .o0 { order: 0; } + .o1 { order: 1; } + .o2 { order: 2; } + + .zn2 { z-index: -2; } + .zn1 { z-index: -1; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + + </style> + </head> + <body> + <!-- order not set: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set, but it matches content order, so it shouldn't matter: --> + <div class="flexbox"> + <div class="a on1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b o0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o2"><div class="aKid"/></div> + <div class="b o2"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b o0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b o1"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="a o1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b on1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b on1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o2"><div class="aKid"/></div> + <div class="b o1"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, but not such that it changes the paint order --> + <div class="flexbox"> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, in such a way that it affects paint order --> + <div class="flexbox"> + <!-- 'a' is behind the container's border --> + <div class="a o1 zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="a o1 zn1"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="a o1 zn2"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both in front of the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html new file mode 100644 index 000000000..6a72f7618 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + div { + display: flex; + justify-content: center; + } + </style> +</head> +<body> + <div>centered</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html new file mode 100644 index 000000000..195503b94 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle 'display:flex' property on + the root <html> element, with the <body> as the sole flex item. --> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Test: Testing 'display:flex' on root node</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-root-node-001-ref.html"> + <style> + html { + display: flex; + justify-content: center; + } + </style> +</head> +<body> + centered +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html new file mode 100644 index 000000000..87d4fc1e1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle 'display:flex' property on + the root <html> element, with no explicit <body>. --> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Test: Testing 'display:flex' on root node</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-root-node-001-ref.html"> + <style> + html { + display: flex; + justify-content: center; + } + </style> +</head> +centered +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html new file mode 100644 index 000000000..602c027f7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + display: block; + background: gray; + max-height: 200px; +} +.panel { + background: lightblue; + width: 150px; + height: 200px; + border: 1px solid purple; + box-sizing: border-box; +} +</style> +<div class="container"> + <div class="panel"> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html new file mode 100644 index 000000000..f97d5c578 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<link rel="match" href="flexbox-single-line-clamp-1-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + max-height: 200px; +} +.panel { + background: lightblue; + width: 150px; + border: 1px solid purple; + box-sizing: border-box; +} +.tall-child { + width: 50px; + height: 400px; +} +</style> +<div class="container"> + <div class="panel"> + <div class="tall-child"></div> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html new file mode 100644 index 000000000..fda5fa7cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + background: gray; + height: 500px; + width: 250px; +} +.panel { + background: lightblue; + border: 1px solid purple; + height: 100px; +} +</style> +<div class="container"> + <div class="panel"> + </div> + <div class="panel"> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html new file mode 100644 index 000000000..be9e50b90 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<link rel="match" href="flexbox-single-line-clamp-2-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + height: 500px; + flex-direction: column; + max-width: 250px; +} +.panel { + background: lightblue; + border: 1px solid purple; +} +.small-box { + width: 100px; + height: 100px; +} +.big-box { + width: 500px; + height: 100px; +} +</style> +<div class="container"> + <div class="panel"> + <div class="small-box"></div> + </div> + <div class="panel"> + <div class="big-box"></div> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html new file mode 100644 index 000000000..02f7eaa96 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + background: gray; + height: 80px; +} +.panel { + background: lightblue; + width: 150px; + height: 80px; +} +.contents { + height: 10px; + width: 10px; + background: purple; +} +</style> +</head> +<div class="container"> + <div class="panel"> + <div class="contents"></div> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html new file mode 100644 index 000000000..f3afbd410 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html @@ -0,0 +1,38 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="match" href="flexbox-single-line-clamp-3-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + min-height: 80px; + + /* Don't let (default) align-content:stretch save us + by stretching the line to fit the container! The point + here is that the line should already be clamped to the + container's min-height. */ + align-content: flex-start; +} +.panel { + background: lightblue; + width: 150px; +} +.contents { + height: 10px; + width: 10px; + background: purple; +} +</style> +</head> +<div class="container"> + <div class="panel"> + <div class="contents"></div> + </div> +</div> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml new file mode 100644 index 000000000..54bafd034 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 10px; } + div.flexbox { + border: 1px dashed blue; + font-size: 10px; + margin-bottom: 2px; + } + div.a, div.b, div.c { float: left } + div.a { + width: 20px; + background: lightgreen; + } + div.b { + width: 40px; + background: purple; + } + div.c { + width: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 300px"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 70px"> + <div class="a" style="width: 10px"/> + <div class="b"/> + <div class="c" style="width: 20px"/> + </div> + + <div class="flexbox" style="width: 20px"> + <!-- We add an extra layer of <div> wrapping in this chunk, with a + fixed width, to keep the overflowing children from wrapping. --> + <div style="width: 50px"> + <div class="b"/> + <div class="c" style="width: 10px"/> + </div> + </div> + + <div class="flexbox" style="width: 58px"> + <div class="a" style="width: 6px"/> + <div class="b"/> + <div class="c" style="width: 12px"/> + </div> + + <div class="flexbox" style="width: 140px"> + <div class="a" style="width: 40px"/> + <div class="b" style="width: 40px"/> + <div class="c" style="width: 60px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml new file mode 100644 index 000000000..0f9b5846d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-width" and "max-width" affect the sizing + of horizontal flex containers that have no explicit "width" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-horiz-001-ref.xhtml"/> + <style> + div { height: 10px; } + div.flexbox { + border: 1px dashed blue; + font-size: 10px; + display: flex; + margin-bottom: 2px; + } + div.a { + flex: 1 20px; + max-width: 60px; + background: lightgreen; + } + div.b { + flex: 1 20px; + min-width: 40px; + max-width: 60px; + background: purple; + } + div.c { + flex: 1 40px; + min-width: 10px; + max-width: 60px; + background: orange; + } + </style> + </head> + <body> + <!-- auto-sized horizontal flexbox should occupy the available width. --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-width: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...but a (large) max-size will limit us to that size, instead of + our available size.--> + <div class="flexbox" style="max-width: 300px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- If we set a maximum size that's even smaller, it'll limit our + size and compress our children. --> + <div class="flexbox" style="max-width: 70px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- The max-size may be small enough that our items will overflow. --> + <div class="flexbox" style="max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- But if we add a min-size, it beats the max-size. Here, we use a + min-size smaller than the sum of the items' base sizes... --> + <div class="flexbox" style="min-width: 58px; max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...and here we use a min-size larger than the sum of the items' + base sizes. --> + <div class="flexbox" style="min-width: 140px; max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml new file mode 100644 index 000000000..29aa55a62 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 200px; } + div.flexbox { + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-bottom: 5px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 6px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml new file mode 100644 index 000000000..c450dd301 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-height" and "max-height" affect the sizing + of horizontal flex containers that have no explicit "height" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-horiz-002-ref.xhtml"/> + <style> + div { width: 200px; } + div.flexbox { + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + display: flex; + margin-bottom: 5px; + } + </style> + </head> + <body> + <!-- auto-height horizontal flexbox should shrinkwrap its contents. --> + <div class="flexbox"> + <div>text</div> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-height: 2px"> + <div>text</div> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-height: 300px"> + <div>text</div> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-height: 30px"> + <div>text</div> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-height: 6px"> + <div>text</div> + </div> + + <!-- But if we add a min-size, it beats the max-size. --> + <div class="flexbox" style="min-height: 30px; max-height: 5px"> + <div>text</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml new file mode 100644 index 000000000..00c8dbaa4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 10px; } + div.flexbox { + float: left; + border: 1px dashed blue; + font-size: 10px; + margin-right: 2px; + } + div.a { + height: 20px; + background: lightgreen; + } + div.b { + height: 40px; + background: purple; + } + div.c { + height: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 30px"/> + <div class="b"/> + <div class="c" style="height: 50px"/> + </div> + + <div class="flexbox" style="height: 200px"> + <div class="a" style="height: 60px"/> + <div class="b" style="height: 60px"/> + <div class="c" style="height: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 10px"/> + <div class="b"/> + <div class="c" style="height: 20px"/> + </div> + + <div class="flexbox" style="height: 20px"> + <div class="b"/> + <div class="c" style="height: 10px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 6px"/> + <div class="b"/> + <div class="c" style="height: 12px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 40px"/> + <div class="b" style="height: 40px"/> + <div class="c" style="height: 60px"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml new file mode 100644 index 000000000..5ac29a700 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-height" and "max-height" affect the sizing + of vertical flex containers that have no explicit "height" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-vert-001-ref.xhtml"/> + <style> + div { width: 10px; } + div.flexbox { + float: left; + border: 1px dashed blue; + font-size: 10px; + display: flex; + flex-direction: column; + margin-right: 2px; + } + div.a { + flex: 1 20px; + max-height: 60px; + background: lightgreen; + } + div.b { + flex: 1 20px; + min-height: 40px; + max-height: 60px; + background: purple; + } + div.c { + flex: 1 40px; + min-height: 10px; + max-height: 60px; + background: orange; + } + </style> + </head> + <body> + <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items' + hypothetical main sizes (their flex base sizes, clamped to min/max) --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-height: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-height: 300px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-height: 120px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...even if it's large enough that our items won't occupy all the + space. --> + <div class="flexbox" style="min-height: 200px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-height: 70px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- The max-size may be small enough that our items will overflow. --> + <div class="flexbox" style="max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- But if we add a min-size, it beats the max-size. Here, we use a + min-size smaller than the sum of the items' base sizes... --> + <div class="flexbox" style="min-height: 58px; max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...and here we use a min-size larger than the sum of the items' + base sizes. --> + <div class="flexbox" style="min-height: 140px; max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml new file mode 100644 index 000000000..4a4cc5891 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + float: left; + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-right: 10px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 3px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml new file mode 100644 index 000000000..9cba454e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-width" and "max-width" affect the sizing + of vertical flex containers that have no explicit "width" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-vert-002-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + float: left; + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + display: flex; + margin-right: 10px; + } + </style> + </head> + <body> + <!-- floated auto-width vertical flexbox should shrinkwrap its contents. --> + <div class="flexbox"> + <div>AB</div> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-width: 2px"> + <div>AB</div> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-width: 300px"> + <div>AB</div> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-width: 30px"> + <div>AB</div> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-width: 3px"> + <div>AB</div> + </div> + + <!-- But if we add a min-size, it beats the max-size. --> + <div class="flexbox" style="min-width: 30px; max-width: 5px"> + <div>AB</div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml new file mode 100644 index 000000000..461152154 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for ensuring table-fixup does not happen to adjacent + table parts directly inside of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + + .a { + background: lightgreen; + width: 48px; + } + + .b { + background: yellow; + width: 48px; + } + + .c { + background: pink; + width: 48px; + } + </style> + </head> + <body> + <!-- In each example here, we simply use blocks instead of table parts --> + <div class="flexbox" + ><div class="a">cell1</div><div class="b">cell2</div + ></div> + + <div class="flexbox" + ><div class="a">cell1</div><div class="b">t</div + ></div> + + <div class="flexbox" + ><div></div + ><div class="b">cell1</div + ></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml new file mode 100644 index 000000000..00e1a54ff --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Testcase with table parts inside of a flex container, which should *not* + trigger table-fixup. We use justify-content:space-between to stick packing + space between flex items, so that we can verify that e.g. a contiguous + run of <td>s will each be blockified & form its own flex item (instead of + being aggregated into a single table & single flex item). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/> + <style> + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + + td { + /* Remove any default padding for td elements, so we can compare them + easily against blocks in the reference case. */ + padding: 0px; + } + + .a { + background: lightgreen; + width: 48px; + } + + .b { + background: yellow; + width: 48px; + } + + .c { + background: pink; + width: 48px; + } + </style> + </head> + <body> + <!-- The adjacent table-parts in each example below should *not* be + grouped into the same flex item. --> + <!-- 2 adjacent table cells --> + <div class="flexbox" + ><td class="a">cell1</td><td class="b">cell2</td></div> + + <!-- Table cell followed by tbody --> + <div class="flexbox" + ><td class="a">cell1</td><tbody class="b">t</tbody></div> + + <!-- Empty table cell (ends up occupying 2px of width), followed by + nonempty table cell.--> + <div class="flexbox" + ><td></td><td class="b">cell1</td></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml new file mode 100644 index 000000000..236e3ee3b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, with inline-blocks instead of flexbox/flex items, + with positioning done using margins. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + width: 30px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 20px; + background: lightblue; + display: inline-block; + } + img { + width: 40px; + height: 100%; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="margin-left: 85px"/> + </div> + + <div class="flexbox"> + <div class="a" style="margin-left: 37.5px" + /><div class="b" style="margin-left: 75px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="margin-left: 30px" + /><img src="support/solidblue.png" style="margin-left: 60px"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml new file mode 100644 index 000000000..3bae116b4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we don't create anonymous flex items around + runs of inline content that are _purely_ whitespace. + + The test uses "white-space: pre", to try to tempt us into honoring + that whitespace. (but we should resist that temptation). + + The test also uses 'justify-content: space-around' to be sure we can + tell whether anonymous flex items are being created around the whitespace + (since they'd claim a share of the packing space if they were there). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that anonymous flex items aren't created for pure-whitespace inline content</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + flex: none; + width: 30px; + background: lightgreen; + } + div.b { + flex: none; + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <!-- whitespace & tab after flex item --> + <div class="flexbox"><div class="a"/> </div> + + <!-- 2 spaces before flex item --> + <div class="flexbox"> <div class="a"/><div class="b"/></div> + + <!-- newline & whitespace between flex items --> + <div class="flexbox"><img src="support/solidblue.png"/> + <img src="support/solidblue.png"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml new file mode 100644 index 000000000..43a4c60ce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test is like the -1a variant, but with the whitespace removed between + flex items (since that whitespace should be ignored anyway, if we're + doing things right). +--> +<!-- XXXdholbert Does this testcase add value? + (Maybe it should be an alternate reference case.) --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that flex items are created correctly</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <div class="flexbox"><div class="a"/></div> + + <div class="flexbox"><div class="a"/><div class="b"/></div> + + <div class="flexbox" + ><img src="support/solidblue.png" + /><img src="support/solidblue.png"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml new file mode 100644 index 000000000..b7de64727 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This reference case is the same as the testcase, but with an explicit <div> + around each run of content that we expect to turn into an anonymous + flex item (to ensure that the whitespace is included). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of flexbox --> + <div class="flexbox"><div> abc</div><div class="a"/></div> + <div class="flexbox"><div>abc </div><div class="a"/></div> + <div class="flexbox"><div> abc </div><div class="a"/></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"/><div> abc</div></div> + <div class="flexbox"><div class="a"/><div>abc </div></div> + <div class="flexbox"><div class="a"/><div> abc </div></div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"/><div> abc</div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div>abc </div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div> abc </div><div class="b"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml new file mode 100644 index 000000000..e7d00d2f2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we preserve whitespace at the beginning & end of + anonymous flex items (using "white-space: pre" so that it actually + occupies space and affects the rendering). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-002-ref.xhtml"/> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of flexbox --> + <div class="flexbox"> abc<div class="a"/></div> + <div class="flexbox">abc <div class="a"/></div> + <div class="flexbox"> abc <div class="a"/></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"/> abc</div> + <div class="flexbox"><div class="a"/>abc </div> + <div class="flexbox"><div class="a"/> abc </div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"/> abc<div class="b"/></div> + <div class="flexbox"><div class="a"/>abc <div class="b"/></div> + <div class="flexbox"><div class="a"/> abc <div class="b"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html new file mode 100644 index 000000000..98d23cc8d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + align-self: center; + content: 'b'; + background: yellow; + } + .fakeAfter { + align-self: center; + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html new file mode 100644 index 000000000..0abf6ea89 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on + a flex container and treat them as flex items (e.g. honoring "align-self", + and not merging them into anonymous flex items formed around text). +--> +<html> +<head> + <title>CSS Test: Testing that generated content nodes are treated as a flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + div.withBefore::before { + align-self: center; + content: 'b'; + background: yellow; + } + div.withAfter::after { + align-self: center; + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer withBefore"> + x + <div>y</div> + z + </div> + <div class="flexContainer withAfter"> + x + <div>y</div> + z + </div> + <div class="flexContainer withBefore withAfter"> + x + <div>y</div> + z + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html new file mode 100644 index 000000000..48d17019b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + background: yellow; + /* This 'order' value should place us after the other elements, visually, + even though we're ::before. */ + order: 1; + } + .fakeAfter { + background: lightblue; + order: -1; + } + </style> +</head> +<body> + <!-- 'b' should be at end, due to its high 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::before' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + </div> + + <!-- 'a' should be at beginning, due to its low 'order' value: --> + <div class="flexContainer"> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- 'a' should be at end, since it's '::after' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' + should be at end, due to their 'order' values --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...but now the normal item "I" has its order increased, so it'll go + at the end. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...and now the normal item "I" has its order reduced, so it'll go + at the beginning. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html new file mode 100644 index 000000000..6e0738e74 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on + a flex container and treat them as flex items (e.g. honoring "order"). +--> +<html> +<head> + <title>CSS Test: Testing that generated content nodes are treated as a flex items, and honor 'order'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + margin-bottom: 2px; + background: lightgray; + } + .withBefore::before { + content: 'b'; + background: yellow; + /* This 'order' value should place us after the other elements, visually, + even though we're ::before. */ + order: 1; + } + .withAfter::after { + content: 'a'; + background: lightblue; + /* This 'order' value should place us before the other elements, visually, + even though we're ::after. */ + order: -1; + } + </style> +</head> +<body> + <!-- 'b' should be at end, due to its high 'order' value: --> + <div class="flexContainer withBefore"> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::before' and the other item has + a matching 'order' value: --> + <div class="flexContainer withBefore"> + <div style="order: 1">I</div> + </div> + + <!-- 'a' should be at beginning, due to its low 'order' value: --> + <div class="flexContainer withAfter"> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::after' and the other item has + a matching 'order' value: --> + <div class="flexContainer withAfter"> + <div style="order: -1">I</div> + </div> + + <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' + should be at end, due to their 'order' values --> + <div class="flexContainer withBefore withAfter"> + <div>I</div> + </div> + + <!-- ...but now the normal item "I" has its order increased, so it'll go + at the end. --> + <div class="flexContainer withBefore withAfter"> + <div style="order: 1">I</div> + </div> + + <!-- ...and now the normal item "I" has its order reduced, so it'll go + at the beginning. --> + <div class="flexContainer withBefore withAfter"> + <div style="order: -1">I</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html new file mode 100644 index 000000000..bdb973023 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + content: 'b'; + background: yellow; + align-self: center; + order: 1; + } + .fakeAfter { + content: 'a'; + background: lightblue; + align-self: center; + order: -1; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html new file mode 100644 index 000000000..fe531b126 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a + flex container, specifically when they've got display:table-row or + table-cell. + + The table-row / table-cell 'display' values should be blockified, and the + pseudo-elements should be treated as flex items. (They should not get + wrapped in an anonymous table box.) --> +<html> +<head> + <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + div.withBefore::before { + display: table-row; + content: 'b'; + background: yellow; + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: 1; + } + div.withAfter::after { + display: table-cell; + content: 'a'; + background: lightblue; + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: -1; + } + </style> +</head> +<body> + <div class="flexContainer withBefore"> + x + <div>y</div> + z + </div> + <div class="flexContainer withAfter"> + x + <div>y</div> + z + </div> + <div class="flexContainer withBefore withAfter"> + x + <div>y</div> + z + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html new file mode 100644 index 000000000..e2d59662a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: horizontal-tb; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html new file mode 100644 index 000000000..b2fb6d3f1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: horizontal-tb; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html new file mode 100644 index 000000000..4c3166171 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: vertical-rl; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html new file mode 100644 index 000000000..8e1c724ed --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: vertical-rl; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html new file mode 100644 index 000000000..2d89eea66 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: vertical-lr; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html new file mode 100644 index 000000000..9b4450487 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: vertical-lr; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html new file mode 100644 index 000000000..1176830b5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: horizontal-tb; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html new file mode 100644 index 000000000..38f415868 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-004-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: horizontal-tb; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html new file mode 100644 index 000000000..a0894911b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: vertical-rl; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html new file mode 100644 index 000000000..65826fc2e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-005-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: vertical-rl; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html new file mode 100644 index 000000000..8c045354b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html @@ -0,0 +1,76 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: vertical-lr; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html new file mode 100644 index 000000000..3e8352a45 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-006-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: vertical-lr; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html new file mode 100644 index 000000000..0d2e9207b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html @@ -0,0 +1,56 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html new file mode 100644 index 000000000..521af54af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-007-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: horizontal-tb; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html new file mode 100644 index 000000000..8a21dd65f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html @@ -0,0 +1,56 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html new file mode 100644 index 000000000..98fd83fbc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-008-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: vertical-lr; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html new file mode 100644 index 000000000..5a96eb999 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html @@ -0,0 +1,56 @@ +<!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"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html new file mode 100644 index 000000000..edd63a982 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-009-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: vertical-rl; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list b/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list new file mode 100644 index 000000000..41635050d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list @@ -0,0 +1,206 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests for absolutely-positioned children of a flex container +== flexbox-abspos-child-001a.html flexbox-abspos-child-001a.html +== flexbox-abspos-child-001b.html flexbox-abspos-child-001b.html + +# Tests for handling anonymous flex items +== flexbox-anonymous-items-001.html flexbox-anonymous-items-001.html + +# Tests for alignment of flex lines (align-content property) +== flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001a.xhtml +== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001b.xhtml +== flexbox-align-content-vert-001a.xhtml flexbox-align-content-vert-001a.xhtml +== flexbox-align-content-vert-001b.xhtml flexbox-align-content-vert-001b.xhtml + +# Tests for cross-axis alignment (align-self / align-items properties) +== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001a.xhtml +== flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001b.xhtml +== flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002.xhtml +== flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003.xhtml +== flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004.xhtml +== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005.xhtml + +== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001.html +== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002.html + +== flexbox-align-self-horiz-001-block.xhtml flexbox-align-self-horiz-001-block.xhtml +== flexbox-align-self-horiz-001-table.xhtml flexbox-align-self-horiz-001-table.xhtml +random == flexbox-align-self-horiz-002.xhtml flexbox-align-self-horiz-002.xhtml +== flexbox-align-self-horiz-003.xhtml flexbox-align-self-horiz-003.xhtml +== flexbox-align-self-horiz-004.xhtml flexbox-align-self-horiz-004.xhtml +== flexbox-align-self-horiz-005.xhtml flexbox-align-self-horiz-005.xhtml +== flexbox-align-self-vert-001.xhtml flexbox-align-self-vert-001.xhtml +== flexbox-align-self-vert-002.xhtml flexbox-align-self-vert-002.xhtml +== flexbox-align-self-vert-003.xhtml flexbox-align-self-vert-003.xhtml +== flexbox-align-self-vert-004.xhtml flexbox-align-self-vert-004.xhtml +fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-align-self-vert-rtl-001.xhtml +== flexbox-align-self-vert-rtl-002.xhtml flexbox-align-self-vert-rtl-002.xhtml +== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003.xhtml +== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004.xhtml + +# Tests for computing the baseline of a flex container +== flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001.html +== flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001.html +== flexbox-baseline-empty-001a.html flexbox-baseline-empty-001a.html +== flexbox-baseline-empty-001b.html flexbox-baseline-empty-001b.html +== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001.html +== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001.html +== flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001.html +== flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002.html +== flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003.html +== flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004.html +== flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001.html +== flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002.html +== flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001a.html +== flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001b.html + +# Basic tests with with blocks as flex items +== flexbox-basic-block-horiz-001.xhtml flexbox-basic-block-horiz-001.xhtml +== flexbox-basic-block-vert-001.xhtml flexbox-basic-block-vert-001.xhtml + +# Tests for basic handling of <canvas>/<img>/etc as a flex item +== flexbox-basic-canvas-horiz-001.xhtml flexbox-basic-canvas-horiz-001.xhtml +== flexbox-basic-canvas-vert-001.xhtml flexbox-basic-canvas-vert-001.xhtml +== flexbox-basic-fieldset-horiz-001.xhtml flexbox-basic-fieldset-horiz-001.xhtml +== flexbox-basic-fieldset-vert-001.xhtml flexbox-basic-fieldset-vert-001.xhtml +== flexbox-basic-iframe-horiz-001.xhtml flexbox-basic-iframe-horiz-001.xhtml +== flexbox-basic-iframe-vert-001.xhtml flexbox-basic-iframe-vert-001.xhtml +== flexbox-basic-img-horiz-001.xhtml flexbox-basic-img-horiz-001.xhtml +== flexbox-basic-img-vert-001.xhtml flexbox-basic-img-vert-001.xhtml +== flexbox-basic-textarea-horiz-001.xhtml flexbox-basic-textarea-horiz-001.xhtml +== flexbox-basic-textarea-vert-001.xhtml flexbox-basic-textarea-vert-001.xhtml +== flexbox-basic-video-horiz-001.xhtml flexbox-basic-video-horiz-001.xhtml +== flexbox-basic-video-vert-001.xhtml flexbox-basic-video-vert-001.xhtml + +# Tests for "page-break-before" / "page-break-after" on a flex item +== flexbox-break-request-horiz-001a.html flexbox-break-request-horiz-001a.html +== flexbox-break-request-horiz-001b.html flexbox-break-request-horiz-001b.html +== flexbox-break-request-horiz-002a.html flexbox-break-request-horiz-002a.html +== flexbox-break-request-horiz-002b.html flexbox-break-request-horiz-002b.html +== flexbox-break-request-vert-001a.html flexbox-break-request-vert-001a.html +== flexbox-break-request-vert-001b.html flexbox-break-request-vert-001b.html +== flexbox-break-request-vert-002a.html flexbox-break-request-vert-002a.html +== flexbox-break-request-vert-002b.html flexbox-break-request-vert-002b.html + +# Tests for flex items with "visibility:collapse" +== flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001.html +== flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001.html +== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002.html +== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003.html + +# Tests for flex-flow shorthand property +== flexbox-flex-flow-001.html flexbox-flex-flow-001.html +== flexbox-flex-flow-002.html flexbox-flex-flow-002.html + +# Tests for flex-wrap property +== flexbox-flex-wrap-horiz-001.html flexbox-flex-wrap-horiz-001.html +== flexbox-flex-wrap-horiz-002.html flexbox-flex-wrap-horiz-002.html +== flexbox-flex-wrap-vert-001.html flexbox-flex-wrap-vert-001.html +== flexbox-flex-wrap-vert-002.html flexbox-flex-wrap-vert-002.html + +# Tests for intrinsic ratio interactions on flex items. +# (Note that tests 001 and 002 share a reference case; they render the same, +# because they don't do any direction-specific stretching/flexing.) +== flexbox-intrinsic-ratio-001.html flexbox-intrinsic-ratio-001.html +== flexbox-intrinsic-ratio-002.html flexbox-intrinsic-ratio-002.html +== flexbox-intrinsic-ratio-003.html flexbox-intrinsic-ratio-003.html +== flexbox-intrinsic-ratio-004.html flexbox-intrinsic-ratio-004.html +== flexbox-intrinsic-ratio-005.html flexbox-intrinsic-ratio-005.html +== flexbox-intrinsic-ratio-006.html flexbox-intrinsic-ratio-006.html + +# Tests for flex items as (pseudo) stacking contexts +== flexbox-items-as-stacking-contexts-001.xhtml flexbox-items-as-stacking-contexts-001.xhtml +== flexbox-items-as-stacking-contexts-002.html flexbox-items-as-stacking-contexts-002.html +== flexbox-items-as-stacking-contexts-003.html flexbox-items-as-stacking-contexts-003.html + +# Tests for main-axis alignment (jusify-content property) +== flexbox-justify-content-horiz-001a.xhtml flexbox-justify-content-horiz-001a.xhtml +== flexbox-justify-content-horiz-001b.xhtml flexbox-justify-content-horiz-001b.xhtml +== flexbox-justify-content-horiz-002.xhtml flexbox-justify-content-horiz-002.xhtml +== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003.xhtml +== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004.xhtml +== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005.xhtml +== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001a.xhtml +== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001b.xhtml +== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002.xhtml +== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003.xhtml +== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004.xhtml +== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005.xhtml + +# Tests for flexbox with margin, border, and/or padding on flex items +== flexbox-margin-auto-horiz-001.xhtml flexbox-margin-auto-horiz-001.xhtml +== flexbox-margin-auto-horiz-002.xhtml flexbox-margin-auto-horiz-002.xhtml +== flexbox-mbp-horiz-001.xhtml flexbox-mbp-horiz-001.xhtml +== flexbox-mbp-horiz-001-reverse.xhtml flexbox-mbp-horiz-001-reverse.xhtml +== flexbox-mbp-horiz-001-rtl.xhtml flexbox-mbp-horiz-001-rtl.xhtml +== flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-rtl-reverse.xhtml +random == flexbox-mbp-horiz-002a.xhtml flexbox-mbp-horiz-002a.xhtml +random == flexbox-mbp-horiz-002b.xhtml flexbox-mbp-horiz-002b.xhtml +== flexbox-mbp-horiz-003.xhtml flexbox-mbp-horiz-003.xhtml +== flexbox-mbp-horiz-003-reverse.xhtml flexbox-mbp-horiz-003-reverse.xhtml +== flexbox-mbp-horiz-004.xhtml flexbox-mbp-horiz-004.xhtml + +# Tests for min-height:auto / min-width:auto on flex items +== flexbox-min-height-auto-001.html flexbox-min-height-auto-001.html +== flexbox-min-height-auto-002a.html flexbox-min-height-auto-002a.html +== flexbox-min-height-auto-002b.html flexbox-min-height-auto-002b.html +# bug 1055354 +== flexbox-min-height-auto-002c.html flexbox-min-height-auto-002c.html +== flexbox-min-height-auto-003.html flexbox-min-height-auto-003.html +== flexbox-min-height-auto-004.html flexbox-min-height-auto-004.html +== flexbox-min-width-auto-001.html flexbox-min-width-auto-001.html +== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002a.html +== flexbox-min-width-auto-002b.html flexbox-min-width-auto-002b.html +== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002c.html +== flexbox-min-width-auto-003.html flexbox-min-width-auto-003.html +== flexbox-min-width-auto-004.html flexbox-min-width-auto-004.html + +# Tests for flex containers with the "overflow" property set +== flexbox-overflow-horiz-001.html flexbox-overflow-horiz-001.html +== flexbox-overflow-horiz-002.html flexbox-overflow-horiz-002.html +== flexbox-overflow-horiz-003.html flexbox-overflow-horiz-003.html +== flexbox-overflow-horiz-004.html flexbox-overflow-horiz-004.html +== flexbox-overflow-horiz-005.html flexbox-overflow-horiz-005.html +== flexbox-overflow-vert-001.html flexbox-overflow-vert-001.html +== flexbox-overflow-vert-002.html flexbox-overflow-vert-002.html +== flexbox-overflow-vert-003.html flexbox-overflow-vert-003.html +== flexbox-overflow-vert-004.html flexbox-overflow-vert-004.html +== flexbox-overflow-vert-005.html flexbox-overflow-vert-005.html + +# Tests for the order in which we paint flex items +== flexbox-paint-ordering-001.xhtml flexbox-paint-ordering-001.xhtml +== flexbox-paint-ordering-002.xhtml flexbox-paint-ordering-002.xhtml + +# Tests for "display:flex" on root node +== flexbox-root-node-001a.html flexbox-root-node-001a.html +== flexbox-root-node-001b.html flexbox-root-node-001b.html + +# Tests for sizing of flex containers, e.g. under min/max size constraints +== flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001.xhtml +== flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002.xhtml +== flexbox-sizing-vert-001.xhtml flexbox-sizing-vert-001.xhtml +== flexbox-sizing-vert-002.xhtml flexbox-sizing-vert-002.xhtml + +# Tests for table-fixup *not happening* on direct children of a flex container +== flexbox-table-fixup-001.xhtml flexbox-table-fixup-001.xhtml + +# Tests for handling of whitespace within anonymous flex items. +== flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001a.xhtml +== flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001b.xhtml +== flexbox-whitespace-handling-002.xhtml flexbox-whitespace-handling-002.xhtml + +# Tests for flex containers with pseudo-elements +== flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001.html +== flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002.html +== flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003.html + +# Tests for combined influence of 'writing-mode' & 'direction' on flex axes +== flexbox-writing-mode-001.html flexbox-writing-mode-001.html +== flexbox-writing-mode-002.html flexbox-writing-mode-002.html +== flexbox-writing-mode-003.html flexbox-writing-mode-003.html +== flexbox-writing-mode-004.html flexbox-writing-mode-004.html +== flexbox-writing-mode-005.html flexbox-writing-mode-005.html +== flexbox-writing-mode-006.html flexbox-writing-mode-006.html +== flexbox-writing-mode-007.html flexbox-writing-mode-007.html +== flexbox-writing-mode-008.html flexbox-writing-mode-008.html +== flexbox-writing-mode-009.html flexbox-writing-mode-009.html diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list new file mode 100644 index 000000000..a623a0b59 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list @@ -0,0 +1,211 @@ +# Tests for absolutely-positioned children of a flex container +== flexbox-abspos-child-001a.html flexbox-abspos-child-001-ref.html +== flexbox-abspos-child-001b.html flexbox-abspos-child-001-ref.html + +# Tests for handling anonymous flex items +== flexbox-anonymous-items-001.html flexbox-anonymous-items-001-ref.html + +# Tests for alignment of flex lines (align-content property) +== flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001-ref.xhtml +== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml +== flexbox-align-content-vert-001a.xhtml flexbox-align-content-vert-001-ref.xhtml +== flexbox-align-content-vert-001b.xhtml flexbox-align-content-vert-001-ref.xhtml + +# Tests for cross-axis alignment (align-self / align-items properties) +== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml +== flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml +== flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002-ref.xhtml +== flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003-ref.xhtml +== flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004-ref.xhtml +== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml +== flexbox-align-self-baseline-horiz-006.xhtml flexbox-align-self-baseline-horiz-006-ref.xhtml +== flexbox-align-self-baseline-horiz-007.xhtml flexbox-align-self-baseline-horiz-007-ref.xhtml + +== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001-ref.html +== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002-ref.html + +== flexbox-align-self-horiz-001-block.xhtml flexbox-align-self-horiz-001-ref.xhtml +== flexbox-align-self-horiz-001-table.xhtml flexbox-align-self-horiz-001-ref.xhtml +== flexbox-align-self-horiz-002.xhtml flexbox-align-self-horiz-002-ref.xhtml +== flexbox-align-self-horiz-003.xhtml flexbox-align-self-horiz-003-ref.xhtml +== flexbox-align-self-horiz-004.xhtml flexbox-align-self-horiz-004-ref.xhtml +== flexbox-align-self-horiz-005.xhtml flexbox-align-self-horiz-005-ref.xhtml +== flexbox-align-self-vert-001.xhtml flexbox-align-self-vert-001-ref.xhtml +== flexbox-align-self-vert-002.xhtml flexbox-align-self-vert-002-ref.xhtml +== flexbox-align-self-vert-003.xhtml flexbox-align-self-vert-003-ref.xhtml +== flexbox-align-self-vert-004.xhtml flexbox-align-self-vert-004-ref.xhtml +fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-align-self-vert-rtl-001-ref.xhtml +== flexbox-align-self-vert-rtl-002.xhtml flexbox-align-self-vert-rtl-002-ref.xhtml +== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003-ref.xhtml +== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004-ref.xhtml + +# Tests for computing the baseline of a flex container +== flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001-ref.html +== flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001-ref.html +== flexbox-baseline-empty-001a.html flexbox-baseline-empty-001-ref.html +== flexbox-baseline-empty-001b.html flexbox-baseline-empty-001-ref.html +== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001-ref.html +== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001-ref.html +== flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001-ref.html +== flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002-ref.html +== flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003-ref.html +== flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004-ref.html +== flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001-ref.html +== flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002-ref.html +== flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001-ref.html +== flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001-ref.html + +# Basic tests with with blocks as flex items +== flexbox-basic-block-horiz-001.xhtml flexbox-basic-block-horiz-001-ref.xhtml +== flexbox-basic-block-vert-001.xhtml flexbox-basic-block-vert-001-ref.xhtml + +# Tests for basic handling of <canvas>/<img>/etc as a flex item +== flexbox-basic-canvas-horiz-001.xhtml flexbox-basic-canvas-horiz-001-ref.xhtml +== flexbox-basic-canvas-vert-001.xhtml flexbox-basic-canvas-vert-001-ref.xhtml +== flexbox-basic-fieldset-horiz-001.xhtml flexbox-basic-fieldset-horiz-001-ref.xhtml +== flexbox-basic-fieldset-vert-001.xhtml flexbox-basic-fieldset-vert-001-ref.xhtml +== flexbox-basic-iframe-horiz-001.xhtml flexbox-basic-iframe-horiz-001-ref.xhtml +== flexbox-basic-iframe-vert-001.xhtml flexbox-basic-iframe-vert-001-ref.xhtml +== flexbox-basic-img-horiz-001.xhtml flexbox-basic-img-horiz-001-ref.xhtml +== flexbox-basic-img-vert-001.xhtml flexbox-basic-img-vert-001-ref.xhtml +== flexbox-basic-textarea-horiz-001.xhtml flexbox-basic-textarea-horiz-001-ref.xhtml +== flexbox-basic-textarea-vert-001.xhtml flexbox-basic-textarea-vert-001-ref.xhtml +== flexbox-basic-video-horiz-001.xhtml flexbox-basic-video-horiz-001-ref.xhtml +== flexbox-basic-video-vert-001.xhtml flexbox-basic-video-vert-001-ref.xhtml + +# Tests for "page-break-before" / "page-break-after" on a flex item +== flexbox-break-request-horiz-001a.html flexbox-break-request-horiz-001-ref.html +== flexbox-break-request-horiz-001b.html flexbox-break-request-horiz-001-ref.html +== flexbox-break-request-horiz-002a.html flexbox-break-request-horiz-002-ref.html +== flexbox-break-request-horiz-002b.html flexbox-break-request-horiz-002-ref.html +== flexbox-break-request-vert-001a.html flexbox-break-request-vert-001-ref.html +== flexbox-break-request-vert-001b.html flexbox-break-request-vert-001-ref.html +== flexbox-break-request-vert-002a.html flexbox-break-request-vert-002-ref.html +== flexbox-break-request-vert-002b.html flexbox-break-request-vert-002-ref.html + +# Tests for flex items with "visibility:collapse" +== flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001-ref.html +== flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001-ref.html +== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html +== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html + +# Tests for flex-flow shorthand property +== flexbox-flex-flow-001.html flexbox-flex-flow-001-ref.html +== flexbox-flex-flow-002.html flexbox-flex-flow-002-ref.html + +# Tests for flex-wrap property +== flexbox-flex-wrap-horiz-001.html flexbox-flex-wrap-horiz-001-ref.html +== flexbox-flex-wrap-horiz-002.html flexbox-flex-wrap-horiz-002-ref.html +== flexbox-flex-wrap-vert-001.html flexbox-flex-wrap-vert-001-ref.html +== flexbox-flex-wrap-vert-002.html flexbox-flex-wrap-vert-002-ref.html + +# Tests for intrinsic ratio interactions on flex items. +# (Note that tests 001 and 002 share a reference case; they render the same, +# because they don't do any direction-specific stretching/flexing.) +== flexbox-intrinsic-ratio-001.html flexbox-intrinsic-ratio-001-ref.html +== flexbox-intrinsic-ratio-002.html flexbox-intrinsic-ratio-001-ref.html +== flexbox-intrinsic-ratio-003.html flexbox-intrinsic-ratio-003-ref.html +== flexbox-intrinsic-ratio-004.html flexbox-intrinsic-ratio-004-ref.html +== flexbox-intrinsic-ratio-005.html flexbox-intrinsic-ratio-005-ref.html +== flexbox-intrinsic-ratio-006.html flexbox-intrinsic-ratio-006-ref.html + +# Tests for flex items as (pseudo) stacking contexts +== flexbox-items-as-stacking-contexts-001.xhtml flexbox-items-as-stacking-contexts-001-ref.xhtml +== flexbox-items-as-stacking-contexts-002.html flexbox-items-as-stacking-contexts-002-ref.html +== flexbox-items-as-stacking-contexts-003.html flexbox-items-as-stacking-contexts-003-ref.html + +# Tests for main-axis alignment (jusify-content property) +== flexbox-justify-content-horiz-001a.xhtml flexbox-justify-content-horiz-001-ref.xhtml +== flexbox-justify-content-horiz-001b.xhtml flexbox-justify-content-horiz-001-ref.xhtml +== flexbox-justify-content-horiz-002.xhtml flexbox-justify-content-horiz-002-ref.xhtml +== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003-ref.xhtml +== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004-ref.xhtml +== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005-ref.xhtml +== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001-ref.xhtml +== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001-ref.xhtml +== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002-ref.xhtml +== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003-ref.xhtml +== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004-ref.xhtml +== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005-ref.xhtml + +# Tests for flexbox with margin, border, and/or padding on flex items +== flexbox-margin-auto-horiz-001.xhtml flexbox-margin-auto-horiz-001-ref.xhtml +== flexbox-margin-auto-horiz-002.xhtml flexbox-margin-auto-horiz-002-ref.xhtml +== flexbox-mbp-horiz-001.xhtml flexbox-mbp-horiz-001-ref.xhtml +== flexbox-mbp-horiz-001-reverse.xhtml flexbox-mbp-horiz-001-reverse-ref.xhtml +== flexbox-mbp-horiz-001-rtl.xhtml flexbox-mbp-horiz-001-reverse-ref.xhtml +== flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-ref.xhtml +== flexbox-mbp-horiz-002a.xhtml flexbox-mbp-horiz-002-ref.xhtml +== flexbox-mbp-horiz-002b.xhtml flexbox-mbp-horiz-002-ref.xhtml +== flexbox-mbp-horiz-003.xhtml flexbox-mbp-horiz-003-ref.xhtml +== flexbox-mbp-horiz-003-reverse.xhtml flexbox-mbp-horiz-003-reverse-ref.xhtml +== flexbox-mbp-horiz-004.xhtml flexbox-mbp-horiz-004-ref.xhtml + +# Tests for min-height:auto / min-width:auto on flex items +== flexbox-min-height-auto-001.html flexbox-min-height-auto-001-ref.html +== flexbox-min-height-auto-002a.html flexbox-min-height-auto-002-ref.html +fails == flexbox-min-height-auto-002b.html flexbox-min-height-auto-002-ref.html # bug 1055354 +== flexbox-min-height-auto-002c.html flexbox-min-height-auto-002-ref.html +== flexbox-min-height-auto-003.html flexbox-min-height-auto-003-ref.html +== flexbox-min-height-auto-004.html flexbox-min-height-auto-004-ref.html +== flexbox-min-width-auto-001.html flexbox-min-width-auto-001-ref.html +== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002-ref.html +== flexbox-min-width-auto-002b.html flexbox-min-width-auto-002-ref.html +== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002-ref.html +== flexbox-min-width-auto-003.html flexbox-min-width-auto-003-ref.html +== flexbox-min-width-auto-004.html flexbox-min-width-auto-004-ref.html + +# Tests for flex containers with the "overflow" property set +== flexbox-overflow-horiz-001.html flexbox-overflow-horiz-001-ref.html +== flexbox-overflow-horiz-002.html flexbox-overflow-horiz-002-ref.html +== flexbox-overflow-horiz-003.html flexbox-overflow-horiz-003-ref.html +== flexbox-overflow-horiz-004.html flexbox-overflow-horiz-004-ref.html +== flexbox-overflow-horiz-005.html flexbox-overflow-horiz-005-ref.html +== flexbox-overflow-vert-001.html flexbox-overflow-vert-001-ref.html +== flexbox-overflow-vert-002.html flexbox-overflow-vert-002-ref.html +== flexbox-overflow-vert-003.html flexbox-overflow-vert-003-ref.html +== flexbox-overflow-vert-004.html flexbox-overflow-vert-004-ref.html +== flexbox-overflow-vert-005.html flexbox-overflow-vert-005-ref.html + +# Tests for the order in which we paint flex items +== flexbox-paint-ordering-001.xhtml flexbox-paint-ordering-001-ref.xhtml +== flexbox-paint-ordering-002.xhtml flexbox-paint-ordering-002-ref.xhtml + +# Tests for "display:flex" on root node +== flexbox-root-node-001a.html flexbox-root-node-001-ref.html +== flexbox-root-node-001b.html flexbox-root-node-001-ref.html + +# Tests for sizing of flex containers, e.g. under min/max size constraints +== flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001-ref.xhtml +== flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002-ref.xhtml +== flexbox-sizing-vert-001.xhtml flexbox-sizing-vert-001-ref.xhtml +== flexbox-sizing-vert-002.xhtml flexbox-sizing-vert-002-ref.xhtml + +# Tests for table-fixup *not happening* on direct children of a flex container +== flexbox-table-fixup-001.xhtml flexbox-table-fixup-001-ref.xhtml + +# Tests for handling of whitespace within anonymous flex items. +== flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001-ref.xhtml +== flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001-ref.xhtml +== flexbox-whitespace-handling-002.xhtml flexbox-whitespace-handling-002-ref.xhtml + +# Tests for flex containers with pseudo-elements +== flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001-ref.html +== flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html +== flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html + +# Tests for combined influence of 'writing-mode' & 'direction' on flex axes +== flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html +== flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html +== flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html +== flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html +== flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html +== flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html +== flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html +== flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html +== flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html + +# Single-line size clamping +== flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html +== flexbox-single-line-clamp-2.html flexbox-single-line-clamp-2-ref.html +== flexbox-single-line-clamp-3.html flexbox-single-line-clamp-3-ref.html diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf Binary files differnew file mode 100644 index 000000000..ac81cb031 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css b/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css new file mode 100644 index 000000000..82ee46679 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(./Ahem.ttf); +} diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png b/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png Binary files differnew file mode 100644 index 000000000..a64b6a425 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png |
