diff options
Diffstat (limited to 'layout/reftests/flexbox')
150 files changed, 8588 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css new file mode 100644 index 000000000..884a41198 --- /dev/null +++ b/layout/reftests/flexbox/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml new file mode 100644 index 000000000..26033bf78 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-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 for behavior of the 'baseline' value for align-items and + align-self. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + .flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + input { height: 30px; } + + textarea { + width: 30px; + height: 50px; + } + + div.multilinebutton { + /* For comparison vs. "button.multilinebutton" in the testcase: */ + -moz-appearance: button; + display: block; + text-align: center; + font: 20px sans-serif; + padding-top: 1px; + height: 49px; + width: 20px; + } + + div { display: inline-block; } + table { display: inline-table; } + + .lime { background: lime; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div + ><input type="text" style="width: 20px; min-width: 0;" value="input" + /><textarea style="width: 30px">t e x t a r e a </textarea + ><table cellspacing="0" cellpadding="0"> + <div class="multilinebutton">b<br/>t<br/>n</div> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml new file mode 100644 index 000000000..853f2c6ed --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.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). 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 checks baseline-alignment for a text <input> field, a + <textarea>, and a <button> with a multi-line label. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + .flexbox { + display: flex; + align-items: baseline; + border: 1px dashed blue; + font: 14px sans-serif; + } + + input { height: 30px; } + + textarea { + width: 30px; + height: 50px; + } + + button.multilinebutton { + font: 20px sans-serif; + color: black; + padding: 0; + height: 50px; + width: 20px; + box-sizing: content-box; + } + + .lime { background: lime; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .violet { background: violet; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div> + <input type="text" style="width: 20px; min-width: 0;" value="input"/> + <textarea style="width: 30px">t e x t a r e a </textarea> + <button class="multilinebutton">b<br/>t<br/>n</button> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml new file mode 100644 index 000000000..fb583161a --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-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/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self. + + NOTE: For multi-line 'display: block' flex items in the testcase, we use + an inline-table here in the reference case, so that we get first-line + baseline alignment. (If we used an inline-block instead, that would give + us *last-line* baseline alignment.) +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + .flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + div { display: inline-block; } + table { display: inline-table; } + + .lime { background: lime; } + .pink { background: pink; } + .aqua { background: aqua; } + + i { display:inline-block; width:20px; height:2px; background:black; } + .ref { + -moz-appearance:none; + -ms-appearance:none; + -webkit-appearance:none; + appearance:none; + border:none; + margin:0; + padding:0; + border-bottom:2px solid black; + width:20px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div + ><button>btn</button + ><label class="pink">label</label + ><table cellspacing="0" cellpadding="0" class="aqua"> + <label>lab<br/>el</label> + </table + ><table cellspacing="0" cellpadding="0"> + <fieldset>field<br/>set</fieldset> + </table + ><table cellspacing="0" cellpadding="0"> + <fieldset><legend>leg</legend>field<br/>set</fieldset> + </table + ><table cellspacing="0" cellpadding="0"> + <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset> + </table> + </div> + <div class="flexbox" style="font-size:0"><input type="radio" + /><input type="checkbox" + /><input type="checkbox" class="ref"/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml new file mode 100644 index 000000000..87568c7e7 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml @@ -0,0 +1,53 @@ +<?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 has various types of baseline-aligned + content, and the flexbox's vertical size depends on the aggregate + post-alignment height of its children. + + This test checks baseline-alignment for text <button>, for + various <input> fields, for <label>, and for <fieldset>. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + .flexbox { + display: flex; + align-items: baseline; + border: 1px dashed blue; + font: 14px sans-serif; + } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + + .lime { background: lime; } + .pink { background: pink; } + .aqua { background: aqua; } + + i { display:inline-block; width:20px; height:2px; background:black; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div> + <button>btn</button> + <label class="pink">label</label> + <label class="aqua">lab<br/>el</label> + <fieldset>field<br/>set</fieldset> + <fieldset><legend>leg</legend>field<br/>set</fieldset> + <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset> + </div> + <div class="flexbox" style="font-size:0"> + <input type="radio"/> + <input type="checkbox"/> + <i></i> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml new file mode 100644 index 000000000..867fa4cfc --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml @@ -0,0 +1,38 @@ +<?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. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + div { display: inline-block; } + table { + display: inline-table; + margin: 1px; /* to fix fuzziness from text overlapping table border */ + } + + .lime { background: lime; } + .pink { background: pink; } + .aqua { background: aqua; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div + ><table class="pink" border="1"> + <tr><td>tr1</td></tr> + <tr><td>tr2</td></tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml new file mode 100644 index 000000000..266134a03 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml @@ -0,0 +1,37 @@ +<?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 a <table>. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: flex; + align-items: baseline; + border: 1px dashed blue; + font: 14px sans-serif; + } + + table { + margin: 1px; /* to fix fuzziness from text overlapping table border */ + } + + .lime { background: lime; } + .pink { background: pink; } + .aqua { background: aqua; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">text</div> + <table class="pink" border="1"> + <tr><td>tr1</td></tr> + <tr><td>tr2</td></tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html new file mode 100644 index 000000000..14359e594 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + width: 100px; + height: 20px; + border: 5px solid black; + } + .container > * { + height: 18px; + float: left; + } + .itemA { + width: 38px; + background: purple; + border: 1px solid indigo; + } + .itemB { + width: 58px; + background: teal; + border: 1px solid lightblue; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html new file mode 100644 index 000000000..951cf918d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + width: 110px; + height: 30px; + border: 5px solid black; + box-sizing: border-box; + } + .itemA { + flex: 1 28px; + background: purple; + border: 1px solid indigo; + } + .itemB { + flex: 1 48px; + background: teal; + border: 1px solid lightblue; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html new file mode 100644 index 000000000..f02e22d95 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + width: 20px; + height: 100px; + border: 5px solid black; + } + .container > * { + width: 18px; + } + .itemA { + height: 38px; + background: purple; + border: 1px solid indigo; + } + .itemB { + height: 58px; + background: teal; + border: 1px solid lightblue; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html new file mode 100644 index 000000000..2351369b3 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-direction: column; + width: 30px; + height: 110px; + border: 5px solid black; + box-sizing: border-box; + } + .itemA { + flex: 1 28px; + background: purple; + border: 1px solid indigo; + } + .itemB { + flex: 1 48px; + background: teal; + border: 1px solid lightblue; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html new file mode 100644 index 000000000..e4126b17c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + width: 100px; + height: 30px; + border: 1px solid black; + float: left; + margin: 2px; + } + .container > * { + float: left; /* emulate the testcase's horizontal lineup of flex items */ + } + .itemA { + width: 22px; + height: 22px; + background: purple; + border: 4px solid indigo; + } + .itemB { + width: 40px; + height: 20px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="width: 92px"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="width: 32px"></div> + <div class="itemB" style="width: 50px"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html new file mode 100644 index 000000000..a74f4a81c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + width: 100px; + height: 30px; + border: 1px solid black; + float: left; + margin: 2px; + } + .container > * { + box-sizing: border-box; + } + .itemA { + width: 30px; + background: purple; + border: 4px solid indigo; + } + .itemB { + width: 50px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + <div class="itemB" style="flex-grow: 1"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html new file mode 100644 index 000000000..789dd14be --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + width: 100px; + height: 30px; + border: 1px solid black; + float: left; + margin: 2px; + } + .container > * { + box-sizing: border-box; + } + .itemA { + flex-basis: 30px; + background: purple; + border: 4px solid indigo; + } + .itemB { + flex-basis: 50px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + <div class="itemB" style="flex-grow: 1"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html new file mode 100644 index 000000000..5d1f50af2 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + width: 30px; + height: 100px; + border: 1px solid black; + float: left; + margin: 2px; + } + .itemA { + width: 22px; + height: 22px; + background: purple; + border: 4px solid indigo; + } + .itemB { + width: 20px; + height: 40px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="height: 92px"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="height: 32px"></div> + <div class="itemB" style="height: 50px"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html new file mode 100644 index 000000000..e87e93372 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.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: Testing a vertical flex container with box-sizing:border-box on its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-direction: column; + width: 30px; + height: 100px; + border: 1px solid black; + float: left; + margin: 2px; + } + .container > * { + box-sizing: border-box; + } + .itemA { + height: 30px; + background: purple; + border: 4px solid indigo; + } + .itemB { + height: 50px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + <div class="itemB" style="flex-grow: 1"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html new file mode 100644 index 000000000..7edbf8378 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.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: Testing a vertical flex container with box-sizing:border-box on its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-direction: column; + width: 30px; + height: 100px; + border: 1px solid black; + float: left; + margin: 2px; + } + .container > * { + box-sizing: border-box; + } + .itemA { + flex-basis: 30px; + background: purple; + border: 4px solid indigo; + } + .itemB { + flex-basis: 50px; + background: teal; + border: 5px solid lightblue; + } + </style> +</head> +<body> + <!-- FIRST ROW --> + <!-- 1 inflexible item --> + <div class="container"> + <div class="itemA"></div> + </div> + <!-- 1 flexible item --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW --> + <!-- 2 inflexible items --> + <div class="container"> + <div class="itemA"></div> + <div class="itemB"></div> + </div> + <!-- 2 flexible items --> + <div class="container"> + <div class="itemA" style="flex-grow: 1"></div> + <div class="itemB" style="flex-grow: 1"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html new file mode 100644 index 000000000..3801464ee --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html @@ -0,0 +1,24 @@ +<html> + <head> + <style> + body { + margin: 0; + } + .outerContainer { + display: flex; + height: 100px; + background-color: red; + } + .innerContainer { + display: flex; + flex: 1; + background-color: lime; + } + </style> + </head> + <body> + <div class="outerContainer"> + <div class="innerContainer"></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml new file mode 100644 index 000000000..889ac83ce --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml @@ -0,0 +1,19 @@ +<?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> + <style> + #container { + width: 100px; + height: 100px; + background: lime; + } + </style> + </head> + <body> + <div id="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml new file mode 100644 index 000000000..889b479c0 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml @@ -0,0 +1,33 @@ +<?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 we reflow nested flex containers sufficiently when + the window (or the iframe we're inside of) is horizontally resized. + + This test should end up rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #frame { + width: 400px; + height: 200px; + border: 0; + } + </style> + <script> + function tweak() { + document.getElementById("frame").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <iframe id="frame" src="flexbox-dyn-changeFrameWidth-1-iframe.html"></iframe> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html new file mode 100644 index 000000000..41a4a4c80 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html @@ -0,0 +1,27 @@ +<html> + <head> + <style> + body { + margin: 0; + } + #container { + display: flex; + flex-direction: column; + border: 10px solid lime; + width: 80px; + height: 80px; + background-color: red; + } + #item { + background-color: lime; + width: 80px; + height: 80px; + } + </style> + </head> + <body> + <div id="container"> + <div id="item"></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml new file mode 100644 index 000000000..889ac83ce --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml @@ -0,0 +1,19 @@ +<?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> + <style> + #container { + width: 100px; + height: 100px; + background: lime; + } + </style> + </head> + <body> + <div id="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml new file mode 100644 index 000000000..fdb059095 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml @@ -0,0 +1,34 @@ +<?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 we don't end up with the effects of an intermediate + "measuring" reflow left over, when we resize a window that contains a + vertical flex container with a fixed-height flex item. + + This test should end up rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #frame { + width: 400px; + height: 200px; + border: 0; + } + </style> + <script> + function tweak() { + document.getElementById("frame").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <iframe id="frame" src="flexbox-dyn-changeFrameWidth-2-iframe.html"></iframe> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html new file mode 100644 index 000000000..b3e7dc27c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html @@ -0,0 +1,29 @@ +<html> + <head> + <style> + body { + margin: 0; + } + #container { + display: flex; + flex-direction: column; + border: 10px solid lime; + width: 80px; + height: 80px; + background-color: red; + } + #item { + background-color: lime; + min-height: 0; + width: 80px; + height: auto; + line-height: 80px; + } + </style> + </head> + <body> + <div id="container"> + <div id="item"> </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml new file mode 100644 index 000000000..889ac83ce --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml @@ -0,0 +1,19 @@ +<?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> + <style> + #container { + width: 100px; + height: 100px; + background: lime; + } + </style> + </head> + <body> + <div id="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml new file mode 100644 index 000000000..c41246902 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml @@ -0,0 +1,34 @@ +<?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 we don't end up with the effects of an intermediate + "measuring" reflow left over, when we resize a window that contains a + vertical flex container with an auto-height flex item. + + This test should end up rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #frame { + width: 400px; + height: 200px; + border: 0; + } + </style> + <script> + function tweak() { + document.getElementById("frame").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <iframe id="frame" src="flexbox-dyn-changeFrameWidth-3-iframe.html"></iframe> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html new file mode 100644 index 000000000..72cb0af38 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html @@ -0,0 +1,20 @@ +<html> + <head> + <style> + body { + margin: 0; + } + .container { + display: flex; + background-color: lime; + top: 0; + bottom: 0; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <div class="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml new file mode 100644 index 000000000..889ac83ce --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml @@ -0,0 +1,19 @@ +<?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> + <style> + #container { + width: 100px; + height: 100px; + background: lime; + } + </style> + </head> + <body> + <div id="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml new file mode 100644 index 000000000..80a7a1cd5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml @@ -0,0 +1,34 @@ +<?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 we sufficiently reflow abspos flex containers that + have top:0;bottom:0 (which ends up effectively being like height:100%) + the window (or the iframe we're inside of) is vertically resized. + + This test should end up rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #frame { + width: 100px; + height: 50px; + border: 0; + } + </style> + <script> + function tweak() { + document.getElementById("frame").style.height = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <iframe id="frame" src="flexbox-dyn-changeFrameWidth-4-iframe.html"></iframe> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html new file mode 100644 index 000000000..fb43b103d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<style> +#limesquare { + width: 100px; + height: 100px; + background: lime; +} +</style> +</head> +<body> + <div id="limesquare"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html new file mode 100644 index 000000000..ce5e6621f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html @@ -0,0 +1,56 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "margin-left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ margin-left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html new file mode 100644 index 000000000..ba6d6fd80 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html @@ -0,0 +1,57 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml new file mode 100644 index 000000000..681a3cb4c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml @@ -0,0 +1,20 @@ +<?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> + <style> + #container { + display: flex; + width: 100px; + height: 100px; + background: lime; + } + </style> + </head> + <body> + <div id="container"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml new file mode 100644 index 000000000..600ab0faf --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.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/ +--> +<!-- + This test checks that we reflow sufficiently when a grandchild of a + flex container needs an incremental reflow. This test should end up + rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #container { + display: flex; + flex-direction: column; + width: 100px; + } + #item { + background: red; + } + #tweakMe { + height: 100px; + background: orange; + padding-left: 1px; + } + </style> + <script> + function tweak() { + var tweakMe = document.getElementById("tweakMe"); + tweakMe.style.paddingLeft = "0"; + tweakMe.style.background = "lime"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div id="container"> + <div id="item"> + <div id="tweakMe"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml new file mode 100644 index 000000000..32390e6a2 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.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/ +--> +<!-- + This test checks that we reflow sufficiently when a stretched, nested + flex container needs an incremental reflow. This test should end up + rendering as a lime square, 100px by 100px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + #outerContainer { + display: flex; + width: 100px; + height: 100px; + background: red; + } + #tweakMe { + display: flex; + background: orange; + width: 100px; + /* height should stretch to fill parent's height, via + * parent's "align-items: stretch" (the default) */ + + padding-left: 1px; + } + </style> + <script> + function tweak() { + var tweakMe = document.getElementById("tweakMe"); + tweakMe.style.paddingLeft = "0"; + tweakMe.style.background = "lime"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div id="outerContainer"> + <div id="tweakMe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml new file mode 100644 index 000000000..13e0880c0 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml @@ -0,0 +1,39 @@ +<?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 like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { font-size: 10px; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f0"> <div>[OldText]</div></div> + <div class="flexbox" id="f1"><div>[OldText]</div> </div> + <div class="flexbox" id="f2">[NewText]<div>[OldText]</div></div> + <div class="flexbox" id="f3">[NewText] <div>[OldText]</div></div> + <div class="flexbox" id="f4"> [NewText]<div>[OldText]</div></div> + <div class="flexbox" id="f5"><div>[OldText]</div>[NewText]</div> + <div class="flexbox" id="f6"><div>[OldText]</div>[NewText] </div> + <div class="flexbox" id="f7"><div>[OldText]</div> [NewText]</div> + <div class="flexbox" id="f8">[NewText] <div>[OldText]</div></div> + <div class="flexbox" id="f9"> [NewText]<div>[OldText]</div></div> + <div class="flexbox" id="f10"><div>[OldText]</div>[NewText] </div> + <div class="flexbox" id="f11"><div>[OldText]</div> [NewText]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml new file mode 100644 index 000000000..e271f4fb3 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.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/ +--> +<!-- + This test verifies that we reconstruct frames as necessary, after content + (including whitespace & text) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function tweak() { + // Just inserting whitespace + // ------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1"); + + // Inserting text or text with whitespace + // -------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7"); + + // Same as the whitespace cases immediately above, but now with separate + // text nodes for the whitespace vs. the text + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9"); + + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><div>[OldText]</div></div> + <div class="flexbox" id="f1"><div>[OldText]</div></div> + <div class="flexbox" id="f2"><div>[OldText]</div></div> + <div class="flexbox" id="f3"><div>[OldText]</div></div> + <div class="flexbox" id="f4"><div>[OldText]</div></div> + <div class="flexbox" id="f5"><div>[OldText]</div></div> + <div class="flexbox" id="f6"><div>[OldText]</div></div> + <div class="flexbox" id="f7"><div>[OldText]</div></div> + <div class="flexbox" id="f8"><div>[OldText]</div></div> + <div class="flexbox" id="f9"><div>[OldText]</div></div> + <div class="flexbox" id="f10"><div>[OldText]</div></div> + <div class="flexbox" id="f11"><div>[OldText]</div></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml new file mode 100644 index 000000000..db3860fce --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-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/ +--> +<!-- + This reference case is like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted div elements stand out --> + div.inserted { background: teal; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div> + <div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div> + <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> <div>[OldText]</div></div> + <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div><div>[OldText]</div></div> + <div class="flexbox" id="f12"><div>[OldText]</div><div class="inserted">[NewDiv]</div> </div> + <div class="flexbox" id="f13"><div>[OldText]</div> <div class="inserted">[NewDiv]</div></div> + <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText]<div>[OldText]</div></div> + <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div><div>[OldText]</div></div> + <div class="flexbox" id="f16"><div>[OldText]</div><div class="inserted">[NewDiv]</div>[NewText]</div> + <div class="flexbox" id="f17"><div>[OldText]</div>[NewText]<div class="inserted">[NewDiv]</div></div> + </body> +</html> + diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml new file mode 100644 index 000000000..b083ccd5f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & divs) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted div elements stand out --> + div.inserted { background: teal; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createDivElem() { + var div = document.createElement("div"); + div.setAttribute("class", "inserted"); + div.appendChild(document.createTextNode("[NewDiv]")); + return div; + } + + function tweak() { + // Inserting div, adjacent to inline content + // ----------------------------------------- + insertNodeAtPosnInElem(createDivElem(), 0, "f0"); + insertNodeAtPosnInElem(createDivElem(), 1, "f1"); + + // Inserting div and whitespace, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createDivElem(), 0, "f2"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting div and whitespace, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createDivElem(), 1, "f4"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting div and text, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createDivElem(), 0, "f6"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting div and text, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createDivElem(), 1, "f8"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><div>[OldText]</div></div> + <div class="flexbox" id="f1"><div>[OldText]</div></div> + <div class="flexbox" id="f2"><div>[OldText]</div></div> + <div class="flexbox" id="f3"><div>[OldText]</div></div> + <div class="flexbox" id="f4"><div>[OldText]</div></div> + <div class="flexbox" id="f5"><div>[OldText]</div></div> + <div class="flexbox" id="f6"><div>[OldText]</div></div> + <div class="flexbox" id="f7"><div>[OldText]</div></div> + <div class="flexbox" id="f8"><div>[OldText]</div></div> + <div class="flexbox" id="f9"><div>[OldText]</div></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml new file mode 100644 index 000000000..b29b16f18 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml @@ -0,0 +1,40 @@ +<?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 like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted span elements stand out --> + span.inserted { background: teal; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div> + <div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div> + <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> <div>[OldText]</div></div> + <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span><div>[OldText]</div></div> + <div class="flexbox" id="f4"><div>[OldText]</div><span class="inserted">[NewSpan]</span> </div> + <div class="flexbox" id="f5"><div>[OldText]</div> <span class="inserted">[NewSpan]</span></div> + <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText]<div>[OldText]</div></div> + <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span><div>[OldText]</div></div> + <div class="flexbox" id="f8"><div>[OldText]</div><span class="inserted">[NewSpan]</span>[NewText]</div> + <div class="flexbox" id="f9"><div>[OldText]</div>[NewText]<span class="inserted">[NewSpan]</span></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml new file mode 100644 index 000000000..faf54917d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & spans) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted span elements stand out --> + span.inserted { background: teal; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createSpanElem() { + var span = document.createElement("span"); + span.setAttribute("class", "inserted"); + span.appendChild(document.createTextNode("[NewSpan]")); + return span; + } + + function tweak() { + // Inserting span, on either side of existing content + // -------------------------------------------------- + insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); + + // Inserting span and whitespace, before existing content + // ------------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting span and whitespace, after existing content + // ----------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting span and text, before existing content + // ------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting span and text, after existing content + // ----------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><div>[OldText]</div></div> + <div class="flexbox" id="f1"><div>[OldText]</div></div> + <div class="flexbox" id="f2"><div>[OldText]</div></div> + <div class="flexbox" id="f3"><div>[OldText]</div></div> + <div class="flexbox" id="f4"><div>[OldText]</div></div> + <div class="flexbox" id="f5"><div>[OldText]</div></div> + <div class="flexbox" id="f6"><div>[OldText]</div></div> + <div class="flexbox" id="f7"><div>[OldText]</div></div> + <div class="flexbox" id="f8"><div>[OldText]</div></div> + <div class="flexbox" id="f9"><div>[OldText]</div></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml new file mode 100644 index 000000000..785063fdf --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.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/ +--> +<!-- + This test verifies that we reconstruct frames as necessary, after content + (including whitespace & text) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function tweak() { + // Just inserting whitespace + // ------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1"); + + // Inserting text or text with whitespace + // -------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7"); + + // Same as the whitespace cases immediately above, but now with separate + // text nodes for the whitespace vs. the text + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9"); + + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><span>[OldText]</span></div> + <div class="flexbox" id="f1"><span>[OldText]</span></div> + <div class="flexbox" id="f2"><span>[OldText]</span></div> + <div class="flexbox" id="f3"><span>[OldText]</span></div> + <div class="flexbox" id="f4"><span>[OldText]</span></div> + <div class="flexbox" id="f5"><span>[OldText]</span></div> + <div class="flexbox" id="f6"><span>[OldText]</span></div> + <div class="flexbox" id="f7"><span>[OldText]</span></div> + <div class="flexbox" id="f8"><span>[OldText]</span></div> + <div class="flexbox" id="f9"><span>[OldText]</span></div> + <div class="flexbox" id="f10"><span>[OldText]</span></div> + <div class="flexbox" id="f11"><span>[OldText]</span></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml new file mode 100644 index 000000000..9c8279662 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & divs) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { + font-size: 10px; + } + + div.inserted { + background: teal; /* To make inserted div elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createDivElem() { + var div = document.createElement("div"); + div.setAttribute("class", "inserted"); + div.appendChild(document.createTextNode("[NewDiv]")); + return div; + } + + function tweak() { + // Inserting div, adjacent to inline content + // ----------------------------------------- + insertNodeAtPosnInElem(createDivElem(), 0, "f0"); + insertNodeAtPosnInElem(createDivElem(), 1, "f1"); + + // Inserting div and whitespace, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createDivElem(), 0, "f2"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting div and whitespace, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createDivElem(), 1, "f4"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting div and text, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createDivElem(), 0, "f6"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting div and text, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createDivElem(), 1, "f8"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><span>[OldText]</span></div> + <div class="flexbox" id="f1"><span>[OldText]</span></div> + <div class="flexbox" id="f2"><span>[OldText]</span></div> + <div class="flexbox" id="f3"><span>[OldText]</span></div> + <div class="flexbox" id="f4"><span>[OldText]</span></div> + <div class="flexbox" id="f5"><span>[OldText]</span></div> + <div class="flexbox" id="f6"><span>[OldText]</span></div> + <div class="flexbox" id="f7"><span>[OldText]</span></div> + <div class="flexbox" id="f8"><span>[OldText]</span></div> + <div class="flexbox" id="f9"><span>[OldText]</span></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml new file mode 100644 index 000000000..9f60c4316 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & spans) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { + font-size: 10px; + } + + span.inserted { + background: teal; /* To make inserted span elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createSpanElem() { + var span = document.createElement("span"); + span.setAttribute("class", "inserted"); + span.appendChild(document.createTextNode("[NewSpan]")); + return span; + } + + function tweak() { + // Inserting span, on either side of existing content + // -------------------------------------------------- + insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); + + // Inserting span and whitespace, before existing content + // ------------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting span and whitespace, after existing content + // ----------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting span and text, before existing content + // ------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting span and text, after existing content + // ----------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0"><span>[OldText]</span></div> + <div class="flexbox" id="f1"><span>[OldText]</span></div> + <div class="flexbox" id="f2"><span>[OldText]</span></div> + <div class="flexbox" id="f3"><span>[OldText]</span></div> + <div class="flexbox" id="f4"><span>[OldText]</span></div> + <div class="flexbox" id="f5"><span>[OldText]</span></div> + <div class="flexbox" id="f6"><span>[OldText]</span></div> + <div class="flexbox" id="f7"><span>[OldText]</span></div> + <div class="flexbox" id="f8"><span>[OldText]</span></div> + <div class="flexbox" id="f9"><span>[OldText]</span></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml new file mode 100644 index 000000000..536a9fa83 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml @@ -0,0 +1,39 @@ +<?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 like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { font-size: 10px; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f0"> [OldText]</div> + <div class="flexbox" id="f1">[OldText] </div> + <div class="flexbox" id="f2">[NewText][OldText]</div> + <div class="flexbox" id="f3">[NewText] [OldText]</div> + <div class="flexbox" id="f4"> [NewText][OldText]</div> + <div class="flexbox" id="f5">[OldText][NewText]</div> + <div class="flexbox" id="f6">[OldText][NewText] </div> + <div class="flexbox" id="f7">[OldText] [NewText]</div> + <div class="flexbox" id="f8">[NewText] [OldText]</div> + <div class="flexbox" id="f9"> [NewText][OldText]</div> + <div class="flexbox" id="f10">[OldText][NewText] </div> + <div class="flexbox" id="f11">[OldText] [NewText]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml new file mode 100644 index 000000000..37f63136a --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.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/ +--> +<!-- + This test verifies that we reconstruct frames as necessary, after content + (including whitespace & text) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function tweak() { + // Just inserting whitespace + // ------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1"); + + // Inserting text or text with whitespace + // -------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6"); + insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7"); + + // Same as the whitespace cases immediately above, but now with separate + // text nodes for the whitespace vs. the text + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9"); + + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10"); + + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0">[OldText]</div> + <div class="flexbox" id="f1">[OldText]</div> + <div class="flexbox" id="f2">[OldText]</div> + <div class="flexbox" id="f3">[OldText]</div> + <div class="flexbox" id="f4">[OldText]</div> + <div class="flexbox" id="f5">[OldText]</div> + <div class="flexbox" id="f6">[OldText]</div> + <div class="flexbox" id="f7">[OldText]</div> + <div class="flexbox" id="f8">[OldText]</div> + <div class="flexbox" id="f9">[OldText]</div> + <div class="flexbox" id="f10">[OldText]</div> + <div class="flexbox" id="f11">[OldText]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml new file mode 100644 index 000000000..7e3468b1f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.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/ +--> +<!-- + This reference case is like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { + font-size: 10px; + } + + div.inserted { + background: teal; /* To make inserted div elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div> + <div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div> + <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> [OldText]</div> + <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div>[OldText]</div> + <div class="flexbox" id="f12">[OldText]<div class="inserted">[NewDiv]</div> </div> + <div class="flexbox" id="f13">[OldText] <div class="inserted">[NewDiv]</div></div> + <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText][OldText]</div> + <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div>[OldText]</div> + <div class="flexbox" id="f16">[OldText]<div class="inserted">[NewDiv]</div>[NewText]</div> + <div class="flexbox" id="f17">[OldText][NewText]<div class="inserted">[NewDiv]</div></div> + </body> +</html> + diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml new file mode 100644 index 000000000..b907af8b5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & divs) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { + font-size: 10px; + } + + div.inserted { + background: teal; /* To make inserted div elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createDivElem() { + var div = document.createElement("div"); + div.setAttribute("class", "inserted"); + div.appendChild(document.createTextNode("[NewDiv]")); + return div; + } + + function tweak() { + // Inserting div, adjacent to inline content + // ----------------------------------------- + insertNodeAtPosnInElem(createDivElem(), 0, "f0"); + insertNodeAtPosnInElem(createDivElem(), 1, "f1"); + + // Inserting div and whitespace, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createDivElem(), 0, "f2"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting div and whitespace, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createDivElem(), 1, "f4"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting div and text, before inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createDivElem(), 0, "f6"); + + insertNodeAtPosnInElem(createDivElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting div and text, after inline content + // --------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createDivElem(), 1, "f8"); + + insertNodeAtPosnInElem(createDivElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0">[OldText]</div> + <div class="flexbox" id="f1">[OldText]</div> + <div class="flexbox" id="f2">[OldText]</div> + <div class="flexbox" id="f3">[OldText]</div> + <div class="flexbox" id="f4">[OldText]</div> + <div class="flexbox" id="f5">[OldText]</div> + <div class="flexbox" id="f6">[OldText]</div> + <div class="flexbox" id="f7">[OldText]</div> + <div class="flexbox" id="f8">[OldText]</div> + <div class="flexbox" id="f9">[OldText]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml new file mode 100644 index 000000000..45d357ab8 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml @@ -0,0 +1,43 @@ +<?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 like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { + font-size: 10px; + } + + span.inserted { + background: teal; /* To make inserted span elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div> + <div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div> + <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> [OldText]</div> + <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span>[OldText]</div> + <div class="flexbox" id="f4">[OldText]<span class="inserted">[NewSpan]</span> </div> + <div class="flexbox" id="f5">[OldText] <span class="inserted">[NewSpan]</span></div> + <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText][OldText]</div> + <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span>[OldText]</div> + <div class="flexbox" id="f8">[OldText]<span class="inserted">[NewSpan]</span>[NewText]</div> + <div class="flexbox" id="f9">[OldText][NewText]<span class="inserted">[NewSpan]</span></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml new file mode 100644 index 000000000..eca09eb85 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.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 verifies that we reconstruct frames as necessary, after content + (including whitespace & spans) is dynamically inserted as a child of a + flexbox. (Note that in cases where we know the whitespace is going to be + dropped, we don't bother reconstructing frames. This test is to be sure we + aren't overzealous with that optimization.) +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { + font-size: 10px; + } + + span.inserted { + background: teal; /* To make inserted span elements stand out. */ + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createSpanElem() { + var span = document.createElement("span"); + span.setAttribute("class", "inserted"); + span.appendChild(document.createTextNode("[NewSpan]")); + return span; + } + + function tweak() { + // Inserting span, on either side of existing content + // -------------------------------------------------- + insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); + + // Inserting span and whitespace, before existing content + // ------------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting span and whitespace, after existing content + // ----------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting span and text, before existing content + // ------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting span and text, after existing content + // ----------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0">[OldText]</div> + <div class="flexbox" id="f1">[OldText]</div> + <div class="flexbox" id="f2">[OldText]</div> + <div class="flexbox" id="f3">[OldText]</div> + <div class="flexbox" id="f4">[OldText]</div> + <div class="flexbox" id="f5">[OldText]</div> + <div class="flexbox" id="f6">[OldText]</div> + <div class="flexbox" id="f7">[OldText]</div> + <div class="flexbox" id="f8">[OldText]</div> + <div class="flexbox" id="f9">[OldText]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml new file mode 100644 index 000000000..0c0f9b5ba --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml @@ -0,0 +1,43 @@ +<?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 like its textcase, but with the testcase's dynamic + modifications already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted span elements stand out --> + span { + background: teal; + padding: 3px; + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + </head> + <body> + <div class="flexbox" id="f0"><span/>[orig]</div> + <div class="flexbox" id="f1">[orig]<span/></div> + <div class="flexbox" id="f2"><span/> [orig]</div> + <div class="flexbox" id="f3"> <span/>[orig]</div> + <div class="flexbox" id="f4">[orig]<span/> </div> + <div class="flexbox" id="f5">[orig] <span/></div> + <div class="flexbox" id="f6"><span/>[NewText][orig]</div> + <div class="flexbox" id="f7">[NewText]<span/>[orig]</div> + <div class="flexbox" id="f8">[orig]<span/>[NewText]</div> + <div class="flexbox" id="f9">[orig][NewText]<span/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml new file mode 100644 index 000000000..9bcd13352 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.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 is a variant of flexbox-dyn-insertAroundText-3.xhtml with the + inserted spans being empty & having padding. This triggered invalidation + issues with an older work-in-progress patch, so I'm adding this reftest to + track that issue & prevent it from regressing. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + body { font-size: 10px; } + + <!-- to make inserted span elements stand out --> + span { + background: teal; + padding: 3px; + } + + div.flexbox { + border: 1px dashed blue; + width: 300px; + display: flex; + justify-content: space-around; + margin-bottom: 1px; + white-space: pre; + } + </style> + <script> + function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) { + var parent = document.getElementById(aParentId); + var insertBeforeTarget = parent.firstChild; + for (var i = 0; i < aPosn; i++) { + insertBeforeTarget = insertBeforeTarget.nextSibling; + } + parent.insertBefore(aNodeToInsert, insertBeforeTarget); + } + + function createSpanElem() { + return document.createElement("span"); + } + + function tweak() { + // Inserting span, on either side of existing content + // -------------------------------------------------- + insertNodeAtPosnInElem(createSpanElem(), 0, "f0"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f1"); + + // Inserting span and whitespace, before existing content + // ------------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f2"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f3"); + insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3"); + + // Inserting span and whitespace, after existing content + // ----------------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f4"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f5"); + insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5"); + + // Inserting span and text, before existing content + // ------------------------------------------------ + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6"); + insertNodeAtPosnInElem(createSpanElem(), 0, "f6"); + + insertNodeAtPosnInElem(createSpanElem(), 0, "f7"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7"); + + // Inserting span and text, after existing content + // ----------------------------------------------- + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8"); + insertNodeAtPosnInElem(createSpanElem(), 1, "f8"); + + insertNodeAtPosnInElem(createSpanElem(), 1, "f9"); + insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9"); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <div class="flexbox" id="f0">[orig]</div> + <div class="flexbox" id="f1">[orig]</div> + <div class="flexbox" id="f2">[orig]</div> + <div class="flexbox" id="f3">[orig]</div> + <div class="flexbox" id="f4">[orig]</div> + <div class="flexbox" id="f5">[orig]</div> + <div class="flexbox" id="f6">[orig]</div> + <div class="flexbox" id="f7">[orig]</div> + <div class="flexbox" id="f8">[orig]</div> + <div class="flexbox" id="f9">[orig]</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml new file mode 100644 index 000000000..074436d11 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml @@ -0,0 +1,38 @@ +<?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 flex containers that have no children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + border: 1px dotted blue; + background: yellow; + } + + div.withPadding { + padding: 2px 3px 4px 5px; + } + </style> + </head> + <body> + <div class="flexbox"/> + <div class="flexbox" style="width: 5px"/> + <div class="flexbox" style="width: -moz-available"/> + <div class="flexbox" style="width: -moz-max-content"/> + <div class="flexbox" style="width: -moz-min-content"/> + <div class="flexbox" style="height: 6px"/> + <div class="flexbox" style="width: 7px; height: 8px"/> + + <!-- now with padding --> + <div class="flexbox withPadding"/> + <div class="flexbox withPadding" style="width: 5px"/> + <div class="flexbox withPadding" style="width: -moz-available"/> + <div class="flexbox withPadding" style="width: -moz-max-content"/> + <div class="flexbox withPadding" style="width: -moz-min-content"/> + <div class="flexbox withPadding" style="height: 6px"/> + <div class="flexbox withPadding" style="width: 7px; height: 8px"/> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-empty-1a.xhtml b/layout/reftests/flexbox/flexbox-empty-1a.xhtml new file mode 100644 index 000000000..2912028dd --- /dev/null +++ b/layout/reftests/flexbox/flexbox-empty-1a.xhtml @@ -0,0 +1,39 @@ +<?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 flex containers that have no children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + border: 1px dotted blue; + background: yellow; + display: flex; + } + + div.withPadding { + padding: 2px 3px 4px 5px; + } + </style> + </head> + <body> + <div class="flexbox"/> + <div class="flexbox" style="width: 5px"/> + <div class="flexbox" style="width: -moz-available"/> + <div class="flexbox" style="width: -moz-max-content"/> + <div class="flexbox" style="width: -moz-min-content"/> + <div class="flexbox" style="height: 6px"/> + <div class="flexbox" style="width: 7px; height: 8px"/> + + <!-- now with padding --> + <div class="flexbox withPadding"/> + <div class="flexbox withPadding" style="width: 5px"/> + <div class="flexbox withPadding" style="width: -moz-available"/> + <div class="flexbox withPadding" style="width: -moz-max-content"/> + <div class="flexbox withPadding" style="width: -moz-min-content"/> + <div class="flexbox withPadding" style="height: 6px"/> + <div class="flexbox withPadding" style="width: 7px; height: 8px"/> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-empty-1b.xhtml b/layout/reftests/flexbox/flexbox-empty-1b.xhtml new file mode 100644 index 000000000..20ea2e50b --- /dev/null +++ b/layout/reftests/flexbox/flexbox-empty-1b.xhtml @@ -0,0 +1,45 @@ +<?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 flex containers that have no children. This + testcase differs from the "1a" variant in that it's got a single space + inside each flex container (which should be ignored, since the flexbox + spec says we shouldn't create a flex item for an entirely-whitespace run + of inline content). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + border: 1px dotted blue; + background: yellow; + display: flex; + } + + div.withPadding { + padding: 2px 3px 4px 5px; + } + </style> + </head> + <body> + <div class="flexbox"> </div> + <div class="flexbox" style="width: 5px"> </div> + <div class="flexbox" style="width: -moz-available"> </div> + <div class="flexbox" style="width: -moz-max-content"> </div> + <div class="flexbox" style="width: -moz-min-content"> </div> + <div class="flexbox" style="height: 6px"> </div> + <div class="flexbox" style="width: 7px; height: 8px"> </div> + + <!-- now with padding --> + <div class="flexbox withPadding"> </div> + <div class="flexbox withPadding" style="width: 5px"> </div> + <div class="flexbox withPadding" style="width: -moz-available"> </div> + <div class="flexbox withPadding" style="width: -moz-max-content"> </div> + <div class="flexbox withPadding" style="width: -moz-min-content"> </div> + <div class="flexbox withPadding" style="height: 6px"> </div> + <div class="flexbox withPadding" style="width: 7px; height: 8px"> </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html new file mode 100644 index 000000000..8a302da77 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-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> + <meta charset="utf-8"> + <title>Reference: Synthesized flex container baseline.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +.ib { + display: inline-block; +} +.ig { + display: inline-grid; +} +.ib, .ig { + border-style: solid; + border-width: 3px 1px 5px 1px; + padding: 7px 10px 3px 8px; + margin: 5px 3px 2px 1px; +} +</style> + +</head><body> + +<pre>Inline-level context:</pre> +Flexbox:<div class="ib"></div> +Block:<div class="ig"></div> + +<pre>Grid-level context:</pre> +<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start"> +Flexbox:<div class="ib"></div> +Block:<div class="ig"></div> +</div> + +<pre>Flexbox-level context:</pre> +<div style="display:inline-flex; align-items:baseline; justify-items:start"> +Flexbox:<div class="ib" style="margin-bottom:0"></div> +Block:<div class="ig"></div> +</div> + +</body></html> diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html new file mode 100644 index 000000000..5f58b18ec --- /dev/null +++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html @@ -0,0 +1,48 @@ +<!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 Flexbox Test: Synthesized flex container baseline.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines"> + <link rel="match" href="flexbox-empty-container-synthesized-baseline-001.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +.ib { + display: inline-block; +} +.if { + display: inline-flex; +} +.ib, .if { + border-style: solid; + border-width: 3px 1px 5px 1px; + padding: 7px 10px 3px 8px; + margin: 5px 3px 2px 1px; +} +</style> + +</head><body> + +<pre>Inline-level context:</pre> +Flexbox:<div class="if"></div> +Block:<div class="ib"></div> + +<pre>Grid-level context:</pre> +<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start"> +Flexbox:<div class="if"></div> +Block:<div class="ib" style="margin-bottom:0"></div> +</div> + +<pre>Flexbox-level context:</pre> +<div style="display:inline-flex; align-items:baseline; justify-items:start"> +Flexbox:<div class="if"></div> +Block:<div class="ib" style="margin-bottom:0"></div> +</div> + +</body></html> diff --git a/layout/reftests/flexbox/flexbox-float-1-ref.xhtml b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml new file mode 100644 index 000000000..1fd86bafd --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml @@ -0,0 +1,39 @@ +<?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> + <style> + div.flexbox { + display: flex; + width: 400px; + margin-bottom: 2px; + font-family: sans-serif; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <div class="flexbox"> + aaa<div>[[[</div>bbb + </div> + <div class="flexbox"> + aaa<div>]]]</div>bbb + </div> + <div class="flexbox"> + aaa<div>[[[</div> + </div> + <div class="flexbox"> + aaa<div>]]]</div> + </div> + <div class="flexbox"> + <div>[[[</div>bbb + </div> + <div class="flexbox"> + <div>]]]</div>bbb + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-1a.xhtml b/layout/reftests/flexbox/flexbox-float-1a.xhtml new file mode 100644 index 000000000..e5c336b46 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-1a.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/ +--> +<!-- + This test verifies that 'float' on a direct child of a flexbox won't + actually cause it to be floated. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: flex; + width: 400px; + margin-bottom: 2px; + font-family: sans-serif; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <!-- These cases have a span as a direct child of the flexbox. The span + should become display:block (and hence form its own flex item), + but it shouldn't actually float. + --> + <div class="flexbox"> + aaa<span style="float: left">[[[</span>bbb + </div> + <div class="flexbox"> + aaa<span style="float: right">]]]</span>bbb + </div> + <div class="flexbox"> + aaa<span style="float: left">[[[</span> + </div> + <div class="flexbox"> + aaa<span style="float: right">]]]</span> + </div> + <div class="flexbox"> + <span style="float: left">[[[</span>bbb + </div> + <div class="flexbox"> + <span style="float: right">]]]</span>bbb + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-1b.xhtml b/layout/reftests/flexbox/flexbox-float-1b.xhtml new file mode 100644 index 000000000..d00b5304e --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-1b.xhtml @@ -0,0 +1,43 @@ +<?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 flexbox-float-1a.xhtml, but with the float-styled + element already being a block. (Should render the same.) +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: flex; + width: 400px; + margin-bottom: 2px; + font-family: sans-serif; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <div class="flexbox"> + aaa<div style="float: left">[[[</div>bbb + </div> + <div class="flexbox"> + aaa<div style="float: right">]]]</div>bbb + </div> + <div class="flexbox"> + aaa<div style="float: left">[[[</div> + </div> + <div class="flexbox"> + aaa<div style="float: right">]]]</div> + </div> + <div class="flexbox"> + <div style="float: left">[[[</div>bbb + </div> + <div class="flexbox"> + <div style="float: right">]]]</div>bbb + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-1c.xhtml b/layout/reftests/flexbox/flexbox-float-1c.xhtml new file mode 100644 index 000000000..e90635813 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-1c.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/ +--> +<!-- + This test is like flexbox-float-1a.xhtml, but with the float-styled + element dynamically inserted. +--> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <script> + function generateFloat(aFloatDirection) { + var newElem = document.createElement("span"); + newElem.setAttribute("style", "float: " + aFloatDirection); + newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]"; + return newElem; + } + + function tweak() { + var containerList = document.getElementsByClassName("flexbox"); + for (var i = 0; i < containerList.length; i++) { + var container = containerList[i]; + var newElem = generateFloat(container.getAttribute("floatValToUse")); + + var nodeToInsertBefore; + var insertPosn = container.getAttribute("insertPosn"); + if (insertPosn == "begin") { + nodeToInsertBefore = container.firstChild; + } else if (insertPosn == "mid") { + nodeToInsertBefore = container.firstChild.nextSibling; + } else if (insertPosn == "end") { + nodeToInsertBefore = null; + } + + container.insertBefore(newElem, nodeToInsertBefore); + } + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div.flexbox { + display: flex; + width: 400px; + margin-bottom: 2px; + font-family: sans-serif; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <div class="flexbox" floatValToUse="left" insertPosn="mid"> + aaa<span>bbb</span> + </div> + <div class="flexbox" floatValToUse="right" insertPosn="mid"> + aaa<span>bbb</span> + </div> + <div class="flexbox" floatValToUse="left" insertPosn="end"> + aaa + </div> + <div class="flexbox" floatValToUse="right" insertPosn="end"> + aaa + </div> + <div class="flexbox" floatValToUse="left" insertPosn="begin"> + bbb + </div> + <div class="flexbox" floatValToUse="right" insertPosn="begin"> + bbb + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-1d.xhtml b/layout/reftests/flexbox/flexbox-float-1d.xhtml new file mode 100644 index 000000000..4fdc493f1 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-1d.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/ +--> +<!-- + This test is like flexbox-float-1b.xhtml, but with the float-styled + element dynamically inserted. +--> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <script> + function generateFloat(aFloatDirection) { + var newElem = document.createElement("div"); + newElem.setAttribute("style", "float: " + aFloatDirection); + newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]"; + return newElem; + } + + function tweak() { + var containerList = document.getElementsByClassName("flexbox"); + for (var i = 0; i < containerList.length; i++) { + var container = containerList[i]; + var newElem = generateFloat(container.getAttribute("floatValToUse")); + + var nodeToInsertBefore; + var insertPosn = container.getAttribute("insertPosn"); + if (insertPosn == "begin") { + nodeToInsertBefore = container.firstChild; + } else if (insertPosn == "mid") { + nodeToInsertBefore = container.firstChild.nextSibling; + } else if (insertPosn == "end") { + nodeToInsertBefore = null; + } + + container.insertBefore(newElem, nodeToInsertBefore); + } + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div.flexbox { + display: flex; + width: 400px; + margin-bottom: 2px; + font-family: sans-serif; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <div class="flexbox" floatValToUse="left" insertPosn="mid"> + aaa<span>bbb</span> + </div> + <div class="flexbox" floatValToUse="right" insertPosn="mid"> + aaa<span>bbb</span> + </div> + <div class="flexbox" floatValToUse="left" insertPosn="end"> + aaa + </div> + <div class="flexbox" floatValToUse="right" insertPosn="end"> + aaa + </div> + <div class="flexbox" floatValToUse="left" insertPosn="begin"> + bbb + </div> + <div class="flexbox" floatValToUse="right" insertPosn="begin"> + bbb + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-2-ref.xhtml b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml new file mode 100644 index 000000000..c6270dd49 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml @@ -0,0 +1,39 @@ +<?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 uses a div with "text-align: center" in place of a + flex container, and has the text "lll" and "rrr" already placed at the + target position instead of having it positioned with the "float" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + text-align: center; + font-family: sans-serif; + width: 400px; + margin-bottom: 2px; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <div class="flexbox"> + lllaaabbb + </div> + <div class="flexbox"> + aaabbbrrr + </div> + + <div class="flexbox"> + lllaaabbb + </div> + <div class="flexbox"> + aaabbbrrr + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-2a.xhtml b/layout/reftests/flexbox/flexbox-float-2a.xhtml new file mode 100644 index 000000000..817e3fb2c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-2a.xhtml @@ -0,0 +1,42 @@ +<?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 'float' on a grandchild of a flex container _will_ + cause the element to be floated. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: flex; + font-family: sans-serif; + width: 400px; + margin-bottom: 2px; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <!-- These cases have a floated span as a grandchild of the flex container. + The span should float within its flex item. --> + <div class="flexbox"> + <span>aaa<span style="float: left">lll</span>bbb</span> + </div> + <div class="flexbox"> + <span>aaa<span style="float: right">rrr</span>bbb</span> + </div> + + <!-- These cases have a floated div as a grandchild of the flex container. + The div should float within its flex item. --> + <div class="flexbox"> + <span>aaa<div style="float: left">lll</div>bbb</span> + </div> + <div class="flexbox"> + <span>aaa<div style="float: right">rrr</div>bbb</span> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-float-2b.xhtml b/layout/reftests/flexbox/flexbox-float-2b.xhtml new file mode 100644 index 000000000..29b9355ee --- /dev/null +++ b/layout/reftests/flexbox/flexbox-float-2b.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/ +--> +<!-- + This test verifies that 'float' on a grandchild of a flex container _will_ + cause the element to be floated. + + This differs from the "2a" variant in that the flex items are <div>s + rather than <span>s (though that shouldn't matter, because <span> as a + flex item should become "display:block"). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + display: flex; + font-family: sans-serif; + width: 400px; + margin-bottom: 2px; + background: lightgreen; + justify-content: space-around; + } + </style> + </head> + <body> + <!-- These cases have a floated span as a grandchild of the flex container. + The span should float within its flex item. --> + <div class="flexbox"> + <div>aaa<span style="float: left">lll</span>bbb</div> + </div> + <div class="flexbox"> + <div>aaa<span style="float: right">rrr</span>bbb</div> + </div> + + <!-- These cases have a floated div as a grandchild of the flex container. + The div should float within its flex item. --> + <div class="flexbox"> + <div>aaa<div style="float: left">lll</div>bbb</div> + </div> + <div class="flexbox"> + <div>aaa<div style="float: right">rrr</div>bbb</div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml new file mode 100644 index 000000000..b1008e7cc --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml @@ -0,0 +1,45 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, using a table with fixed-size cells instead of a + flex container. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + table { + font: 10px Ahem; + height: 100px; + width: 200px; + } + td { vertical-align: top; } + td.a { + width: 30px; + background: lightgreen; + } + td.b { + width: 50px; + background: yellow; + } + td.inflex { + width: 20px; + background: gray; + } + </style> + </head> + <body> + <table cellspacing="0" cellpadding="0"> + <tr> + <td class="a"/> + <td>text</td> + <td class="b"/> + <td><i>italic</i></td> + <td class="inflex"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml new file mode 100644 index 000000000..6146e5052 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test has static inline content intermixed with flex items, + inside a flex container. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + div { height: 100px; } + div.flexbox { + font: 10px Ahem; + width: 200px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + } + div.b { + flex: 2 0 30px; + background: yellow; + } + div.inflex { + flex: 0 0 20px; + background: gray; + } + </style> + </head> + <body> + <div class="flexbox" + ><div class="a"/>text<div class="b"/><i>italic</i + ><div class="inflex"/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml new file mode 100644 index 000000000..933b77070 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test inserts a new div into some inline content in a flex container. + That should split the inline content into two flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <script> + function tweak() { + var flexbox = document.getElementsByClassName("flexbox")[0]; + var insertionPoint = flexbox.firstChild.nextSibling.nextSibling; + + var newDiv = document.createElement("div"); + newDiv.setAttribute("class", "b"); + + flexbox.insertBefore(newDiv, insertionPoint); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div { height: 100px; } + div.flexbox { + font: 10px Ahem; + width: 200px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + } + div.b { + flex: 2 0 30px; + background: yellow; + } + div.inflex { + flex: 0 0 20px; + background: gray; + } + </style> + </head> + <body> + <div class="flexbox" + ><div class="a"/>text<i>italic</i + ><div class="inflex"/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml new file mode 100644 index 000000000..d1469e79c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml @@ -0,0 +1,34 @@ +<?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 a stretch of inline content in a flex container. + (The corresponding testcase has a div interrupting the run, which gets + removed, hopefully making it look like this reference case.) +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div { height: 100px; } + div.flexbox { + width: 200px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + } + div.inflex { + flex: 0 0 20px; + background: gray; + } + </style> + </head> + <body> + <div class="flexbox" + ><div class="a"/>text<i>italic</i + ><div class="inflex"/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml new file mode 100644 index 000000000..bc0b34152 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.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/ +--> +<!-- + This test removes a div from the middle of some inline content in a flex + container. That should merge the inline content into a single flex item. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <script> + function tweak() { + var removeMe = document.getElementById("removeMe"); + removeMe.parentNode.removeChild(removeMe); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div { height: 100px; } + div.flexbox { + width: 200px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + } + div.b { + flex: 2 0 30px; + background: yellow; + } + div.inflex { + flex: 0 0 20px; + background: gray; + } + </style> + </head> + <body> + <div class="flexbox" + ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i + ><div class="inflex"/></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml new file mode 100644 index 000000000..4c28d8d20 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, using a block instead of a flexbox. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + div#block { + width: 100px; + font: 10px Ahem; + } + </style> + </head> + <body> + <div id="block">abc def ghi jkl mno pqr stu</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml new file mode 100644 index 000000000..2b88ce2ae --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test has a run of text in a flex container, for comparison + against the "b" & "c" variants of this test (which use dynamic tweaks). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + div#flexbox { + width: 100px; + display: flex; + font: 10px Ahem; + } + </style> + </head> + <body> + <div id="flexbox">abc def ghi jkl mno pqr stu</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml new file mode 100644 index 000000000..b5d509f18 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test inserts a some inline content in a flex container, just before a + stretch of existing inline content. The new content should be incorporated + into the same anonymous flex item as the existing content. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <script> + function tweak() { + var newInlineContent = document.createTextNode("abc def ghi"); + + var flexbox = document.getElementById("flexbox"); + flexbox.insertBefore(newInlineContent, flexbox.firstChild); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div#flexbox { + width: 100px; + display: flex; + font: 10px Ahem; + } + </style> + </head> + <body> + <div id="flexbox"> jkl mno pqr stu</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml new file mode 100644 index 000000000..d532372a4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test inserts a some inline content in a flex container, just after a + stretch of existing inline content. The new content should be incorporated + into the same anonymous flex item as the existing content. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <script> + function tweak() { + var newInlineContent = document.createTextNode("mno pqr stu"); + + var flexbox = document.getElementById("flexbox"); + flexbox.insertBefore(newInlineContent, null); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div#flexbox { + width: 100px; + display: flex; + font: 10px Ahem; + } + </style> + </head> + <body> + <div id="flexbox">abc def ghi jkl </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml new file mode 100644 index 000000000..cbb99ba9f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml @@ -0,0 +1,21 @@ +<?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 simply has text centered within a div. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div { + width: 200px; + height: 100px; + background: lightgreen; + text-align: center; + } + </style> + </head> + <body> + <div>text</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml new file mode 100644 index 000000000..c7a068d57 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml @@ -0,0 +1,27 @@ +<?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 a flex container which only contains text + will render correctly. We use justify-content to position the text + in the center of the flex container, as a sanity-check to be sure we + are in fact getting a flex container. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + width: 200px; + height: 100px; + background: lightgreen; + justify-content: center; + display: flex; + } + </style> + </head> + <body> + <div class="flexbox">text</div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml new file mode 100644 index 000000000..9e51122ca --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml @@ -0,0 +1,25 @@ +<?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 corresponding testcase, + but with the dynamic removal already performed. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.flexbox { + width: 200px; + height: 100px; + background: lightgreen; + justify-content: space-around; + display: flex; + } + </style> + </head> + <body> + <div class="flexbox">text<div>div</div></div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml new file mode 100644 index 000000000..8338d1871 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test removes a run of inline content from a flexbox, which + should trigger the removal of its now-empty anonymous flex item. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <script> + function tweak() { + var removeMe = document.getElementsByClassName("flexbox")[0].lastChild; + removeMe.parentNode.removeChild(removeMe); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div.flexbox { + width: 200px; + height: 100px; + background: lightgreen; + justify-content: space-around; + display: flex; + } + </style> + </head> + <body> + <div class="flexbox">text<div>div</div> + REMOVE ME + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml new file mode 100644 index 000000000..f11668e59 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml @@ -0,0 +1,91 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case - see documentation in corresponding testcase. + This reference uses blocks where the testcase uses flexboxes. + They should be sized the same, since they're basically just text + with no special flex sizing properties in play. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + table { + width: 300px; + font: 10px Ahem; + margin-bottom: 2px; + border: 1px dashed black; + } + + div.a { background: lightgreen; } + div.b { background: lightblue; } + + <!-- helper-classes for assigning pref / min / auto-width to our divs --> + div.prefWidth { + width: -moz-max-content; + } + div.minWidth { + width: -moz-min-content; + } + div.autoWidth { + width: auto; + } + </style> +</head> +<body> + <!-- both auto width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING MIN WIDTH & AUTO --> + <!-- both min width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- min,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- auto,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & AUTO --> + <!-- both prefWidth (NOTE: makes the table larger than it wants to be --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- pref,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- auto,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & MIN WIDTH --> + <!-- min,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- pref,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml new file mode 100644 index 000000000..f7e99f68a --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.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 has a number of tables, each with 2 flexboxes side-by-side, + whose "width" values depend on the flexbox's min and/or pref widths. + + There's not enough space for both flexboxes to fit side-by-side, so their + width preferences must be balanced This exercises + nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth(). + + IN EACH CASE, div.a has these intrinsic widths: + Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space) + Min width: 50px (width of "aaaaa") + and div.b has these intrinsic widths: + Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space) + Min width: 20px (width "bb") +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + table { + width: 300px; + font: 10px Ahem; + margin-bottom: 2px; + border: 1px dashed black; + } + + div.a, div.b { display: flex; } + + div.a { background: lightgreen; } + div.b { background: lightblue; } + + <!-- helper-classes for assigning pref / min / auto-width to our divs --> + div.prefWidth { + width: -moz-max-content; + } + div.minWidth { + width: -moz-min-content; + } + div.autoWidth { + width: auto; + } + </style> +</head> +<body> + <!-- both auto width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING MIN WIDTH & AUTO --> + <!-- both min width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- min,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- auto,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & AUTO --> + <!-- both prefWidth (NOTE: makes the table larger than it wants to be --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- pref,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- auto,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & MIN WIDTH --> + <!-- min,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> + </tr></table> + <!-- pref,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> + </tr></table> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml new file mode 100644 index 000000000..c2b0074ba --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.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 has a number of tables, each with 2 flexboxes side-by-side, + whose "width" values depend on the flexbox's min and/or pref widths. + + There's not enough space for both flexboxes to fit side-by-side, so their + width preferences must be balanced. This exercises + nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth(). + + IN EACH CASE, div.a has these intrinsic widths: + Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space) + Min width: 50px (width of "aaaaa") + and div.b has these intrinsic widths: + Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space) + Min width: 20px (width "bb") +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> + table { + width: 300px; + font: 10px Ahem; + margin-bottom: 2px; + border: 1px dashed black; + } + + div.a, div.b { display: flex; } + + div.a { background: lightgreen; } + div.b { background: lightblue; } + + <!-- helper-classes for assigning pref / min / auto-width to our divs --> + div.prefWidth { + width: -moz-max-content; + } + div.minWidth { + width: -moz-min-content; + } + div.autoWidth { + width: auto; + } + </style> +</head> +<body> + <!-- both auto width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + + <!-- MIXING MIN WIDTH & AUTO --> + <!-- both min width --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + <!-- min,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + <!-- auto,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & AUTO --> + <!-- both prefWidth (NOTE: makes the table larger than it wants to be --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + <!-- pref,auto --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + <!-- auto,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + + <!-- MIXING PREF WIDTH & MIN WIDTH --> + <!-- min,pref --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> + <!-- pref,min --> + <table cellpadding="0" cellspacing="0"><tr> + <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td> + <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td> + </tr></table> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml new file mode 100644 index 000000000..fe839bdd0 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml @@ -0,0 +1,45 @@ +<?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 has inline blocks in a div, in place of + flex items in a flex container. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { margin: 0; } + + div.flexbox { + width: -moz-max-content; + /* We give the flex container a border and background so we can easily + * see how large it is. */ + border: 2px dotted black; + background: lime; + + font-size: 0; /* to prevent whitespace from having an effect */ + } + + div.wrapper { + display: inline-block; + border: 5px solid teal; + width: 40px; + height: 16px; + } + div.blueBlock { + width: 16px; + height: 16px; + background: rgb(0, 19, 127); /* matches solidblue.png */ + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="wrapper"><div class="blueBlock"/></div> + <div class="wrapper"><div class="blueBlock"/></div> + <div class="wrapper"><div class="blueBlock"/></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml new file mode 100644 index 000000000..bdd41847d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.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/ +--> +<!-- + This test checks how a flexbox sizes itself to shrinkwrap its contents' + preferred sizes. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { margin: 0; } + div.flexbox { + display: flex; + width: -moz-max-content; + + /* We give the flexbox a border and background so we can easily see how + * large it is. */ + border: 2px dotted black; + background: lime; + } + + div.imgWrapper { + border: 5px solid teal; + width: 40px; + height: 16px; + } + img { + vertical-align: top; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="imgWrapper"><img src="solidblue.png"/></div> + <div class="imgWrapper"><img src="solidblue.png"/></div> + <div class="imgWrapper"><img src="solidblue.png"/></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml new file mode 100644 index 000000000..07ba6faf3 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.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/ +--> +<!-- + This test is like the -2a variant, but with a <div> instead of an <img> + at the deepest level of nesting. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { margin: 0; } + + div.flexbox { + display: flex; + width: -moz-max-content; + + /* We give the flex container a border and background so we can easily + * see how large it is. */ + border: 2px dotted black; + background: lime; + } + + div.wrapper { + border: 5px solid teal; + width: 40px; + height: 16px; + } + div.blueBlock { + width: 16px; + height: 16px; + background: rgb(0, 19, 127); /* matches solidblue.png */ + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="wrapper"><div class="blueBlock"/></div> + <div class="wrapper"><div class="blueBlock"/></div> + <div class="wrapper"><div class="blueBlock"/></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-invalidation-1-ref.html b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html new file mode 100644 index 000000000..a9481b0a7 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, with testcase's dynamic tweak already performed. +--> +<html> + <head> + <style> + div#outer { margin-left: 40px } + + div#flexContainer { + width: 100px; + height: 50px; + background: lightgray; + display: flex; + justify-content: center; + } + + div#flexItem { + border: 1px solid black; + height: 200%; + background: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="flexContainer"> + <div id="flexItem">item</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-invalidation-1.html b/layout/reftests/flexbox/flexbox-invalidation-1.html new file mode 100644 index 000000000..5520c295e --- /dev/null +++ b/layout/reftests/flexbox/flexbox-invalidation-1.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we include our children's overflow areas in the + flex container's overflow area -- invalidating their old location and new + location when the flex container is moved, even if they stick outside the + flex container. +--> +<html class="reftest-wait"> + <head> + <script> + function tweak() { + var outer = document.getElementById("outer"); + outer.style.marginLeft = "40px"; + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + <style> + div#flexContainer { + width: 100px; + height: 50px; + background: lightgray; + display: flex; + justify-content: center; + } + + div#flexItem { + border: 1px solid black; + height: 200%; + background: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="flexContainer"> + <div id="flexItem">item</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html b/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html new file mode 100644 index 000000000..dd17f1671 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + #container { display: flex; } + #highOrdinal { + background: lime; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div id="container"> + <div id="highOrdinal"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-paint-ordering-3.html b/layout/reftests/flexbox/flexbox-paint-ordering-3.html new file mode 100644 index 000000000..a0052ff9f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-paint-ordering-3.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for whether we honor "order" on absolutely-positioned elements + within a flex container. Specifically, we test whether it affects their + paint-order (as it should, since it reorders the frame tree). --> +<html> +<head> + <style> + #container { display: flex; } + #lowOrdinal { + position: absolute; + order: 5; + background: red; + height: 100px; width: 100px; + } + #highOrdinal { + position: absolute; + order: 10; + background: lime; + height: 100px; width: 100px; + } + #noOrdinal { + position: absolute; + background: orange; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div id="container"> + <div id="highOrdinal"></div> + <div id="lowOrdinal"></div> + <div id="noOrdinal"></div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml new file mode 100644 index 000000000..02a2a90cd --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-1-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/ +--> +<!-- Reference case for absolutely positioned children of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + } + div.a { + width: 100%; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + } + div.inflex { + width: 20px; + height: 100px; + background: gray; + display: inline-block; + } + div.noFlexFn { + width: 15px; + height: 15px; + background: teal; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child abspos: --> + <div class="flexbox" + ><div class="a abspos" style="width: 30px"/><div class="b"/></div> + <!-- Second child abspos: --> + <div class="flexbox" + ><div class="a"/><div class="b abspos" style="width: 20px"/></div> + <!-- Middle child abspos: --> + <div class="flexbox" + ><div class="a" style="width: 80px" + /><div class="inflex abspos" + /><div class="b" style="width: 120px"/></div> + <!-- Third child abspos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" + ><div class="inflex" style="margin-left: 15px" + /><div class="inflex" style="margin-left: 30px" + /><div class="inflex" style="margin-left: 30px" + /><div class="noFlexFn abspos" + /><div class="inflex" style="margin-left: 30px"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml new file mode 100644 index 000000000..aa89dd714 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-1.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 absolutely positioned children of a flex container. + This positioning is with respect to the containing block's left edge. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + display: flex; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 auto; + width: 20px; + height: 100px; + background: yellow; + } + div.inflex { + flex: none; + width: 20px; + height: 100px; + background: gray; + } + div.noFlexFn { + width: 15px; + height: 15px; + background: teal; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child abspos: --> + <div class="flexbox"><div class="a abspos"/><div class="b"/></div> + <!-- Second child abspos: --> + <div class="flexbox"><div class="a"/><div class="b abspos"/></div> + <!-- Middle child abspos: --> + <div class="flexbox" + ><div class="a"/><div class="inflex abspos"/><div class="b"/></div> + <!-- Third child abspos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" style="justify-content: space-around" + ><div class="inflex"/><div class="inflex"/><div class="inflex" + /><div class="noFlexFn abspos"/><div class="inflex"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml new file mode 100644 index 000000000..00ebecc30 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-2-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/ +--> +<!-- Reference case for absolutely positioned children of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + } + div.a { + width: 100%; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + } + div.inflex { + width: 20px; + height: 100px; + background: gray; + display: inline-block; + } + div.noFlexFn { + width: 16px; + height: 16px; + background: teal; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child abspos: --> + <div class="flexbox" + ><div class="a abspos" style="width: 30px"/><div class="b"/></div> + <!-- Second child abspos: --> + <div class="flexbox" + ><div class="a"/><div class="b abspos" + style="width: 20px; left: 0"/></div> + <!-- Middle child abspos: --> + <div class="flexbox" + ><div class="a" style="width: 80px" + /><div class="inflex abspos" style="left: 0" + /><div class="b" style="width: 120px"/></div> + <!-- Third child abspos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" + ><div class="inflex" style="margin-left: 15px" + /><div class="inflex" style="margin-left: 30px" + /><div class="inflex" style="margin-left: 30px" + /><div class="noFlexFn abspos" style="left: 90px" + /><div class="inflex" style="margin-left: 30px"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml new file mode 100644 index 000000000..613c57cde --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-2.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/ +--> +<!-- + Testcase with absolutely positioned children of a flex container. + In this testcase, we simply specify "position: absolute" without + actually doing any positioning, to test the "static position" of these + children. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + display: flex; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 auto; + width: 20px; + height: 100px; + background: yellow; + } + div.inflex { + flex: none; + width: 20px; + height: 100px; + background: gray; + } + div.noFlexFn { + width: 16px; + height: 16px; + background: teal; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child abspos: --> + <div class="flexbox"><div class="a abspos"/><div class="b"/></div> + <!-- Second child abspos: --> + <div class="flexbox"><div class="a"/><div class="b abspos"/></div> + <!-- Middle child abspos: --> + <div class="flexbox" + ><div class="a"/><div class="inflex abspos"/><div class="b"/></div> + <!-- Third child abspos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" style="justify-content: space-around" + ><div class="inflex"/><div class="inflex"/><div class="inflex" + /><div class="noFlexFn abspos"/><div class="inflex"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml new file mode 100644 index 000000000..9bafa1506 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.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/ +--> +<!-- Reference case for absolutely positioned flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + position: absolute; + border: 1px solid black; + } + div.a { + width: 80px; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 120px; + height: 100px; + background: yellow; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml new file mode 100644 index 000000000..21b8730c4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-3.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/ +--> +<!-- + Testcase with absolutely positioned flex container. + This positioning is with respect to the containing block's left edge. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + display: flex; + position: absolute; + border: 1px solid black; + } + div.a { + flex: 1 0 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + height: 100px; + background: yellow; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml new file mode 100644 index 000000000..4c675fa8e --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml @@ -0,0 +1,50 @@ +<?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 absolutely positioned flex container & children. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + position: absolute; + border: 1px solid black; + } + div.a { + width: 30px; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox" + ><div class="a abspos"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml new file mode 100644 index 000000000..67974fcf6 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-absolute-4.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/ +--> +<!-- + Testcase with absolutely positioned flex container & children. + The children's positioning is with respect to the flex container. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .abspos { + position: absolute; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + display: flex; + position: absolute; + border: 1px solid black; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + height: 100px; + background: yellow; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a abspos"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml new file mode 100644 index 000000000..bcd3982e4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-1-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/ +--> +<!-- Reference case for fixed-position children of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: fixed; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + } + div.a { + width: 100%; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + } + div.inflex { + width: 20px; + height: 100px; + background: gray; + display: inline-block; + } + div.noFlexFn { + width: 15px; + height: 15px; + background: teal; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child fixedpos: --> + <div class="flexbox" + ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div> + <!-- Second child fixedpos: --> + <div class="flexbox" + ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div> + <!-- Middle child fixedpos: --> + <div class="flexbox" + ><div class="a" style="width: 80px" + /><div class="inflex fixedpos" + /><div class="b" style="width: 120px"/></div> + <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" + ><div class="inflex" style="margin-left: 15px" + /><div class="inflex" style="margin-left: 30px" + /><div class="inflex" style="margin-left: 30px" + /><div class="noFlexFn fixedpos" + /><div class="inflex" style="margin-left: 30px"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml new file mode 100644 index 000000000..6401fb2cb --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-1.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 fixed-position children of a flex container. + The positioning is with respect to the containing block's left edge. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: fixed; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + display: flex; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 auto; + width: 20px; + height: 100px; + background: yellow; + } + div.inflex { + flex: none; + width: 20px; + height: 100px; + background: gray; + } + div.noFlexFn { + width: 15px; + height: 15px; + background: teal; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child fixedpos: --> + <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div> + <!-- Second child fixedpos: --> + <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div> + <!-- Middle child fixedpos: --> + <div class="flexbox" + ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div> + <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" style="justify-content: space-around" + ><div class="inflex"/><div class="inflex"/><div class="inflex" + /><div class="noFlexFn fixedpos"/><div class="inflex"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml new file mode 100644 index 000000000..9476c8086 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-2-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/ +--> +<!-- Reference case for fixed-position children of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: absolute; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + } + div.a { + width: 100%; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + } + div.inflex { + width: 20px; + height: 100px; + background: gray; + display: inline-block; + } + div.noFlexFn { + width: 16px; + height: 16px; + background: teal; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child fixedpos: --> + <div class="flexbox" + ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div> + <!-- Second child fixedpos: --> + <div class="flexbox" + ><div class="a"/><div class="b fixedpos" + style="width: 20px; left: 0"/></div> + <!-- Middle child fixedpos: --> + <div class="flexbox" + ><div class="a" style="width: 80px" + /><div class="inflex fixedpos" style="left: 0" + /><div class="b" style="width: 120px"/></div> + <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" + ><div class="inflex" style="margin-left: 15px" + /><div class="inflex" style="margin-left: 30px" + /><div class="inflex" style="margin-left: 30px" + /><div class="noFlexFn fixedpos" style="left: 90px" + /><div class="inflex" style="margin-left: 30px"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml new file mode 100644 index 000000000..00a3c18a4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-2.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/ +--> +<!-- + Testcase with fixed-position children of a flex container. + In this testcase, we simply specify "position: fixed" without + actually doing any positioning, to test the "static position" of these + children. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: fixed; + border: 2px dotted black; + } + div.flexbox { + width: 200px; + height: 100px; + display: flex; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 auto; + width: 20px; + height: 100px; + background: yellow; + } + div.inflex { + flex: none; + width: 20px; + height: 100px; + background: gray; + } + div.noFlexFn { + width: 16px; + height: 16px; + background: teal; + } + </style> + </head> + <body> + <div class="containingBlock"> + <!-- First child fixedpos: --> + <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div> + <!-- Second child fixedpos: --> + <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div> + <!-- Middle child fixedpos: --> + <div class="flexbox" + ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div> + <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: --> + <div class="flexbox" style="justify-content: space-around" + ><div class="inflex"/><div class="inflex"/><div class="inflex" + /><div class="noFlexFn fixedpos"/><div class="inflex"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml new file mode 100644 index 000000000..d0a086d60 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.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/ +--> +<!-- Reference case for fixed-position flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + position: fixed; + border: 1px solid black; + } + div.a { + width: 80px; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 120px; + height: 100px; + background: yellow; + display: inline-block; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml new file mode 100644 index 000000000..a67481879 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-3.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/ +--> +<!-- + Testcase with fixed-position flex container. + This positioning is with respect to the viewport. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + display: flex; + position: fixed; + border: 1px solid black; + } + div.a { + flex: 1 0 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + height: 100px; + background: yellow; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml new file mode 100644 index 000000000..877832665 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-4-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 fixed-position flex container & children. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: fixed; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + position: fixed; + border: 2px dashed teal; + } + div.a { + width: 30px; + height: 100px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 100%; + height: 100px; + background: yellow; + display: inline-block; + vertical-align: top; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox" + ><div class="a fixedpos"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml new file mode 100644 index 000000000..05c75baee --- /dev/null +++ b/layout/reftests/flexbox/flexbox-position-fixed-4.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/ +--> +<!-- + Testcase with fixed-position flex container & children. + All positioning is with respect to the viewport. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + div.containingBlock { + top: 15px; + left: 20px; + height: 400px; + position: absolute; + border: 2px dashed purple; + } + .fixedpos { + position: fixed; + left: 5px; + border: 2px dotted black; + } + div.flexbox { + top: 30px; + left: 40px; + width: 200px; + height: 100px; + display: flex; + position: fixed; + border: 2px dashed teal; + } + div.a { + flex: 1 0 auto; + width: 30px; + height: 100px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + height: 100px; + background: yellow; + } + </style> + </head> + <body> + <div class="containingBlock"> + <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html new file mode 100644 index 000000000..66df03b9d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Helper-file for reftest flexbox-resizeviewport-1.xhtml + I'm intentionally using quirks-mode (no doctype), so that + a 100% height will work. --> +<html> + <head> + <style> + div.flexbox { + display: flex; + height: 100%; + border: 2px dashed black; + } + div.a { + flex: 1; + background: pink; + } + div.b { + flex: 1; + background: teal; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml new file mode 100644 index 000000000..59ba62e64 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml @@ -0,0 +1,22 @@ +<?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> + <style> + iframe { + width: 75px; + height: 75px; + } + </style> + </head> + <body> + <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 50px"/> + <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 125px"/> + <br/> + <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 50px"/> + <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 125px"/> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml new file mode 100644 index 000000000..2875e8ee3 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to be sure a flex container gets reflowed properly when its + iframe changes size. --> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + iframe { + width: 75px; + height: 75px; + } + </style> + <script> + function setElementPropertyTo(id, propertyName, propertyValue) { + var elem = document.getElementById(id); + elem.style[propertyName] = propertyValue; + } + + function tweak() { + setElementPropertyTo("a", "width", "50px"); + setElementPropertyTo("b", "width", "125px"); + setElementPropertyTo("c", "height", "50px"); + setElementPropertyTo("d", "height", "125px"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </head> + <body> + <iframe id="a" src="flexbox-resizeviewport-1-helper.html"/> + <iframe id="b" src="flexbox-resizeviewport-1-helper.html"/> + <br/> + <iframe id="c" src="flexbox-resizeviewport-1-helper.html"/> + <iframe id="d" src="flexbox-resizeviewport-1-helper.html"/> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg new file mode 100644 index 000000000..f2eef91e4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="100%" height="100%"> + + <rect width="100%" height="100%" fill="lime"/> + +</svg> diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg new file mode 100644 index 000000000..c12e9dde5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + style="display:flex" + width="100%" height="100%"> + + <title>Test that we ignore "display:flex" on a root SVG node</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=969460 --> + + <rect width="100%" height="100%" fill="lime"/> + +</svg> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html new file mode 100644 index 000000000..8e6f377c5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html @@ -0,0 +1,78 @@ +<!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 Flexbox Reference: caption size test for table flex items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403"> + <style type="text/css"> +* { vertical-align: top; } +.flex { + display: inline-flex; + border: 3px solid grey; + height: 73px; + width: 110px; + align-items: start; /* no support for stretch yet: bug 799725 */ +} + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + flex: auto; + min-width: 0; + min-height: 0; + width: 32px; + height: 22px; +} + +caption { border: 1px dashed blue; } +t { display:block; width:30px; height:20px; } +i:nth-of-type(1) { width:10px; height:20px; } +i:nth-of-type(2) { width:20px; height:10px; } + +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div> + +<script> +let sizes = [ + [ "30px", "16px" ], + [ "30px", "16px" ], + [ "30px", "16px" ], + [ "30px", "16px" ], + [ "27px", "16px" ], + [ "30px", "16px" ], + [ "22px", "16px" ], + [ "22px", "16px" ], +]; +Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => { + let size = sizes[0]; + e.style.width = size[0]; + e.style.height = size[1]; + sizes.shift(); +}); +</script> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1.html b/layout/reftests/flexbox/flexbox-table-flex-items-1.html new file mode 100644 index 000000000..09ab0886d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html @@ -0,0 +1,72 @@ +<!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 Flexbox Test: caption size test for table flex items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="flexbox-table-flex-items-1.html"> + <style type="text/css"> +* { vertical-align: top; } +.flex { + display: inline-flex; + border: 3px solid grey; + height: 73px; + width: 110px; + align-items: start; /* no support for stretch yet: bug 799725 */ +} + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + flex: auto; + min-width: 0; + min-height: 0; +} + +caption { border: 1px dashed blue;} +x { display:block; width:16px; height:16px; } +t { display:block; width:30px; height:20px; } +i:nth-of-type(1) { width:10px; height:20px; } +i:nth-of-type(2) { width:20px; height:10px; } + +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div> + +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div> +<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div> + +<!-- for generating the result for the -ref file +<script> +let sizes = "let sizes = [\n"; +Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => { + let cs = window.getComputedStyle(e); + sizes += ' [ "' + cs.width +'", "' + cs.height + '" ],\n'; +}); +sizes += "];\n"; +console.log(sizes); +</script> +--> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html new file mode 100644 index 000000000..f08e16d26 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + div.flexbox { + border: 2px dotted lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + width: -moz-available; + outline: 1px dashed black; + margin: 0; + vertical-align: top; + display: block; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html new file mode 100644 index 000000000..317112e9f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks that flex containers honor those widgets (if any) in + our system theme that have only a single valid size (and hence should + refuse to flex). + + e.g. in Gecko with a GTK theme, checkboxes and radio buttons have a single + valid size, and any specified widths (and min/max-widths) will have no + effect on their rendering (regardless of whether they're in a flex + container). +--> +<html> +<head> + <style> + div.flexbox { + display: flex; + align-items: flex-start; + border: 2px dotted lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + flex: 1; + outline: 1px dashed black; + margin: 0; + vertical-align: top; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html new file mode 100644 index 000000000..49ef4ac2c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + div.flexbox { + background: lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + min-width: 350px; + outline: 1px dashed black; + margin: 0; + vertical-align: top; + display: block; + width: -moz-max-content; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html new file mode 100644 index 000000000..7e2ec2908 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks that, for any widgets that have a single valid size + (and hence refuse to flex), we don't honor the "min-width" property + when running the flex algorithm, just as we don't honor it outside + of flexbox contexts. +--> +<html> +<head> + <style> + div.flexbox { + display: flex; + align-items: flex-start; + background: lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + min-width: 350px; + outline: 1px dashed black; + margin: 0; + vertical-align: top; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html new file mode 100644 index 000000000..61eb37638 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + div.flexbox { + background: lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + max-width: 3px; + outline: 1px dashed black; + margin: 0; + vertical-align: top; + display: block; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html new file mode 100644 index 000000000..dee3b4ad0 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks that, for any widgets that have a single valid size + (and hence refuse to flex), we don't honor the "max-width" property + when running the flex algorithm, just as we don't honor it outside + of flexbox contexts. +--> +<html> +<head> + <style> + div.flexbox { + display: flex; + align-items: flex-start; + background: lightgray; + width: 400px; + height: 40px; + margin-bottom: 10px; + } + div.flexbox > * { + max-width: 3px; + min-width: 0; /* to override default 'min-width:auto' */ + outline: 1px dashed black; + margin: 0; + vertical-align: top; + } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <div class="flexbox"><input type="file"></div> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="password"></div> + <div class="flexbox"><input type="radio"></div> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> + <div class="flexbox"><input type="text"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html new file mode 100644 index 000000000..b34c4f51d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <style> + div.flexbox { + background: lightgray; + float: left; + height: 60px; + margin-right: 10px; + } + div.flexbox > * { + outline: 1px dashed black; + margin: 0; + vertical-align: top; + height: 100%; + display: block; + } + br { clear: left; } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <br> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="radio"></div> + <br> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html new file mode 100644 index 000000000..bb7c5e958 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks that, for any widgets that have a single valid size + (and hence refuse to flex), we don't stretch them in the cross-axis, + despite the "align-self: stretch" property. + + These widgets can be allowed to be resized on some platforms but not others. + We'll account for that by giving them height: 100% in the reference case, + so that if they're allowed to stretch, then they'll stretch in both the + reference case and the testcase. +--> +<html> +<head> + <style> + div.flexbox { + display: flex; + background: lightgray; + float: left; + height: 60px; + margin-right: 10px; + } + div.flexbox > * { + outline: 1px dashed black; + margin: 0; + vertical-align: top; + height: auto; + align-self: stretch; + } + br { clear: left; } + </style> +</head> +<body> + <div class="flexbox"><input type="button"></div> + <div class="flexbox"><input type="checkbox"></div> + <br> + <div class="flexbox"><input type="image"></div> + <div class="flexbox"><input type="radio"></div> + <br> + <div class="flexbox"><input type="reset"></div> + <div class="flexbox"><input type="submit"></div> +</body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html new file mode 100644 index 000000000..2f002b63b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html new file mode 100644 index 000000000..ae7297f59 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html new file mode 100644 index 000000000..40cdcbe40 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html new file mode 100644 index 000000000..16dd69748 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html new file mode 100644 index 000000000..086b3b006 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html new file mode 100644 index 000000000..d631c1857 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html new file mode 100644 index 000000000..4879d1527 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html new file mode 100644 index 000000000..40b7a2ef8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html new file mode 100644 index 000000000..8d2be34b2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html new file mode 100644 index 000000000..0697416b7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html new file mode 100644 index 000000000..31ee91cf3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html new file mode 100644 index 000000000..10cd9b22d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html new file mode 100644 index 000000000..3e606df23 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html new file mode 100644 index 000000000..e45df0ffa --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html new file mode 100644 index 000000000..586b51db7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .flexContainer { + display: flex; + flex-direction: column; + border: 2px dotted black; + height: 298px; + } + .multicol { + height: 100px; + width: 200px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 4px solid orange; + } + </style> + </head> + <body> + <div class="multicol"> + <div class="flexContainer"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html new file mode 100644 index 000000000..d0231e2f5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + background: teal; + border: 1px dashed black; + } + .item { + display: block; + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html new file mode 100644 index 000000000..4b917aa18 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html new file mode 100644 index 000000000..8164a5aa3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.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 fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html new file mode 100644 index 000000000..3d2ae7e13 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row-reverse" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html new file mode 100644 index 000000000..0b0aef653 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.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 fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html new file mode 100644 index 000000000..ae31d0898 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html new file mode 100644 index 000000000..bfd2fde16 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html new file mode 100644 index 000000000..1e3e9ff8c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse" + and "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html new file mode 100644 index 000000000..317e625d0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html new file mode 100644 index 000000000..163234dea --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.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 fragment a flex container with several children in a + multi-line vertical flexbox. +--> +<html> + <head> + <style> + .multicol { + height: 40px; + width: 100px; + -moz-column-width: 60px; + -moz-column-fill: auto; + border: 2px solid purple; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + background: yellow; + border: 1px dashed black; + } + .item { + width: 40px; + height: 15px; + border: 1px dotted teal; + margin: 1px; + font: 10px serif; + float: left; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer" style="height: 38px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">2</div> + </div> + </div> + + <!-- auto-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 38px"> + <div style="width: 132px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">5</div> + <div class="item">2</div> + <div class="item">4</div> + </div> + </div> + </div> + + <!-- fixed-height container--> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">2</div> + </div> + </div> + + <!-- fixed-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div style="width: 132px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">5</div> + <div class="item">2</div> + <div class="item">4</div> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html new file mode 100644 index 000000000..b006e9718 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with several children in a + multi-line vertical flexbox. +--> +<html> + <head> + <style> + .multicol { + height: 40px; + width: 100px; + -moz-column-width: 60px; + -moz-column-fill: auto; + border: 2px solid purple; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start; + background: yellow; + border: 1px dashed black; + } + .item { + width: 40px; + height: 15px; + border: 1px dotted teal; + margin: 1px; + font: 10px serif; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + + <!-- auto-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + <div class="item">4</div> + <div class="item">5</div> + </div> + </div> + + <!-- fixed-height container--> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + + <!-- fixed-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + <div class="item">4</div> + <div class="item">5</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/reftest-stylo.list b/layout/reftests/flexbox/pagination/reftest-stylo.list new file mode 100644 index 000000000..47156fa3a --- /dev/null +++ b/layout/reftests/flexbox/pagination/reftest-stylo.list @@ -0,0 +1,31 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests with an empty flex container being fragmented: +== flexbox-empty-1a.html flexbox-empty-1a.html +== flexbox-empty-1b.html flexbox-empty-1b.html +== flexbox-empty-1c.html flexbox-empty-1c.html +== flexbox-empty-1d.html flexbox-empty-1d.html + +# Tests with an empty flex container that overflows a short fixed-height block +# being fragmented: +== flexbox-empty-1e.html flexbox-empty-1e.html +== flexbox-empty-1f.html flexbox-empty-1f.html +== flexbox-empty-1g.html flexbox-empty-1g.html +== flexbox-empty-1h.html flexbox-empty-1h.html + +# Tests with an empty flex container being fragmented, with margin, border, +# and/or padding being taller than the available height: +== flexbox-empty-2a.html flexbox-empty-2a.html +== flexbox-empty-2b.html flexbox-empty-2b.html +== flexbox-empty-2c.html flexbox-empty-2c.html +== flexbox-empty-2d.html flexbox-empty-2d.html + +# Tests for how we fragment a flex container with one unbreakable child +== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1a.html +== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1a-wrap.html +== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1b.html +== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1b-wrap.html +== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1c.html +== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1c-wrap.html +== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1d.html +== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1d-wrap.html +== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2.html diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list new file mode 100644 index 000000000..31842d43d --- /dev/null +++ b/layout/reftests/flexbox/pagination/reftest.list @@ -0,0 +1,30 @@ +# Tests with an empty flex container being fragmented: +== flexbox-empty-1a.html flexbox-empty-1-ref.html +== flexbox-empty-1b.html flexbox-empty-1-ref.html +== flexbox-empty-1c.html flexbox-empty-1-ref.html +== flexbox-empty-1d.html flexbox-empty-1-ref.html + +# Tests with an empty flex container that overflows a short fixed-height block +# being fragmented: +== flexbox-empty-1e.html flexbox-empty-1-ref.html +== flexbox-empty-1f.html flexbox-empty-1-ref.html +== flexbox-empty-1g.html flexbox-empty-1-ref.html +== flexbox-empty-1h.html flexbox-empty-1-ref.html + +# Tests with an empty flex container being fragmented, with margin, border, +# and/or padding being taller than the available height: +== flexbox-empty-2a.html flexbox-empty-2-ref.html +== flexbox-empty-2b.html flexbox-empty-2-ref.html +== flexbox-empty-2c.html flexbox-empty-2-ref.html +== flexbox-empty-2d.html flexbox-empty-2-ref.html + +# Tests for how we fragment a flex container with one unbreakable child +== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html diff --git a/layout/reftests/flexbox/reftest-stylo.list b/layout/reftests/flexbox/reftest-stylo.list new file mode 100644 index 000000000..be3987fba --- /dev/null +++ b/layout/reftests/flexbox/reftest-stylo.list @@ -0,0 +1,121 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory. +# The tests that remain in *this* directory are still here because either: +# a) They (or one of their closely-related tests) use some moz-prefixed +# feature, e.g. MozReftestInvalidate or -moz-max-content. +# ...or... +# b) They test a feature that has known bugs (e.g. bug 874713) +# +# Where possible & practical, we should try to address these so we can migrate +# tests over to the w3c-css directory, so that they can become part of the +# W3C's test suite. + +# SUBDIRECTORY: Reftests for paginated flex containers +include pagination/reftest-stylo.list + +# Tests for cross-axis alignment (align-self / align-items properties) +== flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2.xhtml +# bug 793456, and possibly others +# This one fails on windows R (but not Ru, strangely). On Windows R, the +# single-line <label> flex item has a different background size in test vs. ref +fuzzy-if(B2G,10,3) fuzzy-if(cocoaWidget,1,2) random-if(winWidget) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3.xhtml +# XXXdholbert investigate +== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4.xhtml + +# Tests for box-sizing on flex containers and flex items. +== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1.html +== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1.html +== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1a.html +== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1b.html +== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1a.html +== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1b.html + +# Tests for dynamic modifications of content inside/around a flex container +== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1.xhtml +== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2.xhtml +== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3.xhtml +== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4.xhtml +== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1a.html +== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1b.html +== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1a.xhtml +== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1b.xhtml + +# Tests for dynamic insertions of content into a flex container +# (with existing [div | span | text] inside the flexbox, and new content +# inserted adjacent to that existing content.) +== flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1.xhtml +== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2.xhtml +== flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3.xhtml + +== flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundSpan-1.xhtml +== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundSpan-2.xhtml +== flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundSpan-3.xhtml + +== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1.xhtml +== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2.xhtml +== flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3.xhtml + +# Variant of one of the above tests, to regression-test an invalidation issue +== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1.xhtml + +# Tests for empty flexboxes (with no flex items) +== flexbox-empty-1a.xhtml flexbox-empty-1a.xhtml +== flexbox-empty-1b.xhtml flexbox-empty-1b.xhtml + +# Tests for handling of floated elements inside a flexbox +== flexbox-float-1a.xhtml flexbox-float-1a.xhtml +== flexbox-float-1b.xhtml flexbox-float-1b.xhtml +== flexbox-float-1c.xhtml flexbox-float-1c.xhtml +== flexbox-float-1d.xhtml flexbox-float-1d.xhtml +== flexbox-float-2a.xhtml flexbox-float-2a.xhtml +== flexbox-float-2b.xhtml flexbox-float-2b.xhtml + +# Tests for the order in which we paint flex items +== flexbox-paint-ordering-3.html flexbox-paint-ordering-3.html +# bug 874718 + +# Tests for handling of absolutely/fixed/relatively-positioned flex items. +== flexbox-position-absolute-1.xhtml flexbox-position-absolute-1.xhtml +== flexbox-position-absolute-2.xhtml flexbox-position-absolute-2.xhtml +== flexbox-position-absolute-3.xhtml flexbox-position-absolute-3.xhtml +== flexbox-position-absolute-4.xhtml flexbox-position-absolute-4.xhtml +== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3.xhtml +fuzzy-if(Android,16,400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1.xhtml +fuzzy-if(Android,16,400) == flexbox-position-fixed-2.xhtml flexbox-position-fixed-2.xhtml +== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3.xhtml +== flexbox-position-fixed-4.xhtml flexbox-position-fixed-4.xhtml + +# Tests for inline content in a flexbox that gets wrapped in an anonymous block +== flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1a.xhtml +# reference case rendering is incorrect; bug 858333 +skip == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1b.xhtml +# reference case rendering is incorrect; bug 858333 +== flexbox-inlinecontent-horiz-2.xhtml flexbox-inlinecontent-horiz-2.xhtml +== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3a.xhtml +== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3b.xhtml +== flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3c.xhtml +== flexbox-inlinecontent-horiz-4.xhtml flexbox-inlinecontent-horiz-4.xhtml +== flexbox-inlinecontent-horiz-5.xhtml flexbox-inlinecontent-horiz-5.xhtml + +# Tests for intrinsic sizing of flexboxes +== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1a.xhtml +== flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1b.xhtml +== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2a.xhtml +== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2b.xhtml + +# Tests for invalidation after dynamic modifications +== flexbox-invalidation-1.html flexbox-invalidation-1.html + +# Tests for flexbox in an iframe that gets resized. +fails skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,5) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop + +# Tests for flexbox styling on things that don't support it +== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1.svg + +# Tests with widgets as flex items +fuzzy-if(gtkWidget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1.html +fuzzy-if(gtkWidget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2.html +skip-if(gtkWidget) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3.html +# bug 1260965 +fails fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4.html diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list new file mode 100644 index 000000000..79ffa7e75 --- /dev/null +++ b/layout/reftests/flexbox/reftest.list @@ -0,0 +1,118 @@ +# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory. +# The tests that remain in *this* directory are still here because either: +# a) They (or one of their closely-related tests) use some moz-prefixed +# feature, e.g. MozReftestInvalidate or -moz-max-content. +# ...or... +# b) They test a feature that has known bugs (e.g. bug 874713) +# +# Where possible & practical, we should try to address these so we can migrate +# tests over to the w3c-css directory, so that they can become part of the +# W3C's test suite. + +# SUBDIRECTORY: Reftests for paginated flex containers +include pagination/reftest.list + +# Tests for cross-axis alignment (align-self / align-items properties) +fails == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others +# This one fails on windows R (but not Ru, strangely) and GTK. +# On Windows R and GTK, the single-line <label> flex item has a different +# background size in test vs. ref +# Disabled this test in v52 because it depends on bug 418833: fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected. +== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml + +# Tests for box-sizing on flex containers and flex items. +== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html +== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html +== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1-ref.html +== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1-ref.html +== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1-ref.html +== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1-ref.html + +# Tests for dynamic modifications of content inside/around a flex container +== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1-ref.xhtml +== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2-ref.xhtml +== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3-ref.xhtml +== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4-ref.xhtml +== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1-ref.html +== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1-ref.html +== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1-ref.xhtml +== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1-ref.xhtml + +# Tests for dynamic insertions of content into a flex container +# (with existing [div | span | text] inside the flexbox, and new content +# inserted adjacent to that existing content.) +fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml +== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml +fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml + +fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml +== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml +fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml + +== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1-ref.xhtml +== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2-ref.xhtml +== flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml + +# Variant of one of the above tests, to regression-test an invalidation issue +== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1-ref.xhtml + +# Tests for empty flexboxes (with no flex items) +== flexbox-empty-1a.xhtml flexbox-empty-1-ref.xhtml +== flexbox-empty-1b.xhtml flexbox-empty-1-ref.xhtml +== flexbox-empty-container-synthesized-baseline-001.html flexbox-empty-container-synthesized-baseline-001-ref.html + +# Tests for handling of floated elements inside a flexbox +== flexbox-float-1a.xhtml flexbox-float-1-ref.xhtml +== flexbox-float-1b.xhtml flexbox-float-1-ref.xhtml +== flexbox-float-1c.xhtml flexbox-float-1-ref.xhtml +== flexbox-float-1d.xhtml flexbox-float-1-ref.xhtml +== flexbox-float-2a.xhtml flexbox-float-2-ref.xhtml +== flexbox-float-2b.xhtml flexbox-float-2-ref.xhtml + +# Tests for the order in which we paint flex items +fails == flexbox-paint-ordering-3.html flexbox-paint-ordering-3-ref.html # bug 874718 + +# Tests for handling of absolutely/fixed/relatively-positioned flex items. +== flexbox-position-absolute-1.xhtml flexbox-position-absolute-1-ref.xhtml +== flexbox-position-absolute-2.xhtml flexbox-position-absolute-2-ref.xhtml +== flexbox-position-absolute-3.xhtml flexbox-position-absolute-3-ref.xhtml +== flexbox-position-absolute-4.xhtml flexbox-position-absolute-4-ref.xhtml +== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml +fuzzy-if(Android,16,400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1-ref.xhtml +fuzzy-if(Android,16,400) == flexbox-position-fixed-2.xhtml flexbox-position-fixed-2-ref.xhtml +== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml +== flexbox-position-fixed-4.xhtml flexbox-position-fixed-4-ref.xhtml + +# Tests for inline content in a flexbox that gets wrapped in an anonymous block +fails == flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333 +fails == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333 +== flexbox-inlinecontent-horiz-2.xhtml flexbox-inlinecontent-horiz-2-ref.xhtml +== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml +== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml +== flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml +== flexbox-inlinecontent-horiz-4.xhtml flexbox-inlinecontent-horiz-4-ref.xhtml +== flexbox-inlinecontent-horiz-5.xhtml flexbox-inlinecontent-horiz-5-ref.xhtml + +# Tests for intrinsic sizing of flexboxes +== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml +== flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml +== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml +== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml + +# Tests for invalidation after dynamic modifications +== flexbox-invalidation-1.html flexbox-invalidation-1-ref.html + +# Tests for flexbox in an iframe that gets resized. +fuzzy-if(skiaContent,1,5) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml + +# Tests for flexbox styling on things that don't support it +== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg + +# Tests with widgets as flex items +fuzzy-if(gtkWidget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html +fuzzy-if(gtkWidget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html +skip-if(gtkWidget) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965 +fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html + +# Tests for table flex items +== flexbox-table-flex-items-1-ref.html flexbox-table-flex-items-1-ref.html diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png Binary files differnew file mode 100644 index 000000000..a64b6a425 --- /dev/null +++ b/layout/reftests/flexbox/solidblue.png |
