diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/flexbox | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/flexbox')
362 files changed, 28568 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css new file mode 100644 index 0000000000..884a41198b --- /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 0000000000..26033bf78f --- /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 0000000000..853f2c6ed0 --- /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 0000000000..b138561977 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-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 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, .flexbox > label { display: inline-block; } + table { display: inline-table; } + + .lime { background: lime; } + .pink { background: pink; } + .aqua { background: aqua; } + </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> + </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 0000000000..94a9a1c9ed --- /dev/null +++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-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 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; } + </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> + </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 0000000000..867fa4cfc8 --- /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 0000000000..266134a030 --- /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 0000000000..14359e5949 --- /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 0000000000..951cf918d6 --- /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 0000000000..f02e22d957 --- /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 0000000000..2351369b39 --- /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 0000000000..e4126b17c4 --- /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 0000000000..a74f4a81cf --- /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 0000000000..789dd14be0 --- /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 0000000000..5d1f50af25 --- /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 0000000000..e87e93372a --- /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 0000000000..7edbf83786 --- /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-bsize-keywords-no-stretch-1-ref.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html new file mode 100644 index 0000000000..685e8a056c --- /dev/null +++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-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> + <title>CSS Reference Case</title> + <meta charset="utf-8"> + <style> + .container { + display: flex; + height: 100px; + border: 1px solid black; + } + .min-content-height { + background: pink; + align-self: start; + } + .max-content-height { + background: lightblue; + align-self: start; + } + .auto-height { + background: orange; + height: auto; + } + </style> +</head> +<body> + <div class="container"> + <div class="min-content-height">min</div> + <div class="max-content-height">max</div> + <div class="auto-height">auto</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html new file mode 100644 index 0000000000..d30efed851 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testing that the (default) 'align-items:stretch' only stretches flex items with height:auto (not height:[other-keyword])</title> + <meta charset="utf-8"> + <style> + .container { + display: flex; + height: 100px; + border: 1px solid black; + } + .min-content-height { + background: pink; + height: -moz-min-content; + height: min-content; + } + .max-content-height { + background: lightblue; + height: -moz-max-content; + height: max-content; + } + .auto-height { + background: orange; + height: auto; + } + </style> +</head> +<body> + <div class="container"> + <div class="min-content-height">min</div> + <div class="max-content-height">max</div> + <div class="auto-height">auto</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html new file mode 100644 index 0000000000..164c24806b --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <style> + #flex { + display: inline-flex; + border: 1px solid black; + } + #itemA { + background: purple; + width: 50%; + flex: none; + } + #itemB { + background: lightblue; + flex: none; + } + </style> +</head> +<body> + <div id="flex"> + <div id="itemA"></div> + <div id="itemB">BBBBB</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html new file mode 100644 index 0000000000..4a923397b9 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <meta charset="UTF-8"> + <!-- This testcase ensures that we correctly re-evaluate the percent width on + the purple flex item "itemA", in response to the width of its flex + container changing due to the other item gaining some more content. --> + <style> + #flex { + display: inline-flex; + border: 1px solid black; + } + #itemA { + background: purple; + width: 50%; + flex: none; + } + #itemB { + background: lightblue; + flex: none; + } + </style> + <script> + function tweak() { + document.getElementById("itemB").innerText = "BBBBB"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> +</head> +<body> + <div id="flex"> + <div id="itemA"></div> + <div id="itemB">BB</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html new file mode 100644 index 0000000000..4889b54944 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <style> + #flex { + display: inline-flex; + flex-direction: column; + border: 1px solid black; + max-width: 50px; + height: 150px; + } + #itemA { + background: purple; + height: 50%; + flex: none; + } + #itemB { + background: lightblue; + flex: none; + } + </style> +</head> +<body> + <div id="flex"> + <div id="itemA">A</div> + <div id="itemB">BB</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html new file mode 100644 index 0000000000..19288997d4 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <meta charset="UTF-8"> + <!-- This testcase ensures that we correctly re-evaluate the percent height + on the purple flex item "itemA", in response to the height of its flex + container being dynamically changed. --> + <style> + #flex { + display: inline-flex; + flex-direction: column; + border: 1px solid black; + max-width: 50px; + height: 60px; + } + #itemA { + background: purple; + height: 50%; + flex: none; + } + #itemB { + background: lightblue; + flex: none; + } + </style> + <script> + function tweak() { + document.getElementById("flex").style.height = "150px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> +</head> +<body> + <div id="flex"> + <div id="itemA">A</div> + <div id="itemB">BB</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 0000000000..3801464ee2 --- /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 0000000000..889ac83ce4 --- /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 0000000000..889b479c04 --- /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 0000000000..41a4a4c802 --- /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 0000000000..889ac83ce4 --- /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 0000000000..fdb0590959 --- /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 0000000000..b3e7dc27c8 --- /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 0000000000..889ac83ce4 --- /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 0000000000..c412469025 --- /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 0000000000..72cb0af38b --- /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 0000000000..889ac83ce4 --- /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 0000000000..80a7a1cd5f --- /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 0000000000..fb43b103d9 --- /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 0000000000..0feed67be4 --- /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);
+</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 0000000000..5e53f3b447 --- /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);
+</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 0000000000..681a3cb4cc --- /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 0000000000..600ab0fafa --- /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 0000000000..32390e6a27 --- /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 0000000000..13e0880c09 --- /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 0000000000..e271f4fb3e --- /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 0000000000..db3860fcef --- /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 0000000000..b083ccd5f9 --- /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 0000000000..b29b16f186 --- /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 0000000000..faf54917de --- /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 0000000000..785063fdf7 --- /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 0000000000..9c82796620 --- /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 0000000000..9f60c43160 --- /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 0000000000..536a9fa83e --- /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 0000000000..37f63136a7 --- /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 0000000000..7e3468b1f3 --- /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 0000000000..b907af8b57 --- /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 0000000000..45d357ab87 --- /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 0000000000..eca09eb851 --- /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 0000000000..0c0f9b5baa --- /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 0000000000..9bcd133529 --- /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 0000000000..78810b1ce6 --- /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: max-content"/> + <div class="flexbox" style="width: 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: max-content"/> + <div class="flexbox withPadding" style="width: 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 0000000000..b0b578b165 --- /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: max-content"/> + <div class="flexbox" style="width: 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: max-content"/> + <div class="flexbox withPadding" style="width: 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 0000000000..c64f236d43 --- /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: max-content"> </div> + <div class="flexbox" style="width: 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: max-content"> </div> + <div class="flexbox withPadding" style="width: 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 0000000000..8a302da771 --- /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 0000000000..5f58b18ecc --- /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 0000000000..1fd86bafd4 --- /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 0000000000..e5c336b465 --- /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 0000000000..d00b5304ee --- /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 0000000000..e906358131 --- /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 0000000000..4fdc493f12 --- /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 0000000000..c6270dd49b --- /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 0000000000..817e3fb2c4 --- /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 0000000000..29b9355ee6 --- /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 0000000000..b1008e7cc0 --- /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 0000000000..6146e50522 --- /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 0000000000..933b770707 --- /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 0000000000..d1469e79c9 --- /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 0000000000..bc0b341526 --- /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 0000000000..4c28d8d206 --- /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 0000000000..2b88ce2ae2 --- /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 0000000000..b5d509f18a --- /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 0000000000..d532372a41 --- /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 0000000000..cbb99ba9f0 --- /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 0000000000..c7a068d572 --- /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 0000000000..9e51122cad --- /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 0000000000..8338d1871e --- /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 0000000000..2e228fd11a --- /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: max-content; + } + div.minWidth { + width: 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 0000000000..dc1ae6f434 --- /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: max-content; + } + div.minWidth { + width: 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 0000000000..0d0b1dd34c --- /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: max-content; + } + div.minWidth { + width: 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 0000000000..b71ef35d90 --- /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: 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 0000000000..40d2f68759 --- /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: 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 0000000000..29b3a5dfb5 --- /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: 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 0000000000..a9481b0a78 --- /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 0000000000..70d8020bc1 --- /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); + </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-item-align-self-dynamic-pos-001-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html new file mode 100644 index 0000000000..60b0b9955a --- /dev/null +++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-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> + <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.flexbox { + display: flex; + position: relative; + height: 100px; +} + +#item { + background: grey; + position: relative; + align-self: center; + left: 20px; +} + +</style> +</head> +<body> + +<div class="flexbox"> + <div id="item">X</div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html new file mode 100644 index 0000000000..9c7b3b4087 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:center</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="flexbox-item-align-self-dynamic-pos-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.flexbox { + display: flex; + position: relative; + height: 100px; +} + +#item { + background: grey; + position: absolute; + align-self: center; + left: 10px; +} + +</style> +</head> +<body> + +<div class="flexbox"> + <div id="item">X</div> +</div> + +<script> + document.body.offsetLeft; + var items = Array.prototype.slice.call(document.querySelectorAll('#item')); + items.map(item => item.style.left = "20px"); + document.body.offsetLeft; +</script> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html new file mode 100644 index 0000000000..13b3b95021 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-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> + <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.flexbox { + display: flex; + position: relative; + height: 100px; +} + +#item { + background: grey; + position: relative; + align-self: end; + left: 20px; +} + +</style> +</head> +<body> + +<div class="flexbox"> + <div id="item">X</div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html new file mode 100644 index 0000000000..405ea1b236 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:end</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="flexbox-item-align-self-dynamic-pos-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.flexbox { + display: flex; + height: 100px; +} + +#item { + background: grey; + position: absolute; + align-self: end; + left: 10px; +} + +</style> +</head> +<body> + +<div class="flexbox"> + <div id="item">X</div> +</div> + +<script> + document.body.offsetLeft; + var items = Array.prototype.slice.call(document.querySelectorAll('#item')); + items.map(item => item.style.left = "20px"); + document.body.offsetLeft; +</script> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html new file mode 100644 index 0000000000..eb79ba48c5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference Case</title> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-direction: row; + } + .container > * { + writing-mode: vertical-lr; + border: 1px solid black; + } + .itemA { + background: purple; + } + .itemB { + background: teal; + } + .itemC { + background: blue; + } + .itemD { + background: yellow; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA">itemA</div> + <div class="itemB">itemB</div> + <div class="itemC">itemC</div> + <div class="itemD">itemD</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html new file mode 100644 index 0000000000..ff3cef0d68 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a horizonal flex container with keywords on min-width</title> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-direction: row; + } + .container > * { + writing-mode: vertical-lr; + border: 1px solid black; + flex-basis: 0; + } + .itemA { + background: purple; + min-width: -moz-max-content; + min-width: max-content; + } + .itemB { + background: teal; + min-width: -moz-min-content; + min-width: min-content; + } + .itemC { + background: blue; + min-width: -moz-fit-content; + min-width: fit-content; + } + .itemD { + background: yellow; + min-width: -moz-available; + min-width: -webkit-fill-available; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA">itemA</div> + <div class="itemB">itemB</div> + <div class="itemC">itemC</div> + <div class="itemD">itemD</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html new file mode 100644 index 0000000000..7593db06f7 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference Case</title> + <meta charset="utf-8"> + <style> + .container { + width: -moz-fit-content; + } + .container > * { + border: 1px solid black; + } + .itemA { + background: purple; + } + .itemB { + background: teal; + } + .itemC { + background: blue; + } + .itemD { + background: yellow; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA">itemA</div> + <div class="itemB">itemB</div> + <div class="itemC">itemC</div> + <div class="itemD">itemD</div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html new file mode 100644 index 0000000000..5ebeb0d404 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing a vertical flex container with keywords on min-height</title> + <meta charset="utf-8"> + <style> + .container { + display: flex; + width: -moz-fit-content; + width: fit-content; + flex-direction: column; + } + .container > * { + border: 1px solid black; + flex-basis: 0; + } + .itemA { + background: purple; + min-height: -moz-max-content; + min-height: max-content; + } + .itemB { + background: teal; + min-height: -moz-min-content; + min-height: min-content; + } + .itemC { + background: blue; + min-height: -moz-fit-content; + min-height: fit-content; + } + .itemD { + background: yellow; + min-height: -moz-available; + min-height: -webkit-fill-available; + } + </style> +</head> +<body> + <div class="container"> + <div class="itemA">itemA</div> + <div class="itemB">itemB</div> + <div class="itemC">itemC</div> + <div class="itemD">itemD</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 0000000000..02a2a90cdf --- /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 0000000000..aa89dd714c --- /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 0000000000..00ebecc30f --- /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 0000000000..613c57cde5 --- /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 0000000000..9bafa1506a --- /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 0000000000..21b8730c4b --- /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 0000000000..4c675fa8ee --- /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 0000000000..67974fcf67 --- /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 0000000000..bcd3982e45 --- /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 0000000000..6401fb2cb1 --- /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 0000000000..9476c8086f --- /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 0000000000..00a3c18a4f --- /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 0000000000..d0a086d60d --- /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 0000000000..a67481879d --- /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 0000000000..8778326655 --- /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 0000000000..05c75baeeb --- /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 0000000000..66df03b9de --- /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 0000000000..59ba62e64c --- /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 0000000000..2875e8ee3b --- /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-resizeviewport-2-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html new file mode 100644 index 0000000000..998bcbd527 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Helper-file for reftest flexbox-resizeviewport-2.xhtml + I'm intentionally using quirks-mode (no doctype), so that + a 100% width (block-size) will work. --> +<html> + <head> + <style> + html { writing-mode: vertical-rl; } + div.flexbox { + display: flex; + width: 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-2-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml new file mode 100644 index 0000000000..9c76a32b8d --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-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-2-helper.html" style="width: 50px"/> + <iframe src="flexbox-resizeviewport-2-helper.html" style="width: 125px"/> + <br/> + <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 50px"/> + <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 125px"/> + </body> +</html> diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml new file mode 100644 index 0000000000..5a479364bb --- /dev/null +++ b/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to be sure a flex container gets reflowed properly when its + iframe changes size. --> +<!-- XXXdholbert This testcase can't actually test the scenario it's intended + to test right now (quirks-mode percent-BSize resolution in a vertical + writing mode), due to Bug 1441348. + --> +<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-2-helper.html"/> + <iframe id="b" src="flexbox-resizeviewport-2-helper.html"/> + <br/> + <iframe id="c" src="flexbox-resizeviewport-2-helper.html"/> + <iframe id="d" src="flexbox-resizeviewport-2-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 0000000000..f2eef91e4e --- /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 0000000000..c12e9dde55 --- /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 0000000000..0a44422f4b --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <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; 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></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> + +</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 0000000000..a58a8a99b6 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html @@ -0,0 +1,60 @@ +<!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-ref.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> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html new file mode 100644 index 0000000000..98a93716a5 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <style> + .container { + display: flex; + width: 100px; + border: 1px solid black; + } + + /* Two types of flex items: */ + .table { + border: 2px solid teal; + } + .block { + border: 2px solid brown; + } + + /* Each flex item gets one of these as its contents, + to have a nonzero content size: */ + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + </style> +</head> +<body> +<!-- auto size: --> +<div class="container"> + <div class="table"><ib></ib></div> + <div class="block"><ib></ib></div> +</div> + +<!-- px size: --> +<div class="container"> + <div class="table" style="width: 30px"><ib></ib></div> + <div class="block" style="width: 30px"><ib></ib></div> +</div> + +<!-- % size: --> +<div class="container"> + <div class="table" style="width: 30%"><ib></ib></div> + <div class="block" style="width: 30%"><ib></ib></div> +</div> + +<!-- calc() size: --> +<div class="container"> + <div class="table" style="width: calc(10px + 20%)"><ib></ib></div> + <div class="block" style="width: calc(10px + 20%)"><ib></ib></div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2.html b/layout/reftests/flexbox/flexbox-table-flex-items-2.html new file mode 100644 index 0000000000..c11ce70802 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-2.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Testing that implicit "flex-basis: content" on table wrapper box + doesn't prevent explicit table size from influencing flex base size. + </title> + <!-- XXXdholbert NOTE: This probably eventually should move to our + upstreamed reftest directory. But for now, this is just asserting + backwards-compatible/interoperable (but not necessary spec-compliant) + behavior, per https://github.com/w3c/csswg-drafts/issues/2604 --> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-table-flex-items-2.html"> + <style> + .container { + display: flex; + width: 100px; + border: 1px solid black; + } + + /* Two types of flex items: */ + .table { + display: table; + border: 2px solid teal; + } + .block { + border: 2px solid brown; + } + + /* Each flex item gets one of these as its contents, + to have a nonzero content size: */ + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + </style> +</head> +<body> +<!-- auto size: --> +<div class="container"> + <div class="table"><ib></ib></div> + <div class="block"><ib></ib></div> +</div> + +<!-- px size: --> +<div class="container"> + <div class="table" style="width: 30px"><ib></ib></div> + <div class="block" style="width: 30px"><ib></ib></div> +</div> + +<!-- % size: --> +<div class="container"> + <div class="table" style="width: 30%"><ib></ib></div> + <div class="block" style="width: 30%"><ib></ib></div> +</div> + +<!-- calc() size: --> +<div class="container"> + <div class="table" style="width: calc(10px + 20%)"><ib></ib></div> + <div class="block" style="width: calc(10px + 20%)"><ib></ib></div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html new file mode 100644 index 0000000000..568495f341 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <style> + .container { + display: flex; + flex-direction: column; + height: 100px; + float: left; + border: 1px solid black; + } + + /* Two types of flex items: */ + .table { + border: 2px solid teal; + } + .block { + border: 2px solid brown; + } + + /* Each flex item gets one of these as its contents, + to have a nonzero content size: */ + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + </style> +</head> +<body> +<!-- auto size: --> +<div class="container"> + <div class="table"><ib></ib></div> + <div class="block"><ib></ib></div> +</div> + +<!-- px size: --> +<div class="container"> + <div class="table" style="height: 30px"><ib></ib></div> + <div class="block" style="height: 30px"><ib></ib></div> +</div> + +<!-- % size: --> +<div class="container"> + <div class="table" style="height: 30%"><ib></ib></div> + <div class="block" style="height: 30%"><ib></ib></div> +</div> + +<!-- calc() size: --> +<div class="container"> + <div class="table" style="height: calc(10px + 20%)"><ib></ib></div> + <div class="block" style="height: calc(10px + 20%)"><ib></ib></div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3.html b/layout/reftests/flexbox/flexbox-table-flex-items-3.html new file mode 100644 index 0000000000..c68152856f --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-3.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Testing that implicit "flex-basis: content" on table wrapper box + doesn't prevent explicit table size from influencing flex base size. + </title> + <!-- XXXdholbert NOTE: This probably eventually should move to our + upstreamed reftest directory. But for now, this is just asserting + backwards-compatible/interoperable (but not necessary spec-compliant) + behavior, per https://github.com/w3c/csswg-drafts/issues/2604 --> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-table-flex-items-3.html"> + <style> + .container { + display: flex; + flex-direction: column; + height: 100px; + float: left; + border: 1px solid black; + } + + /* Two types of flex items: */ + .table { + display: table; + border: 2px solid teal; + } + .block { + border: 2px solid brown; + } + + /* Each flex item gets one of these as its contents, + to have a nonzero content size: */ + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + </style> +</head> +<body> +<!-- auto size: --> +<div class="container"> + <div class="table"><ib></ib></div> + <div class="block"><ib></ib></div> +</div> + +<!-- px size: --> +<div class="container"> + <div class="table" style="height: 30px"><ib></ib></div> + <div class="block" style="height: 30px"><ib></ib></div> +</div> + +<!-- % size: --> +<div class="container"> + <div class="table" style="height: 30%"><ib></ib></div> + <div class="block" style="height: 30%"><ib></ib></div> +</div> + +<!-- calc() size: --> +<div class="container"> + <div class="table" style="height: calc(10px + 20%)"><ib></ib></div> + <div class="block" style="height: calc(10px + 20%)"><ib></ib></div> +</div> + +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html new file mode 100644 index 0000000000..ac18887826 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Reference Case + </title> + <style> + .container { + display: flex; + flex-wrap: wrap; + width: 300px; + border: 1px solid black; + font: 12px monospace; + margin-bottom: 5px; + } + .container > * { + flex: 1 400px; /* Bigger than flex container; + should linewrap and cooperatively shrink to fit. */ + padding: 5px 10px; + } + table { + width: 100%; + background: lightgray; + } + </style> +</head> +<body> + <div class="container"> + <div> + <table><td>a</td></table> + </div> + <div> + <table><td>b</td></table> + </div> + </div> + <div class="container"> + <div> + <table><td>a</td></table> + </div> + <div> + <table><td>b</td></table> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4.html b/layout/reftests/flexbox/flexbox-table-flex-items-4.html new file mode 100644 index 0000000000..9e6e5f3dc0 --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Testing that tables with "table-layout:fixed" can shrink + from their default flex base size to fit their multi-line flex container. + </title> + <style> + .container { + display: flex; + flex-wrap: wrap; + width: 300px; + border: 1px solid black; + font: 12px monospace; + margin-bottom: 5px; + } + .forceMaxContent > * { + width: max-content; + } + .container > * { + display: flex; + padding: 5px 10px; + } + table { + width: 100%; + table-layout: fixed; + background: lightgray; + } + </style> +</head> +<body> + <div class="container"> + <div> + <table><td>a</td></table> + </div> + <div> + <table><td>b</td></table> + </div> + </div> + <div class="container forceMaxContent"> + <div> + <table><td>a</td></table> + </div> + <div> + <table><td>b</td></table> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html new file mode 100644 index 0000000000..664d7a33dd --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html @@ -0,0 +1,45 @@ +<!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 Reference Case + </title> + <style> + .container { + display: flex; + width: 300px; + border: 1px solid black; + margin-bottom: 5px; + } + .container > * { + margin: 5px; + background: lightgray; + flex: 1 400px; /* Bigger than flex container; should cooperatively shrink to fit. */ + height: 30px; + } + </style> +</head> +<body> + <div class="container"> + <div> + <table><td></td></table> + </div> + <div> + <table><td></td></table> + </div> + </div> + <div class="container"> + <div> + <table><td></td></table> + </div> + <div> + <table><td></td></table> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5.html b/layout/reftests/flexbox/flexbox-table-flex-items-5.html new file mode 100644 index 0000000000..2023e1c58b --- /dev/null +++ b/layout/reftests/flexbox/flexbox-table-flex-items-5.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Testing that tables with "table-layout:fixed" can shrink + from their default flex base size to fit their flex container. + </title> + <style> + .container { + display: flex; + width: 300px; + border: 1px solid black; + margin-bottom: 5px; + } + .forceMaxContent > * { + width: max-content; + } + .container > * { + margin: 5px; + } + table { + width: 100%; + height: 30px; + table-layout: fixed; + background: lightgray; + } + </style> +</head> +<body> + <div class="container"> + <div> + <table><td></td></table> + </div> + <div> + <table><td></td></table> + </div> + </div> + <div class="container forceMaxContent"> + <div> + <table><td></td></table> + </div> + <div> + <table><td></td></table> + </div> + </div> +</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 0000000000..f08e16d265 --- /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 0000000000..317112e9fb --- /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 0000000000..ac52a17d84 --- /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: 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 0000000000..7e2ec2908c --- /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 0000000000..61eb376384 --- /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 0000000000..dee3b4ad0c --- /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 0000000000..b34c4f51d5 --- /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 0000000000..bb7c5e9584 --- /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 0000000000..21d3342d90 --- /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; + column-width: 20px; + 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 0000000000..bbb7b8ce02 --- /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; + column-width: 20px; + 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 0000000000..67cd110973 --- /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; + column-width: 20px; + 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 0000000000..ba560e9bd9 --- /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; + column-width: 20px; + 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 0000000000..6a56362525 --- /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; + column-width: 20px; + 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 0000000000..49f859e4b5 --- /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; + column-width: 20px; + 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 0000000000..7626af8d6a --- /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; + column-width: 20px; + 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 0000000000..7d9f44158f --- /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; + column-width: 20px; + 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 0000000000..37b6405a55 --- /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; + column-width: 20px; + 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 0000000000..f6911915c8 --- /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; + column-width: 20px; + 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 0000000000..b9f98edefa --- /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; + column-width: 20px; + 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 0000000000..e8c85f2a41 --- /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; + column-width: 20px; + 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 0000000000..57c63cc68b --- /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; + column-width: 20px; + 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 0000000000..bff0016745 --- /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; + column-width: 20px; + 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-multi-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html new file mode 100644 index 0000000000..2ee6901e7d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html new file mode 100644 index 0000000000..349b7f92e7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html new file mode 100644 index 0000000000..660a8e1398 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html new file mode 100644 index 0000000000..ceaf678e41 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html new file mode 100644 index 0000000000..44ddf8a61b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html new file mode 100644 index 0000000000..24f8e14b9b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html new file mode 100644 index 0000000000..54c99d4078 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html new file mode 100644 index 0000000000..9ab52a8a39 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html new file mode 100644 index 0000000000..83f99ea000 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html new file mode 100644 index 0000000000..aade35b4d6 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html new file mode 100644 index 0000000000..6ccc50a553 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html new file mode 100644 index 0000000000..8881dd7174 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 60px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 30px; + } + article { + background: yellow; + block-size: 25px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 35px; + } + footer { + background: black; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 70px; + } + .border-padding > header, .border-padding > nav, .border-padding > footer { + inset-block-start: 5px; + } + .border-padding > article { + inset-block-start: 30px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html new file mode 100644 index 0000000000..070cea0de4 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made so that the flex items are wrapping into + three lines, and each line is 30px wide. */ + block-size: 60px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html new file mode 100644 index 0000000000..ee12682ef1 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-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> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html new file mode 100644 index 0000000000..8ac70d9774 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html new file mode 100644 index 0000000000..042f09f424 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html new file mode 100644 index 0000000000..0129a7515c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html new file mode 100644 index 0000000000..12730915c9 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html new file mode 100644 index 0000000000..960a342b00 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html new file mode 100644 index 0000000000..93770c5c92 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html new file mode 100644 index 0000000000..e8ccb5f4bd --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html new file mode 100644 index 0000000000..9408f49e3f --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html new file mode 100644 index 0000000000..7b75ceeca9 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html new file mode 100644 index 0000000000..ba7cd24347 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html new file mode 100644 index 0000000000..277da6e417 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 60px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 30px; + } + article { + background: yellow; + block-size: 25px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 35px; + } + footer { + background: black; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 70px; + } + .border-padding > header, .border-padding > nav, .border-padding > footer { + inset-block-start: 5px; + } + .border-padding > article { + inset-block-start: 30px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html new file mode 100644 index 0000000000..daca4b2e6d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-lr-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made so that the flex items are wrapping into + three lines, and each line is 30px wide. */ + block-size: 60px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html new file mode 100644 index 0000000000..d5c0093980 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-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> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html new file mode 100644 index 0000000000..828dab446c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html new file mode 100644 index 0000000000..f4bee1f443 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html new file mode 100644 index 0000000000..a4420b4edf --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html new file mode 100644 index 0000000000..675788a24f --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html new file mode 100644 index 0000000000..e8a63a8892 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html new file mode 100644 index 0000000000..87c9ada1b0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html new file mode 100644 index 0000000000..31bee7d96b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html new file mode 100644 index 0000000000..5af8aa0903 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html new file mode 100644 index 0000000000..05fa7143d6 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html new file mode 100644 index 0000000000..862e96e121 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html new file mode 100644 index 0000000000..543e00eee5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 60px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 30px; + } + article { + background: yellow; + block-size: 25px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 35px; + } + footer { + background: black; + block-size: 50px; + position: absolute; + inset-block-start: 0; + inset-inline-start: 70px; + } + .border-padding > header, .border-padding > nav, .border-padding > footer { + inset-block-start: 5px; + } + .border-padding > article { + inset-block-start: 30px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html new file mode 100644 index 0000000000..cdca9383af --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-column-vertical-rl-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 90px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made so that the flex items are wrapping into + three lines, and each line is 30px wide. */ + block-size: 60px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 20px; + } + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html new file mode 100644 index 0000000000..852c1947fe --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 50px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 5px; + } + footer { + background: black; + block-size: 50px; + float: right; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html new file mode 100644 index 0000000000..893a31d8e4 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html new file mode 100644 index 0000000000..c3d953451c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html new file mode 100644 index 0000000000..76ccbaebfe --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html new file mode 100644 index 0000000000..4a4d022ed8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html new file mode 100644 index 0000000000..a0c30f3744 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html new file mode 100644 index 0000000000..82ab768672 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html new file mode 100644 index 0000000000..e6ab0cca4d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 70px; + } + .with-gap .line { + block-size: 60px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 15px; + } + footer { + background: black; + block-size: 50px; + float: right; + margin-block-start: 20px; + } + .with-gap article, .with-gap footer { + margin-block-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html new file mode 100644 index 0000000000..587171bb34 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html new file mode 100644 index 0000000000..602fdd9704 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + align-self: flex-end; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html new file mode 100644 index 0000000000..f982fa8ede --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 50px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 5px; + } + footer { + background: black; + block-size: 50px; + float: right; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html new file mode 100644 index 0000000000..c4d1202645 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html new file mode 100644 index 0000000000..bae2ec839a --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html new file mode 100644 index 0000000000..6e2135b123 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html new file mode 100644 index 0000000000..daed00e37a --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html new file mode 100644 index 0000000000..7dce6e8e39 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html new file mode 100644 index 0000000000..919e9929e9 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html new file mode 100644 index 0000000000..0a9cbe6693 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 70px; + } + .with-gap .line { + block-size: 60px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 15px; + } + footer { + background: black; + block-size: 50px; + float: right; + margin-block-start: 20px; + } + .with-gap article, .with-gap footer { + margin-block-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html new file mode 100644 index 0000000000..0f179a7d97 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html new file mode 100644 index 0000000000..70e7fed050 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + align-self: flex-end; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html new file mode 100644 index 0000000000..ee7733abce --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 50px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 5px; + } + footer { + background: black; + block-size: 50px; + float: right; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html new file mode 100644 index 0000000000..e4f176116f --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html new file mode 100644 index 0000000000..2ef258b2ac --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html new file mode 100644 index 0000000000..86a3464e2e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html new file mode 100644 index 0000000000..114b236dc5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html new file mode 100644 index 0000000000..6f68852a65 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html new file mode 100644 index 0000000000..badaa3ce5d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html new file mode 100644 index 0000000000..85b754b4e9 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .line { + inline-size: 60px; + block-size: 70px; + } + .with-gap .line { + block-size: 60px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + float: left; + } + nav { + background: magenta; + block-size: 25px; + float: right; + } + article { + background: yellow; + block-size: 40px; + float: left; + margin-block-start: 15px; + } + footer { + background: black; + block-size: 50px; + float: right; + margin-block-start: 20px; + } + .with-gap article, .with-gap footer { + margin-block-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <div class="line"><header></header><nav></nav></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <div class="line"><header></header><nav></nav></div> + <div style="block-size: 20px"><!-- row-gap --></div> + <div class="line"><article></article><footer></footer></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html new file mode 100644 index 0000000000..8de49ab568 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 40px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html new file mode 100644 index 0000000000..b361f265a2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 70px; + inline-size: 200px; + column-width: 60px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 140px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .with-gap { + row-gap: 20px; + column-gap: 10px; + } + + header, nav, article, footer { + inline-size: 30px; + } + .with-gap header, .with-gap nav, .with-gap article, .with-gap footer { + inline-size: 25px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + align-self: flex-end; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-end; + } + nav { + background: yellow; + block-size: 40px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-start; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and gap. --> + <div class="multicol"> + <div class="flexContainer border-padding with-gap"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html new file mode 100644 index 0000000000..17c0956b48 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html new file mode 100644 index 0000000000..e753bcc8db --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html new file mode 100644 index 0000000000..cb9d69a8a8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html new file mode 100644 index 0000000000..490fa8c2ee --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html new file mode 100644 index 0000000000..93ab363268 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html new file mode 100644 index 0000000000..96176b4c72 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html new file mode 100644 index 0000000000..f7082184fb --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html new file mode 100644 index 0000000000..5b540a8db7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html new file mode 100644 index 0000000000..c4999c5ecf --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html new file mode 100644 index 0000000000..fd669b2d4f --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html new file mode 100644 index 0000000000..ffc297cfb4 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html new file mode 100644 index 0000000000..19628eb7fa --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html new file mode 100644 index 0000000000..c637be9bc8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than all its flex items. */ + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-shrink: 0; + } + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html new file mode 100644 index 0000000000..656b43db99 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + box-decoration-break: clone; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html new file mode 100644 index 0000000000..46ee650173 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html new file mode 100644 index 0000000000..a8ec6511a3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html new file mode 100644 index 0000000000..f390e7d7ba --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: block; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html new file mode 100644 index 0000000000..54d45a73ef --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context."> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html new file mode 100644 index 0000000000..b38576798a --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html new file mode 100644 index 0000000000..ea2bc11222 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-5-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html new file mode 100644 index 0000000000..e929a9a0d8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: block; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html new file mode 100644 index 0000000000..366a7670a7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-6-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container."> + + <style> + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html new file mode 100644 index 0000000000..a2884afe0b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-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> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html new file mode 100644 index 0000000000..8e2b234518 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html new file mode 100644 index 0000000000..32d55664ed --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html new file mode 100644 index 0000000000..4b14b7a58c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html new file mode 100644 index 0000000000..82cfc64f47 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html new file mode 100644 index 0000000000..fbb208b2ac --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html new file mode 100644 index 0000000000..04dff8815b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html new file mode 100644 index 0000000000..fa60c2da31 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html new file mode 100644 index 0000000000..f07619eea8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html new file mode 100644 index 0000000000..510016392a --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html new file mode 100644 index 0000000000..dff871d161 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html new file mode 100644 index 0000000000..a65e6d42e2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html new file mode 100644 index 0000000000..3bfa127e2f --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than all its flex items. */ + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-shrink: 0; + } + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html new file mode 100644 index 0000000000..fe6ca715c6 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + box-decoration-break: clone; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html new file mode 100644 index 0000000000..04c459a045 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html new file mode 100644 index 0000000000..0e9a2a40ec --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html new file mode 100644 index 0000000000..c6e933cb50 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: block; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html new file mode 100644 index 0000000000..6b9e964736 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context."> + + <style> + html { + writing-mode: vertical-lr; + } + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html new file mode 100644 index 0000000000..93407a8a58 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html new file mode 100644 index 0000000000..abece966b0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-5-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html new file mode 100644 index 0000000000..7ac7d3b6b0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: block; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html new file mode 100644 index 0000000000..4467324393 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-lr-6-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html new file mode 100644 index 0000000000..32b3f252a7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-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> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html new file mode 100644 index 0000000000..e2f0d449d5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html new file mode 100644 index 0000000000..23f2f64e55 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html new file mode 100644 index 0000000000..02f81d5ff8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + flex-grow: 2; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + flex-grow: 1; + align-self: flex-start; + } + article { + background: yellow; + flex-grow: 1; + align-self: center; + } + footer { + background: black; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html new file mode 100644 index 0000000000..19f5ba3355 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 150px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + flex-grow: 2; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + flex-grow: 1; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + flex-grow: 1; + align-self: center; + } + header { + background: black; + block-size: 50px; + flex-grow: 2; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html new file mode 100644 index 0000000000..dc2f8b1f81 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + } + header > div { + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 25px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html new file mode 100644 index 0000000000..4801203c5e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + } + footer > div { + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 25px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 50px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html new file mode 100644 index 0000000000..94d5f4442b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html new file mode 100644 index 0000000000..56b7b0a434 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html new file mode 100644 index 0000000000..3b2e82693b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html new file mode 100644 index 0000000000..d551e539d8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html new file mode 100644 index 0000000000..4131706f62 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html new file mode 100644 index 0000000000..1306a1f7fc --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than all its flex items. */ + block-size: 85px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-shrink: 0; + } + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and row-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html new file mode 100644 index 0000000000..610f8b2359 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + box-decoration-break: clone; + } + .gap { + block-size: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + } + article { + background: yellow; + block-size: 25px; + position: relative; + inset-inline-start: 5px; + } + footer { + background: black; + block-size: 50px; + position: relative; + inset-inline-start: 10px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html new file mode 100644 index 0000000000..5055c7d3c9 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header { + background: cyan; + block-size: 50px; + } + nav, article, footer { + inline-size: 30px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 25px; + align-self: center; + } + footer { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html new file mode 100644 index 0000000000..ff768b0d0e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer { + background: cyan; + block-size: 50px; + } + article, nav, header { + inline-size: 30px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 25px; + align-self: center; + } + header { + background: black; + block-size: 50px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with row-gap. --> + <div class="multicol"> + <div class="flexContainer" style="row-gap: 5px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html new file mode 100644 index 0000000000..7f2b80d28d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: block; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html new file mode 100644 index 0000000000..9fbdb6e0cd --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-paged"> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context."> + + <style> + html { + writing-mode: vertical-rl; + } + @page { size:5in 3in; margin:0.5in; } + + html, body { + font-size: 12pt; margin: 0; + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + border: 0.25in solid lightgray; + } + article { + background: yellow; + block-size: 2in; + } + </style> + + <body> + <div style="block-size: 0.25in; background: lightblue"></div> + <div class="flexContainer"> + <div class="flexContainer"> + <div class="flexContainer"> + <!-- <article> is expected to have 1 inch in the first page and 1 inch + in the second page. --> + <article></article> + </div> + </div> + </div> + <div style="block-size: 0.25in; background: lightblue"></div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html new file mode 100644 index 0000000000..ab12ac5cf8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html new file mode 100644 index 0000000000..5ec4c440de --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-5-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html new file mode 100644 index 0000000000..163d3393b2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: block; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html new file mode 100644 index 0000000000..8a3706050b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-column-vertical-rl-6-ref.html"> + <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 190px; + column-width: 40px; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than its flex items. */ + block-size: 40px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + article { + inline-size: 30px; + /* Block-size is deliberately made shorter than its <div> child. */ + block-size: 70px; + background: cyan; + } + article > div { + inline-size: 20px; + block-size: 140px; + background: magenta; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <article><div></div></article> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <article><div></div></article> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html new file mode 100644 index 0000000000..6ec3a56de4 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 100px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html new file mode 100644 index 0000000000..7b46bb1a87 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html new file mode 100644 index 0000000000..54e77b913b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html new file mode 100644 index 0000000000..d1f1c5f2f7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + } + header > div { + block-size: 100px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 50px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html new file mode 100644 index 0000000000..6da222694c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + } + footer > div { + block-size: 100px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 50px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html new file mode 100644 index 0000000000..4e31713f60 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html new file mode 100644 index 0000000000..817139d2e8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html new file mode 100644 index 0000000000..428efa2948 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html new file mode 100644 index 0000000000..f19aa98d79 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html new file mode 100644 index 0000000000..a18b1de965 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 80px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 15px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 5px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html new file mode 100644 index 0000000000..b114f96af2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>."> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than <header>. */ + block-size: 80px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html new file mode 100644 index 0000000000..608b8670e3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid white; + block-size: 100px; + position: relative; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px"></header> + <nav style="inline-size: 22px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html new file mode 100644 index 0000000000..0fced5023a --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html new file mode 100644 index 0000000000..85bb663fa6 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html new file mode 100644 index 0000000000..ebc6d6aab8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abcdef</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abcdef</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html new file mode 100644 index 0000000000..9377d31bd2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html new file mode 100644 index 0000000000..1245878626 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 100px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html new file mode 100644 index 0000000000..d217e40a79 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html new file mode 100644 index 0000000000..36606eb9c2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html new file mode 100644 index 0000000000..2d15eec1a3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + } + header > div { + block-size: 100px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 50px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html new file mode 100644 index 0000000000..342adad6f5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + } + footer > div { + block-size: 100px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 50px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html new file mode 100644 index 0000000000..3d0264a80c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html new file mode 100644 index 0000000000..643264e68e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html new file mode 100644 index 0000000000..a29456fbe0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html new file mode 100644 index 0000000000..7773a72a77 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html new file mode 100644 index 0000000000..e7f573a0c8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 80px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 15px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 5px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html new file mode 100644 index 0000000000..3630cc9115 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than <header>. */ + block-size: 80px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html new file mode 100644 index 0000000000..93e9e832a8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid white; + block-size: 100px; + position: relative; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px"></header> + <nav style="inline-size: 22px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html new file mode 100644 index 0000000000..5fc9c58f7e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html new file mode 100644 index 0000000000..e4f7adca3e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html new file mode 100644 index 0000000000..8da3eb8c4e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abcdef</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abcdef</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html new file mode 100644 index 0000000000..bddacb191c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-lr-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + html { + writing-mode: vertical-lr; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html new file mode 100644 index 0000000000..7a0e90dcde --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 100px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html new file mode 100644 index 0000000000..925f83b062 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html new file mode 100644 index 0000000000..e8ef47b929 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html new file mode 100644 index 0000000000..d8b92674d8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + } + header > div { + block-size: 100px; + } + nav { + background: magenta; + align-self: flex-start; + } + nav > div { + block-size: 25px; + } + article { + background: yellow; + align-self: center; + } + article > div { + block-size: 50px; + } + footer { + background: black; + align-self: flex-end; + } + footer > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html new file mode 100644 index 0000000000..b73bf25ea8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + } + footer > div { + block-size: 100px; + } + article { + background: magenta; + align-self: flex-start; + } + article > div { + block-size: 25px; + } + nav { + background: yellow; + align-self: center; + } + nav > div { + block-size: 50px; + } + header { + background: black; + align-self: flex-end; + } + header > div { + block-size: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header><div></div></header><nav><div></div></nav> + <article><div></div></article><footer><div></div></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html new file mode 100644 index 0000000000..31417fe384 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html new file mode 100644 index 0000000000..4102f94e09 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 30px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Enlarge the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html new file mode 100644 index 0000000000..149a2b0c14 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html new file mode 100644 index 0000000000..dd254dc1a8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + footer, article, nav, header { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + + body.multicol-children-block-size > .multicol { + block-size: 50px; + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Shrink the multicol's block-size to exercise pulling and pushing flex items + of an already fragmented flex container. */ + document.body.classList.add("multicol-children-block-size"); + } + </script> + + <body onload="runTest()"> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html new file mode 100644 index 0000000000..62934a94d0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + block-size: 80px; + position: relative; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 15px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 5px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <!-- Adjust top to simulate padding. --> + <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav> + <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px; inset-block-start: 5px"></header> + <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html new file mode 100644 index 0000000000..51a996eafd --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-2-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid lightgray; + /* Block-size is deliberately made shorter than <header>. */ + block-size: 80px; + } + .border-padding { + border-block-width: 10px; + padding-block: 5px; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Basic one without any margin/border/padding. --> + <div class="multicol"> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border and padding. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html new file mode 100644 index 0000000000..f71268870d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 50px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + padding-block: 15px; + } + .flexContainer { + background: gray; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 solid white; + block-size: 100px; + position: relative; + } + .gap { + inline-size: 4px; + block-size: 100%; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + inline-size: 25px; + } + header { + background: cyan; + block-size: 100px; + position: absolute; + inset-block-start: 0px; + } + nav { + background: magenta; + block-size: 25px; + position: absolute; + inset-block-start: 0px; + inset-inline-start: 25px; + } + article { + background: yellow; + block-size: 50px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 50px; + } + footer { + background: black; + block-size: 75px; + position: absolute; + inset-block-start: 25px; + inset-inline-start: 75px; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with border, padding, and column-gap. --> + <div class="multicol"> + <div class="flexContainer border-padding"> + <header style="inline-size: 22px"></header> + <nav style="inline-size: 22px; inset-inline-start: 26px"></nav> + <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article> + <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html new file mode 100644 index 0000000000..6d4fb10d60 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + header { + background: cyan; + block-size: 100px; + } + nav { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + article { + background: yellow; + block-size: 50px; + align-self: center; + } + footer { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html new file mode 100644 index 0000000000..cdd15cddeb --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html"> + <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + block-size: 80px; + inline-size: 320px; + column-count: 3; + column-fill: auto; + column-gap: 10px; + border: 5px solid orange; + margin-block-end: 5px; /* Just to separate each sub-testcase visually. */ + } + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + background: gray; + border: 0 solid white; + border-block-width: 15px; + box-decoration-break: clone; + } + + /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */ + header, nav, article, footer { + flex-grow: 1; + } + footer { + background: cyan; + block-size: 100px; + } + article { + background: magenta; + block-size: 25px; + align-self: flex-start; + } + nav { + background: yellow; + block-size: 50px; + align-self: center; + } + header { + background: black; + block-size: 75px; + align-self: flex-end; + } + </style> + + <body> + <!-- Test a container with margin-block-start. --> + <div class="multicol"> + <div class="flexContainer" style="margin-block-start: 25px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container not at the top of the column/page. --> + <div class="multicol"> + <div style="block-size: 25px"></div> + <div class="flexContainer"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + + <!-- Test a container with column-gap. --> + <div class="multicol"> + <div class="flexContainer" style="column-gap: 4px"> + <header></header><nav></nav><article></article><footer></footer> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html new file mode 100644 index 0000000000..1e9e887f95 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: block; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abcdef</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abcdef</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html new file mode 100644 index 0000000000..c8e4293e3e --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> + <link rel="match" href="flexbox-single-row-vertical-rl-4-ref.html"> + <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol."> + + <style> + html { + writing-mode: vertical-rl; + } + .multicol { + column-count: 2; + block-size: 0; + border: 1px solid black; + margin-block-end: 30px; /* Just to separate each sub-testcase visually. */ + } + + .flexContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + padding: 1px; + } + + .boxDecorationBreak { + padding: 5px; + box-decoration-break: clone; + } + + </style> + + <body> + <!-- Basic one with padding on the flex container.--> + <div class="multicol"> + <div class="flexContainer"> + <div>abc</div><div>def</div> + </div> + </div> + + <!-- Larger padding and box-decoration-break:clone on the flex container.--> + <div class="multicol"> + <div class="flexContainer boxDecorationBreak"> + <div>abc</div><div>def</div> + </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 0000000000..b9892af217 --- /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; + column-width: 30px; + 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 0000000000..e12e39ace1 --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .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 0000000000..2dde592514 --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + border: 1px dashed black; + } + .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 0000000000..5e5aa0ba7d --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .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 0000000000..2ea73ddfb7 --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + border: 1px dashed black; + } + .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 0000000000..47a01df2cb --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .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 0000000000..9aeda66e04 --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + border: 1px dashed black; + } + .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 0000000000..c9c7f484ba --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .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 0000000000..adb1447519 --- /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; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .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 0000000000..458ddd8cd1 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.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: 38px; + width: 100px; + column-width: 60px; + column-fill: auto; + border: 2px solid purple; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + background: yellow; + } + .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: calc(19px*3)"> + <div style="width: 50px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + </div> + + <!-- auto-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <div class="multicol"> + <div class="flexContainer" style="height: calc(19px*5)"> + <div style="width: 50px"> + <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> + </div> + + <!-- fixed-height container--> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div style="width: 50px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + </div> + + <!-- fixed-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div style="width: 100px"> + <div class="item">1</div> + <div class="item">4</div> + <div class="item">2</div> + <div class="item">5</div> + <div class="item">3</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 0000000000..5989681ae4 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html @@ -0,0 +1,77 @@ +<!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: 38px; + width: 100px; + column-width: 60px; + 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; + } + .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) --> + <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) --> + <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/flexbox-unbreakable-child-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html new file mode 100644 index 0000000000..e21ddc8d23 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + position: relative; + } + .flexContainer { + width: 40px; + background: teal; + border: 1px dashed black; + } + .continuation { + position: absolute; + right: 0; + top: 0; + } + .item { + display: block; + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + <div class="flexContainer continuation" style="height: 0px"></div> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + <div class="flexContainer continuation" style="height: 0px"></div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + <div class="flexContainer continuation" style="height: 4px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html new file mode 100644 index 0000000000..074a676db5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-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: row", + "flex-wrap: wrap", and "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html new file mode 100644 index 0000000000..2196040388 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row" and + "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html new file mode 100644 index 0000000000..3dbec66a67 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-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: row-reverse", + "flex-wrap: wrap" and "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html new file mode 100644 index 0000000000..b3f3211633 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row-reverse" and + "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html new file mode 100644 index 0000000000..0a36b822f2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-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", + "flex-wrap: wrap", and "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html new file mode 100644 index 0000000000..80a35406dd --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column" and + "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html new file mode 100644 index 0000000000..c76e8d12a8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse", + "flex-wrap: wrap" and "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html new file mode 100644 index 0000000000..f78ad833bf --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse" and + "box-decoration-break: clone". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + box-decoration-break: clone; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list new file mode 100644 index 0000000000..cb5e5e9a57 --- /dev/null +++ b/layout/reftests/flexbox/pagination/reftest.list @@ -0,0 +1,214 @@ +# 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: +fuzzy-if(Android,0-128,0-10) == flexbox-empty-2a.html flexbox-empty-2-ref.html +fuzzy-if(Android,0-128,0-10) == flexbox-empty-2b.html flexbox-empty-2-ref.html +fuzzy-if(Android,0-128,0-10) == flexbox-empty-2c.html flexbox-empty-2-ref.html +fuzzy-if(Android,0-128,0-10) == 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 + +# Tests for how we fragment a flex container with one unbreakable child and +# "box-decoration-break: clone" +== flexbox-unbreakable-child-3a.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3a-wrap.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3b.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3b-wrap.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3c.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3c-wrap.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3d.html flexbox-unbreakable-child-3-ref.html +== flexbox-unbreakable-child-3d-wrap.html flexbox-unbreakable-child-3-ref.html + +# Tests for how we fragment flex items in a single-line column flex container. +== flexbox-single-column-1a.html flexbox-single-column-1-ref.html +== flexbox-single-column-1b.html flexbox-single-column-1-ref.html +== flexbox-single-column-1c.html flexbox-single-column-1-ref.html +== flexbox-single-column-1d.html flexbox-single-column-1-ref.html +== flexbox-single-column-1e.html flexbox-single-column-1-ref.html +== flexbox-single-column-1f.html flexbox-single-column-1-ref.html +== flexbox-single-column-1g.html flexbox-single-column-1-ref.html +== flexbox-single-column-1h.html flexbox-single-column-1-ref.html +== flexbox-single-column-1i.html flexbox-single-column-1-ref.html +== flexbox-single-column-1j.html flexbox-single-column-1-ref.html +== flexbox-single-column-2.html flexbox-single-column-2-ref.html +== flexbox-single-column-3a.html flexbox-single-column-3-ref.html +== flexbox-single-column-3b.html flexbox-single-column-3-ref.html +== flexbox-single-column-4.html flexbox-single-column-4-ref.html +== flexbox-single-column-5.html flexbox-single-column-5-ref.html +== flexbox-single-column-6.html flexbox-single-column-6-ref.html + +# Tests for how we fragment flex items in a single-line column flex container +# under "writing-mode: vertical-lr". +== flexbox-single-column-vertical-lr-1a.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1b.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1c.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1d.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1e.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1f.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1g.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1h.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1i.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-1j.html flexbox-single-column-vertical-lr-1-ref.html +== flexbox-single-column-vertical-lr-2.html flexbox-single-column-vertical-lr-2-ref.html +== flexbox-single-column-vertical-lr-3a.html flexbox-single-column-vertical-lr-3-ref.html +== flexbox-single-column-vertical-lr-3b.html flexbox-single-column-vertical-lr-3-ref.html +== flexbox-single-column-vertical-lr-4.html flexbox-single-column-vertical-lr-4-ref.html +== flexbox-single-column-vertical-lr-5.html flexbox-single-column-vertical-lr-5-ref.html +== flexbox-single-column-vertical-lr-6.html flexbox-single-column-vertical-lr-6-ref.html + +# Tests for how we fragment flex items in a single-line column flex container +# under "writing-mode: vertical-rl". +== flexbox-single-column-vertical-rl-1a.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1b.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1c.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1d.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1e.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1f.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1g.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1h.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1i.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-1j.html flexbox-single-column-vertical-rl-1-ref.html +== flexbox-single-column-vertical-rl-2.html flexbox-single-column-vertical-rl-2-ref.html +== flexbox-single-column-vertical-rl-3a.html flexbox-single-column-vertical-rl-3-ref.html +== flexbox-single-column-vertical-rl-3b.html flexbox-single-column-vertical-rl-3-ref.html +== flexbox-single-column-vertical-rl-4.html flexbox-single-column-vertical-rl-4-ref.html +== flexbox-single-column-vertical-rl-5.html flexbox-single-column-vertical-rl-5-ref.html +== flexbox-single-column-vertical-rl-6.html flexbox-single-column-vertical-rl-6-ref.html + +# Tests for how we fragment flex items in a multi-line column flex container. +== flexbox-multi-column-1a.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1b.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1c.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1d.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1e.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1f.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1g.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1h.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1i.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-1j.html flexbox-multi-column-1-ref.html +== flexbox-multi-column-2.html flexbox-multi-column-2-ref.html + +# Tests for how we fragment flex items in a multi-line column flex container +# under "writing-mode: vertical-lr". +== flexbox-multi-column-vertical-lr-1a.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1b.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1c.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1d.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1e.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1f.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1g.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1h.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1i.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-1j.html flexbox-multi-column-vertical-lr-1-ref.html +== flexbox-multi-column-vertical-lr-2.html flexbox-multi-column-vertical-lr-2-ref.html + +# Tests for how we fragment flex items in a multi-line column flex container +# under "writing-mode: vertical-rl". +== flexbox-multi-column-vertical-rl-1a.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1b.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1c.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1d.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1e.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1f.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1g.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1h.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1i.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-1j.html flexbox-multi-column-vertical-rl-1-ref.html +== flexbox-multi-column-vertical-rl-2.html flexbox-multi-column-vertical-rl-2-ref.html + +# Tests for how we fragment flex items in a single-line row flex container. +== flexbox-single-row-1a.html flexbox-single-row-1-ref.html +== flexbox-single-row-1b.html flexbox-single-row-1-ref.html +== flexbox-single-row-1c.html flexbox-single-row-1-ref.html +== flexbox-single-row-1d.html flexbox-single-row-1-ref.html +== flexbox-single-row-1e.html flexbox-single-row-1-ref.html +== flexbox-single-row-1f.html flexbox-single-row-1-ref.html +== flexbox-single-row-1g.html flexbox-single-row-1-ref.html +== flexbox-single-row-1h.html flexbox-single-row-1-ref.html +== flexbox-single-row-2.html flexbox-single-row-2-ref.html +== flexbox-single-row-3a.html flexbox-single-row-3-ref.html +== flexbox-single-row-3b.html flexbox-single-row-3-ref.html +== flexbox-single-row-4.html flexbox-single-row-4-ref.html + +# Tests for how we fragment flex items in a single-line row flex container +# under "writing-mode: vertical-lr". +== flexbox-single-row-vertical-lr-1a.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1b.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1c.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1d.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1e.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1f.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1g.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-1h.html flexbox-single-row-vertical-lr-1-ref.html +== flexbox-single-row-vertical-lr-2.html flexbox-single-row-vertical-lr-2-ref.html +== flexbox-single-row-vertical-lr-3a.html flexbox-single-row-vertical-lr-3-ref.html +== flexbox-single-row-vertical-lr-3b.html flexbox-single-row-vertical-lr-3-ref.html +== flexbox-single-row-vertical-lr-4.html flexbox-single-row-vertical-lr-4-ref.html + +# Tests for how we fragment flex items in a single-line row flex container +# under "writing-mode: vertical-rl". +== flexbox-single-row-vertical-rl-1a.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1b.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1c.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1d.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1e.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1f.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1g.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-1h.html flexbox-single-row-vertical-rl-1-ref.html +== flexbox-single-row-vertical-rl-2.html flexbox-single-row-vertical-rl-2-ref.html +== flexbox-single-row-vertical-rl-3a.html flexbox-single-row-vertical-rl-3-ref.html +== flexbox-single-row-vertical-rl-3b.html flexbox-single-row-vertical-rl-3-ref.html +== flexbox-single-row-vertical-rl-4.html flexbox-single-row-vertical-rl-4-ref.html + +# Tests for how we fragment flex items in a multi-line row flex container. +== flexbox-multi-row-1a.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-1b.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-1c.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-1d.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-1e.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-1f.html flexbox-multi-row-1-ref.html +== flexbox-multi-row-2a.html flexbox-multi-row-2-ref.html +== flexbox-multi-row-2b.html flexbox-multi-row-2-ref.html + +# Tests for how we fragment flex items in a multi-line row flex container. +# under "writing-mode: vertical-lr". +== flexbox-multi-row-vertical-lr-1a.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-1b.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-1c.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-1d.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-1e.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-1f.html flexbox-multi-row-vertical-lr-1-ref.html +== flexbox-multi-row-vertical-lr-2a.html flexbox-multi-row-vertical-lr-2-ref.html +== flexbox-multi-row-vertical-lr-2b.html flexbox-multi-row-vertical-lr-2-ref.html + +# Tests for how we fragment flex items in a multi-line row flex container. +# under "writing-mode: vertical-rl". +== flexbox-multi-row-vertical-rl-1a.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-1b.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-1c.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-1d.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-1e.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-1f.html flexbox-multi-row-vertical-rl-1-ref.html +== flexbox-multi-row-vertical-rl-2a.html flexbox-multi-row-vertical-rl-2-ref.html +== flexbox-multi-row-vertical-rl-2b.html flexbox-multi-row-vertical-rl-2-ref.html diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list new file mode 100644 index 0000000000..dbd6c705cd --- /dev/null +++ b/layout/reftests/flexbox/reftest.list @@ -0,0 +1,127 @@ +# 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... +# 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 +== flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml +== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml +== flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html +== flexbox-item-align-self-dynamic-pos-002.html flexbox-item-align-self-dynamic-pos-002-ref.html + +# 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-changeContent-1.html flexbox-dyn-changeContent-1-ref.html +== flexbox-dyn-changeContent-2.html flexbox-dyn-changeContent-2-ref.html +== 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(0-3,0-10) == flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml +== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml +fuzzy(0-3,0-10) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml + +fuzzy(0-3,0-10) == flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml +== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml +fuzzy(0-3,0-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 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,0-16,0-400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1-ref.xhtml +fuzzy-if(Android,0-16,0-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(0-1,0-8) fuzzy-if(cocoaWidget,0-1,0-14) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml +fuzzy(0-1,0-5) == flexbox-resizeviewport-2.xhtml flexbox-resizeviewport-2-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(0-1,0-1) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html +fuzzy(0-1,0-19) fuzzy-if(swgl,0-26,0-20) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html +skip-if(gtkWidget) fuzzy(0-6,0-8) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965 for gtk +fuzzy-if(gtkWidget,0-1,0-31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html + +# Tests for table flex items +== flexbox-table-flex-items-1.html flexbox-table-flex-items-1-ref.html +== flexbox-table-flex-items-2.html flexbox-table-flex-items-2-ref.html +== flexbox-table-flex-items-3.html flexbox-table-flex-items-3-ref.html +== flexbox-table-flex-items-4.html flexbox-table-flex-items-4-ref.html +== flexbox-table-flex-items-5.html flexbox-table-flex-items-5-ref.html + +# Tests for Bug 1500627. Keywords on min-height (block size) should behave as +# the initial value. (i.e. auto) +== flexbox-min-bsize-keywords-vert-1.html flexbox-min-bsize-keywords-vert-1-ref.html +== flexbox-min-bsize-keywords-horiz-1.html flexbox-min-bsize-keywords-horiz-1-ref.html +== flexbox-bsize-keywords-no-stretch-1.html flexbox-bsize-keywords-no-stretch-1-ref.html diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png Binary files differnew file mode 100644 index 0000000000..a64b6a4255 --- /dev/null +++ b/layout/reftests/flexbox/solidblue.png |
