diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /layout/reftests/flexbox/pagination | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/flexbox/pagination')
218 files changed, 21578 insertions, 0 deletions
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 |