diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/flexbox/pagination | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/flexbox/pagination')
28 files changed, 2501 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 000000000..2f002b63b --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html new file mode 100644 index 000000000..ae7297f59 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html new file mode 100644 index 000000000..40cdcbe40 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html new file mode 100644 index 000000000..16dd69748 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html new file mode 100644 index 000000000..086b3b006 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"> + <div class="flexContainer" style="height: 10px"></div> + </div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"> + <div class="flexContainer" style="height: 11px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html new file mode 100644 index 000000000..d631c1857 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html new file mode 100644 index 000000000..4879d1527 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html new file mode 100644 index 000000000..40b7a2ef8 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html new file mode 100644 index 000000000..8d2be34b2 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + various combinations of margin/border/padding helping it to be too tall, + with the flex container overflowing its fixed-height-block parent, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + } + .fixedHeightBlock { + height: 2px; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- NO BORDERS/PADDING --> + <!-- ================== --> + <!-- content fits exactly into 1 column: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 10px"></div> + </div></div> + + <!-- content fits, but margin-top pushes it to overflow: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + margin-top: 2px;"></div> + </div></div> + + <!-- content is too tall, by 1px: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 11px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP --> + <!-- ====================== --> + <!-- content fits, but border-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-top makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-top make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + padding-top: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON BOTTOM --> + <!-- ========================= --> + <!-- content fits, but border-bottom-width makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 2px"></div> + </div></div> + + <!-- content fits, but padding-bottom makes us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-bottom: 2px"></div> + </div></div> + + <!-- content fits, but border/padding-bottom make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-bottom-width: 1px; + padding-bottom: 1px"></div> + </div></div> + + <!-- BORDERS/PADDING ON TOP AND BOTTOM --> + <!-- ================================= --> + <!-- content fits, but border-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + border-top-width: 1px; + border-bottom-width: 1px"></div> + </div></div> + + <!-- content fits, but padding-top/bottom combined make us too tall: --> + <div class="multicol"><div class="fixedHeightBlock"> + <div class="flexContainer" style="height: 9px; + padding-top: 1px; + padding-bottom: 1px"></div> + </div></div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html new file mode 100644 index 000000000..0697416b7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html new file mode 100644 index 000000000..31ee91cf3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html new file mode 100644 index 000000000..10cd9b22d --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html new file mode 100644 index 000000000..3e606df23 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html new file mode 100644 index 000000000..e45df0ffa --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment an empty fixed-height flex container, with + margin/border/padding that are larger than the available height, + and with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 2px; + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + background: teal; + /* border-width is 0 by default; some sub-testcases will increase it. */ + border: 0 dashed black; + } + </style> + </head> + <body> + <!-- MARGIN LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- margin-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 10px"></div> + </div> + + <!-- margin-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-top: 11px"></div> + </div> + + <!-- margin-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 10px"></div> + </div> + + <!-- margin-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + margin-bottom: 11px"></div> + </div> + + <!-- BORDER LARGER THAN AVAILABLE HEIGHT --> + <!-- =================================== --> + <!-- border-top-width is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 10px"></div> + </div> + + <!-- border-top-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top-width: 11px"></div> + </div> + + <!-- border-bottom-width is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 10px"></div> + </div> + + <!-- border-bottom-width is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom-width: 11px"></div> + </div> + + <!-- PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- ==================================== --> + <!-- padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 10px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-top: 11px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 10px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + padding-bottom: 11px"></div> + </div> + + <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT --> + <!-- =========================================== --> + <!-- border+padding-top is the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 5px; + padding-top: 5px"></div> + </div> + + <!-- padding-top is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-top: 6px; + padding-top: 6px"></div> + </div> + + <!-- padding-bottom is exactly the available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 5px; + padding-bottom: 5px"></div> + </div> + + <!-- padding-bottom is larger than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px; + border-bottom: 6px; + padding-bottom: 6px"></div> + </div> + + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html new file mode 100644 index 000000000..586b51db7 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .flexContainer { + display: flex; + flex-direction: column; + border: 2px dotted black; + height: 298px; + } + .multicol { + height: 100px; + width: 200px; + -moz-column-width: 20px; + -moz-column-fill: auto; + border: 4px solid orange; + } + </style> + </head> + <body> + <div class="multicol"> + <div class="flexContainer"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html new file mode 100644 index 000000000..d0231e2f5 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + background: teal; + border: 1px dashed black; + } + .item { + display: block; + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html new file mode 100644 index 000000000..4b917aa18 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html new file mode 100644 index 000000000..8164a5aa3 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html new file mode 100644 index 000000000..3d2ae7e13 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row-reverse" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html new file mode 100644 index 000000000..0b0aef653 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: row-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: row-reverse; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html new file mode 100644 index 000000000..ae31d0898 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column" and + "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html new file mode 100644 index 000000000..bfd2fde16 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html new file mode 100644 index 000000000..1e3e9ff8c --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse" + and "flex-wrap: wrap". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html new file mode 100644 index 000000000..317e625d0 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with a single unbreakable + child, with the flex container having "flex-direction: column-reverse". +--> +<html> + <head> + <style> + .multicol { + height: 10px; + width: 100px; + -moz-column-width: 30px; + -moz-column-fill: auto; + border: 2px solid orange; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + background: teal; + border: 1px dashed black; + } + .item { + width: 100%; + height: 20px; + flex: none; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, smaller than available height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 8px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, between available height and child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 15px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, same as child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 20px"> + <img src="" class="item"> + </div> + </div> + + <!-- fixed-height container, larger than child height: --> + <div class="multicol"> + <div class="flexContainer" style="height: 24px"> + <img src="" class="item"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html new file mode 100644 index 000000000..163234dea --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with several children in a + multi-line vertical flexbox. +--> +<html> + <head> + <style> + .multicol { + height: 40px; + width: 100px; + -moz-column-width: 60px; + -moz-column-fill: auto; + border: 2px solid purple; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + background: yellow; + border: 1px dashed black; + } + .item { + width: 40px; + height: 15px; + border: 1px dotted teal; + margin: 1px; + font: 10px serif; + float: left; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer" style="height: 38px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">2</div> + </div> + </div> + + <!-- auto-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 38px"> + <div style="width: 132px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">5</div> + <div class="item">2</div> + <div class="item">4</div> + </div> + </div> + </div> + + <!-- fixed-height container--> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">2</div> + </div> + </div> + + <!-- fixed-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div style="width: 132px"> + <div class="item">1</div> + <div class="item">3</div> + <div class="item">5</div> + <div class="item">2</div> + <div class="item">4</div> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html new file mode 100644 index 000000000..b006e9718 --- /dev/null +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Testcase for how we fragment a flex container with several children in a + multi-line vertical flexbox. +--> +<html> + <head> + <style> + .multicol { + height: 40px; + width: 100px; + -moz-column-width: 60px; + -moz-column-fill: auto; + border: 2px solid purple; + margin-bottom: 15px; /* (just for spacing between testcases) */ + } + .flexContainer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start; + background: yellow; + border: 1px dashed black; + } + .item { + width: 40px; + height: 15px; + border: 1px dotted teal; + margin: 1px; + font: 10px serif; + } + </style> + </head> + <body> + <!-- auto-height container: --> + <div class="multicol"> + <div class="flexContainer"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + + <!-- auto-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + <div class="item">4</div> + <div class="item">5</div> + </div> + </div> + + <!-- fixed-height container--> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + </div> + </div> + + <!-- fixed-height container, with enough children that our last flex line + overflows (in the cross axis) --> + <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the + overflowing flex line to a continuation of the flex container --> + <div class="multicol"> + <div class="flexContainer" style="height: 70px"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + <div class="item">4</div> + <div class="item">5</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/flexbox/pagination/reftest-stylo.list b/layout/reftests/flexbox/pagination/reftest-stylo.list new file mode 100644 index 000000000..47156fa3a --- /dev/null +++ b/layout/reftests/flexbox/pagination/reftest-stylo.list @@ -0,0 +1,31 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests with an empty flex container being fragmented: +== flexbox-empty-1a.html flexbox-empty-1a.html +== flexbox-empty-1b.html flexbox-empty-1b.html +== flexbox-empty-1c.html flexbox-empty-1c.html +== flexbox-empty-1d.html flexbox-empty-1d.html + +# Tests with an empty flex container that overflows a short fixed-height block +# being fragmented: +== flexbox-empty-1e.html flexbox-empty-1e.html +== flexbox-empty-1f.html flexbox-empty-1f.html +== flexbox-empty-1g.html flexbox-empty-1g.html +== flexbox-empty-1h.html flexbox-empty-1h.html + +# Tests with an empty flex container being fragmented, with margin, border, +# and/or padding being taller than the available height: +== flexbox-empty-2a.html flexbox-empty-2a.html +== flexbox-empty-2b.html flexbox-empty-2b.html +== flexbox-empty-2c.html flexbox-empty-2c.html +== flexbox-empty-2d.html flexbox-empty-2d.html + +# Tests for how we fragment a flex container with one unbreakable child +== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1a.html +== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1a-wrap.html +== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1b.html +== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1b-wrap.html +== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1c.html +== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1c-wrap.html +== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1d.html +== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1d-wrap.html +== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2.html diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list new file mode 100644 index 000000000..31842d43d --- /dev/null +++ b/layout/reftests/flexbox/pagination/reftest.list @@ -0,0 +1,30 @@ +# Tests with an empty flex container being fragmented: +== flexbox-empty-1a.html flexbox-empty-1-ref.html +== flexbox-empty-1b.html flexbox-empty-1-ref.html +== flexbox-empty-1c.html flexbox-empty-1-ref.html +== flexbox-empty-1d.html flexbox-empty-1-ref.html + +# Tests with an empty flex container that overflows a short fixed-height block +# being fragmented: +== flexbox-empty-1e.html flexbox-empty-1-ref.html +== flexbox-empty-1f.html flexbox-empty-1-ref.html +== flexbox-empty-1g.html flexbox-empty-1-ref.html +== flexbox-empty-1h.html flexbox-empty-1-ref.html + +# Tests with an empty flex container being fragmented, with margin, border, +# and/or padding being taller than the available height: +== flexbox-empty-2a.html flexbox-empty-2-ref.html +== flexbox-empty-2b.html flexbox-empty-2-ref.html +== flexbox-empty-2c.html flexbox-empty-2-ref.html +== flexbox-empty-2d.html flexbox-empty-2-ref.html + +# Tests for how we fragment a flex container with one unbreakable child +== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html +== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html |