diff options
Diffstat (limited to 'layout/reftests/columns')
69 files changed, 2294 insertions, 0 deletions
diff --git a/layout/reftests/columns/ahem.css b/layout/reftests/columns/ahem.css new file mode 100644 index 000000000..884a41198 --- /dev/null +++ b/layout/reftests/columns/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} diff --git a/layout/reftests/columns/basic-1.html b/layout/reftests/columns/basic-1.html new file mode 100644 index 000000000..2b86be226 --- /dev/null +++ b/layout/reftests/columns/basic-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-count:2; -moz-column-gap:0; } + </style> +</head> +<body> + <div> + Hello<br> + Kitty + </div> +</body> +</html> diff --git a/layout/reftests/columns/basic-ref.html b/layout/reftests/columns/basic-ref.html new file mode 100644 index 000000000..21f74a6cc --- /dev/null +++ b/layout/reftests/columns/basic-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <style> + table { border-spacing:0 } + td { vertical-align: baseline; padding:0; } + </style> +</head> +<body> + <table border="0" width="100%"> + <tr> + <td width="50%">Hello</td> + <td width="50%">Kitty</td> + </tr> + </table> +</body> +</html> diff --git a/layout/reftests/columns/column-balancing-000.html b/layout/reftests/columns/column-balancing-000.html new file mode 100644 index 000000000..eca6289a2 --- /dev/null +++ b/layout/reftests/columns/column-balancing-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } +</style> + + + +<div class="colset"> + <p>one two three four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-000.ref.html b/layout/reftests/columns/column-balancing-000.ref.html new file mode 100644 index 000000000..d0223a4dc --- /dev/null +++ b/layout/reftests/columns/column-balancing-000.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + display: table; + border-collapse: separate; + border-spacing: 0; + border: solid silver; + } + p { width: 3em; display: table-cell;} +</style> + +<div class="colset"> +<p>one two</p> +<p>three four</p> +<p>five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-001.html b/layout/reftests/columns/column-balancing-001.html new file mode 100644 index 000000000..e7365c6fe --- /dev/null +++ b/layout/reftests/columns/column-balancing-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } +</style> + + + +<div class="colset"> +one two three four five +</div> diff --git a/layout/reftests/columns/column-balancing-002.html b/layout/reftests/columns/column-balancing-002.html new file mode 100644 index 000000000..41cade55f --- /dev/null +++ b/layout/reftests/columns/column-balancing-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } +</style> + + + +<div class="colset"> +one two three four five six +</div> diff --git a/layout/reftests/columns/column-balancing-002.ref.html b/layout/reftests/columns/column-balancing-002.ref.html new file mode 100644 index 000000000..b5d00cc7b --- /dev/null +++ b/layout/reftests/columns/column-balancing-002.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + display: table; + border-collapse: separate; + border-spacing: 0; + border: solid silver; + } + p { width: 3em; display: table-cell;} +</style> + +<div class="colset"> +<p>one two</p> +<p>three four</p> +<p>five six</p> +</div> diff --git a/layout/reftests/columns/column-balancing-003.html b/layout/reftests/columns/column-balancing-003.html new file mode 100644 index 000000000..c5b4217d8 --- /dev/null +++ b/layout/reftests/columns/column-balancing-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } +</style> + + + +<div class="colset"> +<p>one</p> +<p>two three</p> +<p>four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-004.html b/layout/reftests/columns/column-balancing-004.html new file mode 100644 index 000000000..cba6ce614 --- /dev/null +++ b/layout/reftests/columns/column-balancing-004.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; min-height: 2em; } +</style> + + + +<div class="colset"> +<p>one</p> +<p>two three</p> +<p>four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-004.ref.html b/layout/reftests/columns/column-balancing-004.ref.html new file mode 100644 index 000000000..0cdf589d9 --- /dev/null +++ b/layout/reftests/columns/column-balancing-004.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + display: table; + border-collapse: separate; + border-spacing: 0; + border: solid silver; + } + p { width: 3em; display: table-cell;} +</style> + +<div class="colset"> +<p>one</p> +<p>two three</p> +<p>four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-nested-000-ref.html b/layout/reftests/columns/column-balancing-nested-000-ref.html new file mode 100644 index 000000000..f30e24438 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-000-ref.html @@ -0,0 +1,61 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testing nested balancing column sets</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> +<style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + .colset { + -moz-column-count: 2; + -moz-column-gap: 1px; + -moz-column-rule: 1px solid black; + border: solid silver; + margin-bottom:1em; + width:30ch; + } + p { margin: 0; } + + /* balancing column sets deeper than level 2 should only use 1 column */ + .colset .colset .colset, + .colset .colset .colset .colset { + -moz-column-count: 1; + } +</style> +</head> +<body> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + </div> +</div> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + <div class="colset"> + <p>three three three three three</p> + </div> + </div> +</div> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + <div class="colset"> + <p>three three</p> + <div class="colset"> + <p>four four four four four</p> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/columns/column-balancing-nested-000.html b/layout/reftests/columns/column-balancing-nested-000.html new file mode 100644 index 000000000..542e7127e --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-000.html @@ -0,0 +1,55 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testing nested balancing column sets</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> +<style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + .colset { + -moz-column-count: 2; + -moz-column-gap: 1px; + -moz-column-rule: 1px solid black; + border: solid silver; + margin-bottom:1em; + width:30ch; + } + p { margin: 0; } +</style> +</head> +<body> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + </div> +</div> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + <div class="colset"> + <p>three three three three three</p> + </div> + </div> +</div> +<div class="colset"> + <p>one one one one one</p> + <div class="colset"> + <p>two two two two two</p> + <div class="colset"> + <p>three three</p> + <div class="colset"> + <p>four four four four four</p> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/columns/column-balancing-nested-001-ref.html b/layout/reftests/columns/column-balancing-nested-001-ref.html new file mode 100644 index 000000000..736ca5368 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-001-ref.html @@ -0,0 +1,64 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testing nested balancing column sets</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> +<style type="text/css"> + html,body { + color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0; + } + + .colset { + -moz-column-count: 2; + -moz-column-gap: 0px; + -moz-column-rule: 1px solid black; + margin-bottom:1em; + width:30ch; + } + .colset.lvl2 { + -moz-column-rule: 1px solid blue; + } + .colset.lvl3 { + -moz-column-rule: 1px solid red; + } + p { margin: 0; } + .non-balancing { + -moz-column-count: 1; + } + .fixed-height.lvl2 { + -moz-column-count: 2; + } + .fixed-height { + -moz-column-count: 1; + height:3em; + } +</style> +</head> +<body> +<div class="colset"> + <p>one one one one one</p> + <div class="colset non-balancing lvl2"> + <p>two two two two<br>two</p> + </div> +</div> +<div class="colset"> + <p>one one one one one<br>one</p> + <div class="colset fixed-height lvl2"> + <p>two two two two two</p> + </div> +</div> +<div class="colset"> + <p>one<br>one</p> + <div class="colset lvl2"> + <p>two</p> + <div class="colset fixed-height lvl3"> + <p>three three three three three three</p> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/columns/column-balancing-nested-001.html b/layout/reftests/columns/column-balancing-nested-001.html new file mode 100644 index 000000000..9bc84a3f2 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-001.html @@ -0,0 +1,60 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testing nested balancing column sets</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> +<style type="text/css"> + html,body { + color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0; + } + + .colset { + -moz-column-count: 2; + -moz-column-gap: 0px; + -moz-column-rule: 1px solid black; + margin-bottom:1em; + width:30ch; + } + .colset.lvl2 { + -moz-column-rule: 1px solid blue; + } + .colset.lvl3 { + -moz-column-rule: 1px solid red; + } + p { margin: 0; } + .non-balancing { + -moz-column-fill: auto; + } + .fixed-height { + height:3em; + } +</style> +</head> +<body> +<div class="colset"> + <p>one one one one one</p> + <div class="colset non-balancing lvl2"> + <p>two two two two two</p> + </div> +</div> +<div class="colset"> + <p>one one one one one<br>one</p> + <div class="colset fixed-height lvl2"> + <p>two two two two two</p> + </div> +</div> +<div class="colset"> + <p>one<br>one</p> + <div class="colset lvl2"> + <p>two</p> + <div class="colset fixed-height lvl3"> + <p>three three three three three three</p> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/columns/column-balancing-overflow-000.html b/layout/reftests/columns/column-balancing-overflow-000.html new file mode 100644 index 000000000..d07e498d3 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-000.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } + .short { height: 5px; } +</style> + + + +<div class="colset"> + <div class="short"><p>one two three four five</p></div> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-000.ref.html b/layout/reftests/columns/column-balancing-overflow-000.ref.html new file mode 100644 index 000000000..eca6289a2 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-000.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } +</style> + + + +<div class="colset"> + <p>one two three four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-001.html b/layout/reftests/columns/column-balancing-overflow-001.html new file mode 100644 index 000000000..568964af2 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } + .short { height: 5px; } +</style> + + + +<div class="colset"> + <p class="short">one two three four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-002.html b/layout/reftests/columns/column-balancing-overflow-002.html new file mode 100644 index 000000000..1e56ca70a --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } + .short { height: 5px; } + .table { display: table; } +</style> + + + +<div class="colset"> + <div class="table"> + <div class="short"> + <p>one two three four five</p> + </div> + </div> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-002.ref.html b/layout/reftests/columns/column-balancing-overflow-002.ref.html new file mode 100644 index 000000000..e6b455e5c --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-002.ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + border: solid silver; + width: 9em; + } + p { margin: 0; width: 3em;} +</style> + + + +<div class="colset"> + <p>one two three four five</p> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-003.html b/layout/reftests/columns/column-balancing-overflow-003.html new file mode 100644 index 000000000..a59b1ad55 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + .short { height: 5px; } + img { display: block; + width: 3em; + height: 3em;} +</style> + + + +<div class="colset"> + <div class="short"><img src="image-short.png"></div> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-003.ref.html b/layout/reftests/columns/column-balancing-overflow-003.ref.html new file mode 100644 index 000000000..86895661c --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-003.ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + -moz-column-count: 3; + -moz-column-gap: 0; + border: solid silver; + width: 9em; + } + img { display: block; + width: 3em; + height: 3em;} +</style> + + + +<div class="colset"> + <img src="image-short.png"> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-004.html b/layout/reftests/columns/column-balancing-overflow-004.html new file mode 100644 index 000000000..dcf2b0ecc --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-004.html @@ -0,0 +1,43 @@ +<html class="reftest-wait"> +<head><style> +/* Sets of heights that trigger crash: + 100px/50px/51+px + 100px/30px/74+px + Get only an assert unless you set ".d { position: absolute; }". + + Trigger hang (separate issue, absolute not needed): + 10px/10px/9999px + 10px/10px/999999px --> "bad height" notreached +*/ +/* Note: The -moz-column-gap and the backgrounds + are just added here for easier visualization */ +#colset { width: 200px; + padding: 2px; + -moz-column-count: 3; + -moz-column-gap: 2px; } +#a { height: 100px; background: lightblue;} +#b { height: 50px; background: lightgreen;} +#c { height: 51px; background: orange;} + +</style> +<script> + function boom() { + document.getElementById('colset').offsetHeight; + document.getElementById('a').style.height = 'auto'; + document.documentElement.className = '' + } +</script> +</head> +<!-- Removing whitespace in body for simpler frame trees --> +<body onload="boom()" + ><div id="colset" + ><div + ><div id="a"></div + ><div id="b" + ><div id="c"></div + ><div id="d"></div + ></div + ></div + ></div +></body> +</html> diff --git a/layout/reftests/columns/column-balancing-overflow-004.ref.html b/layout/reftests/columns/column-balancing-overflow-004.ref.html new file mode 100644 index 000000000..70c3cf9b4 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-004.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + display: table; + border-collapse: separate; + border-spacing: 2px; + width: 204px; + } + p { background: orange; display: table-cell; height: 17px} +</style> + +<div class="colset"> +<p></p> +<p></p> +<p></p> +</div> diff --git a/layout/reftests/columns/column-balancing-overflow-005.html b/layout/reftests/columns/column-balancing-overflow-005.html new file mode 100644 index 000000000..7c9ede3b4 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-005.html @@ -0,0 +1,13 @@ +<html><head> +<style> +#colset { width: 200px; + -moz-column-count: 3; + -moz-column-gap: 4px; + padding: 4px; + outline: 1px orange solid; } +#b { height: 12px; + outline: 1px green dotted;} +#c { height: 13px; + background: yellow;} +</style></head><body><div id="colset"><div id="b"><div id="c"></div></div></div> +</body></html>
\ No newline at end of file diff --git a/layout/reftests/columns/column-balancing-overflow-005.ref.html b/layout/reftests/columns/column-balancing-overflow-005.ref.html new file mode 100644 index 000000000..e63d391f6 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-005.ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + display: table; + border-collapse: separate; + border-spacing: 4px; + width: 208px; + border: solid 1px orange; + margin: -1px; + } + p { + display: table-cell; + background: yellow; + height: 4px; + outline: 1px green dotted; + } +</style> + +<div class="colset"> +<p></p> +<p></p> +<p></p> +</div> diff --git a/layout/reftests/columns/column-box-alignment-rtl-ref.html b/layout/reftests/columns/column-box-alignment-rtl-ref.html new file mode 100644 index 000000000..a065ceeeb --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +/* cosmetics */ +table { + border: 1px solid; + width: 100%; +} + +td { + width: 25%; +} +</style> +The first column should be aligned with the right side of the block and the second column should be to its direct left. +<table cellspacing=0 cellpadding=0 style="direction:rtl; text-align:right;"> + <tr> + <td>1st column</td> + <td>2nd column</td> + <td> </td> + <td> </td> + </tr> +</table> diff --git a/layout/reftests/columns/column-box-alignment-rtl.html b/layout/reftests/columns/column-box-alignment-rtl.html new file mode 100644 index 000000000..91c4c0df4 --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl.html @@ -0,0 +1,31 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +div { + column-gap: 0; + -moz-column-gap: 0; + column-count: 4; + -moz-column-count: 4; + -webkit-column-count: 4; + -o-column-count: 4; + -ms-column-count: 4; +} + +/* cosmetics */ +div { + border: 1px solid; +} + +td { + width: 25%; +} +</style> +The first column should be aligned with the right side of the block and the second column should be to its direct left. +<div style="direction:rtl; text-align:right;"> + <p>1st column</p> + <p>2nd column</p> +</div> diff --git a/layout/reftests/columns/columnfill-auto-2-ref.html b/layout/reftests/columns/columnfill-auto-2-ref.html new file mode 100644 index 000000000..f00c41745 --- /dev/null +++ b/layout/reftests/columns/columnfill-auto-2-ref.html @@ -0,0 +1,48 @@ +<!doctype html> +<html> +<head> +<link rel="stylesheet" type="text/css" href="ahem.css" /> +<style> + html { + line-height: 1.5; + font-family: ahem; + } + + body { + margin: 0; + padding: 0; + } + + #test { + padding: 5px 0px 0px 10px; + position: absolute; + left: 500px; + right: 0px; + top: 0px; + bottom: 0px; + background-color: orange; + height: 120px; + -moz-column-width: 640px; + -moz-column-fill: balance; + -moz-column-gap: 0; + overflow-x: auto; + overflow-y: hidden; + } + + #parent { + background-color: lightBlue; + position: absolute; + left: 0px; + bottom: 0px; + right: 0px; + height: 120px; + width: 70em; + } +</style> +</head> +<body> + <div id="parent"> + <div id="test">To Mrs. Aville, England St. Petersburgh, Dec. 11th, 17- You will rejoice to hear that no disaster has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday; and my first task is to assure my dear sister of my welfare, and increasing confidence in the success of my undertaking. I am already far north of London; and as I walk in the streets of Petersburgh. I feel a cold northern breeze play upon my cheeks, which braces my nerves, and fills me with delight.</div> + </div> +</body> +</html> diff --git a/layout/reftests/columns/columnfill-auto-2.html b/layout/reftests/columns/columnfill-auto-2.html new file mode 100644 index 000000000..c4d3d7418 --- /dev/null +++ b/layout/reftests/columns/columnfill-auto-2.html @@ -0,0 +1,48 @@ +<!doctype html> +<html> +<head> +<link rel="stylesheet" type="text/css" href="ahem.css" /> +<style> + html { + line-height: 1.5; + font-family: ahem; + } + + body { + margin: 0; + padding: 0; + } + + #test { + padding: 5px 0px 0px 10px; + position: absolute; + left: 500px; + right: 0px; + top: 0px; + bottom: 0px; + background-color: orange; + height: 120px; + -moz-column-width: 640px; + -moz-column-fill: auto; + -moz-column-gap: 0; + overflow-x: auto; + overflow-y: hidden; + } + + #parent { + background-color: lightBlue; + position: absolute; + left: 0px; + bottom: 0px; + right: 0px; + height: 120px; + width: 70em; + } +</style> +</head> +<body> + <div id="parent"> + <div id="test">To Mrs. Aville, England St. Petersburgh, Dec. 11th, 17- You will rejoice to hear that no disaster has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday; and my first task is to assure my dear sister of my welfare, and increasing confidence in the success of my undertaking. I am already far north of London; and as I walk in the streets of Petersburgh. I feel a cold northern breeze play upon my cheeks, which braces my nerves, and fills me with delight.</div> + </div> +</body> +</html> diff --git a/layout/reftests/columns/columnfill-auto-3.html b/layout/reftests/columns/columnfill-auto-3.html new file mode 100644 index 000000000..cac317a5a --- /dev/null +++ b/layout/reftests/columns/columnfill-auto-3.html @@ -0,0 +1,47 @@ +<!doctype html> +<html> +<head> +<link rel="stylesheet" type="text/css" href="ahem.css" /> +<style> + html { + line-height: 1.5; + font-family: ahem; + } + + body { + margin: 0; + padding: 0; + } + + #test { + padding: 5px 0px 0px 10px; + position: absolute; + left: 500px; + right: 0px; + top: 0px; + background-color: orange; + max-height: 120px; + -moz-column-width: 640px; + -moz-column-fill: auto; + -moz-column-gap: 0; + overflow-x: auto; + overflow-y: hidden; + } + + #parent { + background-color: lightBlue; + position: absolute; + left: 0px; + bottom: 0px; + right: 0px; + height: 120px; + width: 70em; + } +</style> +</head> +<body> + <div id="parent"> + <div id="test">To Mrs. Aville, England St. Petersburgh, Dec. 11th, 17- You will rejoice to hear that no disaster has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday; and my first task is to assure my dear sister of my welfare, and increasing confidence in the success of my undertaking. I am already far north of London; and as I walk in the streets of Petersburgh. I feel a cold northern breeze play upon my cheeks, which braces my nerves, and fills me with delight.</div> + </div> +</body> +</html> diff --git a/layout/reftests/columns/columnfill-auto-ref.html b/layout/reftests/columns/columnfill-auto-ref.html new file mode 100644 index 000000000..6e0046c30 --- /dev/null +++ b/layout/reftests/columns/columnfill-auto-ref.html @@ -0,0 +1,80 @@ +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + + <style> +html,body { + color:black; background-color:white; font-size:16px; padding:5px; margin:0; +} +mask { + position: absolute; + top:0; bottom:0; left:8px; width:5px; + background: black; +} + + .rel { + position: relative; + } + a { + position: absolute; + width: 10px; + height: 10px; + bottom: 0; + left: 0; + background: blue; + } + f { + position: fixed; + width: 10px; + height: 10px; + bottom: 0; + left: 100px; + background: lime; + } + td.text { + width: 12em; + height: 8em; + text-align: left; + font-family: ahem; + font-size: 12pt; + line-height: 1.1; + } + + table { + font-family: ahem; + font-size: 12pt; + line-height: 1.1; + } + </style> +</head> + +<body> + <table cellpadding=0 cellspacing=0 class="rel"> + <tr> + <td class="text" valign="top"><a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed</td> + </tr> + </table> + <table cellpadding=0 cellspacing=0 class="rel"> + <tr> + <td class="text" valign="top"><a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed</td> + </tr> + </table> + <table cellpadding=0 cellspacing=0 class="rel"> + <tr> + <td class="text" valign="top"><f></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed</td> + </tr> + </table> + <table cellpadding=0 cellspacing=0> + <tr> + <td class="text" valign="top"><a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed</td> + </tr> + </table> + <table cellpadding=0 cellspacing=0> + <tr> + <td class="text" valign="top"><f style="left:120px"></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed</td> + </tr> + </table> + +<mask></mask> +</body> +</html> diff --git a/layout/reftests/columns/columnfill-auto.html b/layout/reftests/columns/columnfill-auto.html new file mode 100644 index 000000000..72d2911cb --- /dev/null +++ b/layout/reftests/columns/columnfill-auto.html @@ -0,0 +1,68 @@ +<html> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <style> +html,body { + color:black; background-color:white; font-size:16px; padding:5px; margin:0; +} +mask { + position: absolute; + top:0; bottom:0; left:8px; width:5px; + background: black; +} + +.rel { + position: relative; +} +.columns { + -moz-column-width: 12em; + -moz-column-gap: 0; + -moz-column-fill: auto; + height: 8em; + font-family: ahem; + font-size: 12pt; + line-height: 1.1; +} +a { + position: absolute; + width: 10px; + height: 10px; + bottom: 0; + left: 0; + background: blue; +} +f { + position: fixed; + width: 10px; + height: 10px; + bottom: 0; + left: 100px; + background: lime; +} + </style> + </head> + + <body> + <div class="columns rel"> + <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed + </div> + + <div class="columns rel" style="overflow: hidden"> + <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed + </div> + + <div class="columns rel" style="overflow: hidden"> + <f></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed + </div> + + <div class="columns" style="overflow: hidden"> + <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed + </div> + + <div class="columns" style="overflow: hidden"> + <f style="left:120px"></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed + </div> + +<mask></mask> + </body> +</html> diff --git a/layout/reftests/columns/columnfill-balance-ref.html b/layout/reftests/columns/columnfill-balance-ref.html new file mode 100644 index 000000000..de523224c --- /dev/null +++ b/layout/reftests/columns/columnfill-balance-ref.html @@ -0,0 +1,33 @@ +<html> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + + <style> + td { + width: 200px; + font-family: ahem; + } + + table { + width: 100%; + height: 150px; + padding-bottom: 0; + margin-bottom: 0; + font-family: ahem; + } + </style> + </head> + <body> + <table cellpadding=0 cellspacing=0> + <tr> + <td valign="top"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. + </td> + <td valign="top">Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci + </td> + <td valign="top">vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris. + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/columns/columnfill-balance.html b/layout/reftests/columns/columnfill-balance.html new file mode 100644 index 000000000..e2495088d --- /dev/null +++ b/layout/reftests/columns/columnfill-balance.html @@ -0,0 +1,16 @@ +<html> + <head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + </head> + <body> + <div style="-moz-column-width: 200px; + -moz-column-gap: 0px; + -moz-column-fill: balance; + height: 150px; + margin-bottom: 0; + padding-bottom: 0; + font-family: ahem;"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris. + </div> + </body> +</html> diff --git a/layout/reftests/columns/columnfill-overflow-ref.html b/layout/reftests/columns/columnfill-overflow-ref.html new file mode 100644 index 000000000..57d37ac10 --- /dev/null +++ b/layout/reftests/columns/columnfill-overflow-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> + div.container { + width:54em; + background-color: gray; + } + + div.multicolumn { + height: 5em; + overflow: visible; + + column-width:15em; + column-gap: 2em; + column-rule: 4px solid green; + column-fill: auto; + + -moz-column-width:15em; + -moz-column-gap: 2em; + -moz-column-rule: 4px solid green; + -moz-column-fill: auto; + + padding: 5px; + } + + p { + margin: 0; + padding: 0 + } + </style> + </head> + <body> + <div class="container"> + <div class="multicolumn"> + <p>Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. </p> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/columns/columnfill-overflow.html b/layout/reftests/columns/columnfill-overflow.html new file mode 100644 index 000000000..ac6a51d7a --- /dev/null +++ b/layout/reftests/columns/columnfill-overflow.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> + div.container { + width:54em; + background-color: gray; + } + + div.multicolumn { + height: 5em; + overflow: visible; + + column-width:15em; + column-gap: 2em; + column-rule: 4px solid green; + column-fill: balance; + + -moz-column-width:15em; + -moz-column-gap: 2em; + -moz-column-rule: 4px solid green; + -moz-column-fill: balance; + + padding: 5px; + } + + p { + margin: 0; + padding: 0 + } + </style> + </head> + <body> + <div class="container"> + <div class="multicolumn"> + <p>Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. Ab cde fgh i jkl. Mnopqr stu vw xyz. A bcdef g hij klm nopqrstuv wxy z. Abc de fghi jklmno. Pqrstu vwx yz. Abc def ghi jkl.M nop qrst uv wx yz. </p> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/columns/columnrule-basic-ref.html b/layout/reftests/columns/columnrule-basic-ref.html new file mode 100644 index 000000000..a2c78ffbc --- /dev/null +++ b/layout/reftests/columns/columnrule-basic-ref.html @@ -0,0 +1,15 @@ +<div style="position: absolute; + top: 20px; left: 517px; + width: 6px; + background-color: red; + height: 100px;"></div> +<div style="position: absolute; + top: 20px; left: 20px; + -moz-column-count:2; + -moz-column-gap: 0px;"> +<div style="height:200px; + width: 500px; + font-size: 16px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris. +</div> +</div> diff --git a/layout/reftests/columns/columnrule-basic.html b/layout/reftests/columns/columnrule-basic.html new file mode 100644 index 000000000..e3532d777 --- /dev/null +++ b/layout/reftests/columns/columnrule-basic.html @@ -0,0 +1,11 @@ +<div style="position: absolute; + top: 20px; left: 20px; + -moz-column-count :2; + -moz-column-gap: 0px; + -moz-column-rule: 6px red solid;"> +<div style="height:200px; + width: 500px; + font-size: 16px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris. +</div> +</div> diff --git a/layout/reftests/columns/columnrule-complex-ref.html b/layout/reftests/columns/columnrule-complex-ref.html new file mode 100644 index 000000000..a01b36577 --- /dev/null +++ b/layout/reftests/columns/columnrule-complex-ref.html @@ -0,0 +1,27 @@ +<div style="position: absolute; + top: 20px; left: 317px; + width: 6px; + background-color: red; height: 100px;"> +</div> +<div style="position: absolute; + top: 20px; left: 617px; + width: 6px; + background-color: red; + height: 100px;"> +</div> +<div style="position: absolute; + top: 20px; left: 917px; + width: 6px; + background-color: red; + height: 100px;"> +</div> +<div style="position: absolute; + top: 20px; left: 20px; + -moz-column-count: 4; + -moz-column-gap: 0px;"> +<div style="height:400px; + width: 300px; + font-size: 16px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. +</div> +</div> diff --git a/layout/reftests/columns/columnrule-complex.html b/layout/reftests/columns/columnrule-complex.html new file mode 100644 index 000000000..226c65d54 --- /dev/null +++ b/layout/reftests/columns/columnrule-complex.html @@ -0,0 +1,11 @@ +<div style="position: absolute; + top: 20px; left: 20px; + -moz-column-count: 4; + -moz-column-gap: 0px; + -moz-column-rule: 6px red solid; + font-size: 16px;"> +<div style="height:400px; + width: 300px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. +</div> +</div> diff --git a/layout/reftests/columns/columnrule-linestyles-notref.html b/layout/reftests/columns/columnrule-linestyles-notref.html new file mode 100644 index 000000000..d6c59ac13 --- /dev/null +++ b/layout/reftests/columns/columnrule-linestyles-notref.html @@ -0,0 +1 @@ +<div style="-moz-column-count:2; -moz-column-gap: 3px; -moz-column-rule: 6px red solid;"><div style="height:100px; width: 300px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.</div></div> diff --git a/layout/reftests/columns/columnrule-linestyles.html b/layout/reftests/columns/columnrule-linestyles.html new file mode 100644 index 000000000..2dead9d5e --- /dev/null +++ b/layout/reftests/columns/columnrule-linestyles.html @@ -0,0 +1,2 @@ +<!-- Make sure no-one regresses line styles on column rules --> +<div style="-moz-column-count:2; -moz-column-gap: 3px; -moz-column-rule: 6px red dotted;"><div style="height:100px; width: 300px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.</div></div> diff --git a/layout/reftests/columns/columnrule-overflow-ref.html b/layout/reftests/columns/columnrule-overflow-ref.html new file mode 100644 index 000000000..22bcc41a5 --- /dev/null +++ b/layout/reftests/columns/columnrule-overflow-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 746015: Off-screen overflow column rules are not properly drawn.</title> + <style type="text/css"> + * { + margin: 0 0; + padding: 0 0; + } + + body,html { + padding: 0 0; + margin: 0 0; + line-height: 1.0; + } + + div.column1 { + display: inline-block; + width: 180px; + height: 175px; + vertical-align: top; + white-space: no-wrap; + } + + div.content { + width: 180px; + height: 175px; + background: blue; + } + + div.column2 { + display: inline-block; + width: 180px; + height: 175px; + vertical-align: top; + } + + div.colgap { + display: inline-block; + background-color: green; + width: 10px; + height: 175px; + } + </style> + </head> + <body> + <div class="column1"><div class="content"></div></div><div class="colgap"></div><div class="column2"><div class="content"></div></div> + </body> +</html> diff --git a/layout/reftests/columns/columnrule-overflow.html b/layout/reftests/columns/columnrule-overflow.html new file mode 100644 index 000000000..df273e143 --- /dev/null +++ b/layout/reftests/columns/columnrule-overflow.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 746015: Off-screen overflow column rules are not properly drawn.</title> + <style type="text/css"> + * { + margin: 0 0; + padding: 0 0; + } + + body,html { + padding: 0 0; + margin: 0 0; + line-height: 1.0; + } + + body { + position: absolute; + left: -570px; + } + + div.content { + width: 180px; + height: 875px; + background: blue; + } + + div.multicolumn { + height: 175px; + overflow: visible; + + -moz-column-width: 180px; + -moz-column-gap: 10px; + -moz-column-rule: 10px solid green; + } + </style> + </head> + <body> + <div class="multicolumn"><div class="content"></div></div> + </body> +</html> diff --git a/layout/reftests/columns/columnrule-padding-ref.html b/layout/reftests/columns/columnrule-padding-ref.html new file mode 100644 index 000000000..f2ade3fce --- /dev/null +++ b/layout/reftests/columns/columnrule-padding-ref.html @@ -0,0 +1,31 @@ +<body style="overflow:hidden"> +<div style="position: absolute; + top: 40px; left: 337px; + width: 6px; + background-color: green; + height: 100px;"> +</div> +<div style="position: absolute; + top: 40px; left: 637px; + width: 6px; + background-color: green; + height: 100px;"> +</div> +<div style="position: absolute; + top: 40px; left: 937px; + width: 6px; + background-color: green; + height: 100px;"> +</div> +<div style="position: absolute; + top: 40px; left: 40px; + height: 100px; + -moz-column-count: 4; + -moz-column-gap: 0px;"> +<div style="height:400px; + width: 300px; + font-size: 16px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. +</div> +</div> +</body> diff --git a/layout/reftests/columns/columnrule-padding.html b/layout/reftests/columns/columnrule-padding.html new file mode 100644 index 000000000..c61b4a09d --- /dev/null +++ b/layout/reftests/columns/columnrule-padding.html @@ -0,0 +1,15 @@ +<!doctype html> +<body style="overflow:hidden"> +<div style="padding: 20px; + position: absolute; + top: 20px; left: 20px; + -moz-column-count: 4; + -moz-column-gap: 0px; + -moz-column-rule: 6px green solid;"> +<div style="height:400px; + width: 300px; + font-size: 16px;"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. +</div> +</div> +</body> diff --git a/layout/reftests/columns/columns-table-caption-000-ref.html b/layout/reftests/columns/columns-table-caption-000-ref.html new file mode 100644 index 000000000..4c9800508 --- /dev/null +++ b/layout/reftests/columns/columns-table-caption-000-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for table caption column layout</title> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/"> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1109571"> + <style type="text/css"> + +* { + color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace; +} + +.caption { + -moz-column-count:2; + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; + + -moz-column-rule:2px solid blue; + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -moz-column-gap:10px; + -webkit-column-gap:10px; + -o-column-gap:10px; + -ms-column-gap:10px; + column-gap:10px; + + height:2.2em; + line-height:1em; + border:2px dotted; +} +.col1 { + -moz-column-count:1; + -webkit-column-count:1; + -o-column-count:1; + -ms-column-count:1; + column-count:1; +} +.cw1 { + -moz-column-width:1px; + -webkit-column-width:1px; + -o-column-width:1px; + -ms-column-width:1px; + column-width:1px; +} +table {border:1px solid black} +.wrap { float:left; clear:both; outline:1px dashed lime; margin-top:3px; } + </style> +</head> +<body> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption">1<br>2<br>3</div></caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"> + <div class="caption" style="height:1.1em; text-align:center">1<br>2<br>3</div> + <table cellpadding="0" cellspacing="0"><tr><td>a table with a two column caption</td></table> +</div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption" style="border: 1px solid blue">1111<br>2<br>3</div></caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption">1111<br>2<br>3<br>4</div></caption><tr><td>T</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>T</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>a table with a two column caption</td></table></div> + +</body> +</html> diff --git a/layout/reftests/columns/columns-table-caption-000.html b/layout/reftests/columns/columns-table-caption-000.html new file mode 100644 index 000000000..68dec43db --- /dev/null +++ b/layout/reftests/columns/columns-table-caption-000.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for table caption column layout</title> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/"> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1109571"> + <link rel="match" href="columns-table-caption-000-ref.html"> + <style type="text/css"> + +* { + color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace; +} + +caption { + -moz-column-count:2; + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; + + -moz-column-rule:2px solid blue; + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -moz-column-gap:10px; + -webkit-column-gap:10px; + -o-column-gap:10px; + -ms-column-gap:10px; + column-gap:10px; + + height:2.2em; + line-height:1em; + border:2px dotted; +} +.col1 { + -moz-column-count:1; + -webkit-column-count:1; + -o-column-count:1; + -ms-column-count:1; + column-count:1; +} +.cw1 { + -moz-column-width:1px; + -webkit-column-width:1px; + -o-column-width:1px; + -ms-column-width:1px; + column-width:1px; +} +table {border:1px solid black} +.wrap { float:left; clear:both; outline:1px dashed lime; margin-top:3px; } + </style> +</head> +<body> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption>1<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption style="height:1.1em">1<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption style="border:inherit; border-color:blue">1111<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption>1111<br>2<br>3<br>4</caption><tr><td>T</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1">1111<br>2<br>3<br>4</caption><tr><td>T</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1">1111<br>2<br>3<br>4</caption><tr><td>a table with a two column caption</td></table></div> + +<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1 cw1">1111<br>2<br>3<br>4</caption><tr><td>a table with a two column caption</td></table></div> + +</body> +</html> diff --git a/layout/reftests/columns/fieldset-columns-001-ref.html b/layout/reftests/columns/fieldset-columns-001-ref.html new file mode 100644 index 000000000..6b4daba6a --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-001-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +a { + position: absolute; + width: 10px; + height: 10px; + top: 0; + left: 0; + background: blue; +} +f { + position: fixed; + width: 10px; + height: 10px; + bottom: 0; + left: 100px; + background: lime; +} +fieldset div { + -moz-columns: 2; + -moz-column-fill: auto; +} +fieldset { + border: 1px solid; +} +.rel { + position: relative; +} +</style> +<fieldset style="overflow:hidden; width:300px; height:200px;"> + <legend>Legend</legend> +<div class="rel" style="-moz-columns: 2; width:100%; height:100%;"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +<a></a><f></f> +</div> +</fieldset> +<fieldset style="width:600px; height:7em; overflow:hidden"> + <legend>Legend</legend> +<div class="rel" style="-moz-columns: 3; -moz-column-gap:2em; -moz-column-rule:3px solid; -moz-column-width:3em; width:100%; height:100%"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +<a></a><f style="left:120px"></f> +</div> +</fieldset> +<fieldset style="overflow:hidden; width:300px; height:2em;"> + <legend>Legend</legend> +<div> + <p>X +<a></a><f style="left:140px"></f> +</div> +</fieldset> +<fieldset style="width:600px; height:2em"> + <legend>Legend</legend> +<div> + <p>X +<a></a><f style="left:160px"></f> +</div> +</fieldset> + +</body> +</html> diff --git a/layout/reftests/columns/fieldset-columns-001.html b/layout/reftests/columns/fieldset-columns-001.html new file mode 100644 index 000000000..39a92fd2e --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +a { + position: absolute; + width: 10px; + height: 10px; + top: 0; + left: 0; + background: blue; +} +f { + position: fixed; + width: 10px; + height: 10px; + bottom: 0; + left: 100px; + background: lime; +} +fieldset { + -moz-columns: 2; + -moz-column-fill: auto; + border: 1px solid; +} +.rel { + position: relative; +} +</style> +<fieldset class="rel" style="overflow:hidden; width:300px; height:200px;"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +<a></a><f></f> +</fieldset> +<fieldset class="rel" style="-moz-columns: 3; -moz-column-gap:2em; -moz-column-rule:3px solid; -moz-column-width:3em; width:600px; height:7em"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +<a></a><f style="left:120px"></f> +</fieldset> +<fieldset style="overflow:hidden; width:300px; height:2em;"> + <legend>Legend</legend> + <p>X +<a></a><f style="left:140px"></f> +</fieldset> +<fieldset style="width:600px; height:2em"> + <legend>Legend</legend> + <p>X +<a></a><f style="left:160px"></f> +</fieldset> + +</body> +</html> diff --git a/layout/reftests/columns/margin-collapsing-bug616722-1-ref.html b/layout/reftests/columns/margin-collapsing-bug616722-1-ref.html new file mode 100644 index 000000000..6e9a79998 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-1-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>616722-1</title> + + <style type="text/css"> + body,html { margin:0;padding: 10px;} + p { margin: 0; background:pink; } + .columns { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + background-color:lime; + margin: 0em; + border: 1px solid black; + } + .no-border { + border-width:0; + } + </style> +</head> +<body> + <div class="columns"> + <div style="padding:10px 0 3px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns"> + <div style="padding:3px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns"> + <div style="padding:10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns"> + <div style="padding:20px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns"> + <div style="padding:20px 0 0 0"></div> + </div> + + <div class="columns no-border"> + <div style="padding:10px 0 3px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div style="padding:3px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div style="padding:10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div style="padding:20px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div style="padding:20px 0 0 0"></div> + </div> +<!-- + <div class="columns no-border" style="margin-bottom:3px"> + <div><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border" style="margin-top:3px"> + <div><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border" style="margin-top:20px"> + <div><p>The quick brown fox jumps over the lazy dog.</p></div> + </div> + <div class="columns no-border"> + <div></div> + </div> +--> +</body></html> diff --git a/layout/reftests/columns/margin-collapsing-bug616722-1.html b/layout/reftests/columns/margin-collapsing-bug616722-1.html new file mode 100644 index 000000000..53ff74d80 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-1.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>616722-1</title> + + <style type="text/css"> + body,html { margin:0;padding: 10px;} + p { margin: 3px 0; background:pink; } + div { + background-color:lime; + margin: 0em; + border: 1px solid black; + } + .no-border { + border-style: none; + } + + .columns { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } + </style> +</head> +<body> + <div class="columns"> + <p style="margin-top:10px">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns"> + <p style="margin-bottom:10px">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns"> + <p style="margin:10px 0">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns"> + <p style="margin:20px 0 10px 0">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns"> + <p style="margin:20px 0 10px 0"></p> + </div> + + <div class="columns no-border"> + <p style="margin-top:10px">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns no-border"> + <p style="margin-bottom:10px">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns no-border"> + <p style="margin:10px 0">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns no-border"> + <p style="margin:20px 0 10px 0">The quick brown fox jumps over the lazy dog.</p> + </div> + <div class="columns no-border"> + <p style="margin:20px 0 10px 0"></p> + </div> + +</body></html> diff --git a/layout/reftests/columns/margin-collapsing-bug616722-2-ref.html b/layout/reftests/columns/margin-collapsing-bug616722-2-ref.html new file mode 100644 index 000000000..b9d2d565f --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-2-ref.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>616722-2</title> + + <style type="text/css"> + body,html { margin:0;padding: 10px;} + p { margin: 3px 0; background:pink; } + .no-border p { margin: 0; } + + .columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + background-color:lime; + margin: 0em; + border: 1px solid black; + } + .no-border { + border-width: 0; + } + </style> +</head> +<body> + <div class="columns no-border" style="padding:10px 0;background:none"></div> + <div class="columns"> + <div style="padding-top:7px"><p>1</p></div> + <p>2</p> + <p>3</p> + </div> + <div class="columns no-border" style="padding:10px 0;background:none"><p></p></div> + <div class="columns"> + <div style="padding-bottom:10px"><p>1</p></div> + <p>2</p> + <div style="padding-bottom:17px"><p>3</p></div> + </div> + <div class="columns"> + <div style="padding:7px 0 0 0"><p>1</p></div> + <p>2</p> + <p>3</p> + </div> + <div class="columns"> + <div style="padding:17px 0 0 0"><p>1</p></div> + <p>2</p> + <p>3</p> + </div> + <div class="columns"> + <p style="margin:0"></p> + <p style="margin:0"></p> + <p style="margin:0"></p> + </div> + + <div class="columns no-border"> + <div style="padding-top:10px"><p>1</p></div> + <p>2</p> + <div style="padding-bottom:20px"><p>3</p></div> + </div> + <div class="columns no-border"> + <div style="padding-top:3px"><p>1</p></div> + <p>2</p> + <div style="padding-bottom:0px"><p>3</p></div> + </div> + <div class="columns no-border"> + <div style="padding:10px 0 0 0"><p>1</p></div> + <p>2</p> + <p>3</p> + </div> + <div class="columns no-border"> + <div style="padding:20px 0 0 0"><p>1</p></div> + <div style="padding:0 0 20px 0"><p>2</p></div> + <p>3</p> + </div> + <div class="columns no-border"> + <p style="margin:0"></p> + <p style="margin:0"></p> + <p style="margin:0"></p> + </div> + + +</body></html> diff --git a/layout/reftests/columns/margin-collapsing-bug616722-2.html b/layout/reftests/columns/margin-collapsing-bug616722-2.html new file mode 100644 index 000000000..ad3497465 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-2.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>616722-2</title> + + <style type="text/css"> + body,html { margin:0;padding: 10px;} + p { margin: 3px 0; background:pink; } + div { + background-color:lime; + margin: 0em; + border: 1px solid black; + } + .no-border { + border-style: none; + } + + .columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + } + </style> +</head> +<body> + <div class="columns no-border" style="margin:10px 0"></div> + <div class="columns"> + <p style="margin-top:10px">1</p> + <p>2</p> + <p>3</p> + </div> + <div class="columns no-border" style="padding:10px 0;background:none"><p></p></div> + <div class="columns"> + <p style="margin-bottom:10px">1</p> + <p>2</p> + <p style="margin-bottom:20px">3</p> + </div> + <div class="columns"> + <p style="margin:10px 0">1</p> + <p>2</p> + <p>3</p> + </div> + <div class="columns"> + <p style="margin:20px 0 10px 0">1</p> + <p>2</p> + <p>3</p> + </div> + <div class="columns"> + <p style="margin:20px 0 10px 0"></p> + <p></p> + <p style="margin:20px 0 10px 0"></p> + </div> + + <div class="columns no-border"> + <p style="margin-top:10px">1</p> + <p>2</p> + <p style="margin-bottom:20px">3</p> + </div> + <div class="columns no-border"> + <p style="margin-bottom:10px">1</p> + <p>2</p> + <p>3</p> + </div> + <div class="columns no-border"> + <p style="margin:10px 0">1</p> + <p>2</p> + <p>3</p> + </div> + <div class="columns no-border"> + <p style="margin:20px 0 10px 0">1</p> + <p>2</p> + <p style="margin:20px 0 10px 0">3</p> + </div> + <div class="columns no-border"> + <p style="margin:20px 0 10px 0"></p> + <p></p> + <p style="margin:20px 0 10px 0"></p> + </div> + +</body></html> diff --git a/layout/reftests/columns/min-width-1-ref.html b/layout/reftests/columns/min-width-1-ref.html new file mode 100644 index 000000000..d6d7034b0 --- /dev/null +++ b/layout/reftests/columns/min-width-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { border:2px solid black; width:100px; height:200px; } + </style> +</head> +<body> + <table width="1"><tr><td><div></div></tr></td></table> + <table width="1"><tr><td><div></div></tr></td></table> +</body> +</html> diff --git a/layout/reftests/columns/min-width-1a.html b/layout/reftests/columns/min-width-1a.html new file mode 100644 index 000000000..4bbd82c3a --- /dev/null +++ b/layout/reftests/columns/min-width-1a.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-count:2; -moz-column-gap:0; border:2px solid black; height:200px; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:100px; } + </style> +</head> +<body> + <table cellpadding=0 cellspacing=0 width="1"><tr><td><div> + <span></span> + </div></tr></td></table> + <table cellpadding=0 cellspacing=0 width="1"><tr><td><div class="gap"> + <span></span> + </div></tr></td></table> +</body> +</html> diff --git a/layout/reftests/columns/min-width-1b.html b/layout/reftests/columns/min-width-1b.html new file mode 100644 index 000000000..ad78979b5 --- /dev/null +++ b/layout/reftests/columns/min-width-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-width:200px; -moz-column-count:2; -moz-column-gap:0; border:2px solid black; height:200px; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:100px; } + </style> +</head> +<body> + <table width="1"><tr><td><div> + <span></span> + </div></tr></td></table> + <table width="1"><tr><td><div class="gap"> + <span></span> + </div></tr></td></table> +</body> +</html> diff --git a/layout/reftests/columns/min-width-1c.html b/layout/reftests/columns/min-width-1c.html new file mode 100644 index 000000000..46a69414c --- /dev/null +++ b/layout/reftests/columns/min-width-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-width:100px; -moz-column-count:2; -moz-column-gap:0; border:2px solid black; height:200px; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:200px; } + </style> +</head> +<body> + <table width="1"><tr><td><div> + <span></span> + </div></tr></td></table> + <table width="1"><tr><td><div class="gap"> + <span></span> + </div></tr></td></table> +</body> +</html> diff --git a/layout/reftests/columns/min-width-2-ref.html b/layout/reftests/columns/min-width-2-ref.html new file mode 100644 index 000000000..93e915da1 --- /dev/null +++ b/layout/reftests/columns/min-width-2-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1109571</title> + <style type="text/css"> +* { + color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace; +} + +.c { + height: 2.2em; + line-height: 1em; + border: dotted; + white-space: pre; + position: relative; +} + +g { display:inline-block; width:2em; } +z { position:absolute; top:0; bottom:0; color:white; border-right:2px solid blue; margin-left:-1px; } +o { position:absolute; top:0; right:0; width:0; } +x { position:relative; z-index:1; } /* to render it above the blue bar */ + </style> +</head> +<body> + + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c"><z style="padding-left:1em"> </z><x>xxxx</x><g></g><x>xxxx</x><br><x>xxxx</x><g></g><x>xxxx</x></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table> +</div> +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c"><z> </z><x>xxxxxxxx</x><br><x>xxxxxxxx</x></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table> +</div> + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c"><z style="padding-left:1em"> </z><x>xxxx</x><br><x>xxxx</x><o><g></g><x>xxxx</x><br><g></g><x>xxxx</x></o></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table> +</div> + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c"><z> </z><x>xxxx</x><br><x>xxxx</x><o><x>xxxx</x><br><x>xxxx</x></o></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table> +</div> + +</body> +</html> diff --git a/layout/reftests/columns/min-width-2.html b/layout/reftests/columns/min-width-2.html new file mode 100644 index 000000000..f30d86bbd --- /dev/null +++ b/layout/reftests/columns/min-width-2.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug </title> + <style type="text/css"> +* { + color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace; +} + +.c { + -moz-column-rule:2px solid blue; + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -moz-column-gap:0; + -webkit-column-gap:0; + -o-column-gap:0; + -ms-column-gap:0; + column-gap:0; + + height:2.2em; + line-height:1em; + border:dotted; +} + +.col2 { + -moz-column-count:2; + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; +} + +.cw { + -moz-column-width:4em; + -webkit-column-width:4em; + -o-column-width:4em; + -ms-column-width:4em; + column-width:4em; +} + +.gap { + -moz-column-gap:2em; + -webkit-column-gap:2em; + -o-column-gap:2em; + -ms-column-gap:2em; + column-gap:2em; +} + </style> +</head> +<body> + + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c col2 gap">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table> +</div> +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c col2">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table> +</div> + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c gap cw">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table> +</div> + +<div style="width:250px; border:1px solid"> +<table cellpadding=0 cellspacing=0><td><div class="c cw">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table> +</div> + +</body> +</html> + + diff --git a/layout/reftests/columns/positioning-transforms-bug1112501-ref.html b/layout/reftests/columns/positioning-transforms-bug1112501-ref.html new file mode 100644 index 000000000..60f74c2d2 --- /dev/null +++ b/layout/reftests/columns/positioning-transforms-bug1112501-ref.html @@ -0,0 +1,9 @@ +<html>
+<head>
+</head>
+<body>m
+<div style="-moz-column-count: 2;">m
+<span style="position: absolute;">m m</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/columns/positioning-transforms-bug1112501.html b/layout/reftests/columns/positioning-transforms-bug1112501.html new file mode 100644 index 000000000..a50716d19 --- /dev/null +++ b/layout/reftests/columns/positioning-transforms-bug1112501.html @@ -0,0 +1,9 @@ +<html>
+<head>
+</head>
+<body>m
+<div style="-moz-column-count: 2; -moz-transform: scale(1,1); ">m
+<span style="position: fixed;">m m</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/columns/pref-width-1-ref.html b/layout/reftests/columns/pref-width-1-ref.html new file mode 100644 index 000000000..2eae0681b --- /dev/null +++ b/layout/reftests/columns/pref-width-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + span { display:inline-block; width:100px; } + span.gap { width:80px; } + </style> +</head> +<body> + <div> + <span></span><span></span> + </div> + <div class="clear"> + <span></span><span class="gap"></span><span></span> + </div> +</body> +</html> diff --git a/layout/reftests/columns/pref-width-1a.html b/layout/reftests/columns/pref-width-1a.html new file mode 100644 index 000000000..4a20ce175 --- /dev/null +++ b/layout/reftests/columns/pref-width-1a.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-count:2; -moz-column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:100px; } + </style> +</head> +<body> + <div> + <span></span><br><span></span> + </div> + <div class="gap clear"> + <span></span><br><span></span> + </div> +</body> +</html> diff --git a/layout/reftests/columns/pref-width-1b.html b/layout/reftests/columns/pref-width-1b.html new file mode 100644 index 000000000..fb940b776 --- /dev/null +++ b/layout/reftests/columns/pref-width-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-count:2; -moz-column-width:100px; -moz-column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:50px; } + </style> +</head> +<body> + <div> + <span></span><br><span></span> + </div> + <div class="gap clear"> + <span></span><br><span></span> + </div> +</body> +</html> diff --git a/layout/reftests/columns/pref-width-1c.html b/layout/reftests/columns/pref-width-1c.html new file mode 100644 index 000000000..4f4e0e635 --- /dev/null +++ b/layout/reftests/columns/pref-width-1c.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { -moz-column-count:2; -moz-column-width:100px; -moz-column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { -moz-column-gap:80px; } + span { display:inline-block; width:200px; } + </style> +</head> +<body> + <div> + <span></span><br><span></span> + </div> + <div class="gap clear"> + <span></span><br><span></span> + </div> +</body> +</html> diff --git a/layout/reftests/columns/reftest-stylo.list b/layout/reftests/columns/reftest-stylo.list new file mode 100644 index 000000000..bf2e1dfa7 --- /dev/null +++ b/layout/reftests/columns/reftest-stylo.list @@ -0,0 +1,44 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== basic-1.html basic-1.html +== pref-width-1a.html pref-width-1a.html +== pref-width-1b.html pref-width-1b.html +== pref-width-1c.html pref-width-1c.html +== min-width-1a.html min-width-1a.html +== min-width-1b.html min-width-1b.html +== min-width-1c.html min-width-1c.html +== min-width-2.html min-width-2.html +== column-balancing-overflow-000.html column-balancing-overflow-000.html +== column-balancing-overflow-001.html column-balancing-overflow-001.html +skip == column-balancing-overflow-002.html column-balancing-overflow-002.html +== column-balancing-overflow-003.html column-balancing-overflow-003.html +== column-balancing-overflow-004.html column-balancing-overflow-004.html +== column-balancing-overflow-005.html column-balancing-overflow-005.html +== column-balancing-000.html column-balancing-000.html +== column-balancing-001.html column-balancing-001.html +== column-balancing-002.html column-balancing-002.html +== column-balancing-003.html column-balancing-003.html +== column-balancing-004.html column-balancing-004.html +== column-box-alignment-rtl.html column-box-alignment-rtl.html +HTTP(..) == columnfill-balance.html columnfill-balance.html +fuzzy-if(OSX,32,1000) HTTP(..) == columnfill-auto.html columnfill-auto.html +HTTP(..) == columnfill-auto-2.html columnfill-auto-2.html +HTTP(..) == columnfill-auto-3.html columnfill-auto-3.html +skip-if(B2G||Mulet) == columnrule-basic.html columnrule-basic.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == columnrule-complex.html columnrule-complex.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== columnrule-linestyles.html columnrule-linestyles.html +== columnrule-padding.html columnrule-padding.html +skip-if(B2G||Mulet) == columnfill-overflow.html columnfill-overflow.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== margin-collapsing-bug616722-1.html margin-collapsing-bug616722-1.html +== margin-collapsing-bug616722-2.html margin-collapsing-bug616722-2.html +== column-balancing-nested-000.html column-balancing-nested-000.html +== column-balancing-nested-001.html column-balancing-nested-001.html +== columnrule-overflow.html columnrule-overflow.html +== columns-table-caption-000.html columns-table-caption-000.html +== positioning-transforms-bug1112501.html positioning-transforms-bug1112501.html +skip fuzzy-if(browserIsRemote&&winWidget,121,221) == fieldset-columns-001.html fieldset-columns-001.html diff --git a/layout/reftests/columns/reftest.list b/layout/reftests/columns/reftest.list new file mode 100644 index 000000000..95a0eb0af --- /dev/null +++ b/layout/reftests/columns/reftest.list @@ -0,0 +1,37 @@ +== basic-1.html basic-ref.html +== pref-width-1a.html pref-width-1-ref.html +== pref-width-1b.html pref-width-1-ref.html +== pref-width-1c.html pref-width-1-ref.html +== min-width-1a.html pref-width-1-ref.html +== min-width-1b.html min-width-1-ref.html +== min-width-1c.html min-width-1-ref.html +== min-width-2.html min-width-2-ref.html +== column-balancing-overflow-000.html column-balancing-overflow-000.ref.html +== column-balancing-overflow-001.html column-balancing-overflow-000.ref.html +== column-balancing-overflow-002.html column-balancing-overflow-002.ref.html +== column-balancing-overflow-003.html column-balancing-overflow-003.ref.html +== column-balancing-overflow-004.html column-balancing-overflow-004.ref.html +== column-balancing-overflow-005.html column-balancing-overflow-005.ref.html +== column-balancing-000.html column-balancing-000.ref.html +== column-balancing-001.html column-balancing-000.ref.html +== column-balancing-002.html column-balancing-002.ref.html +== column-balancing-003.html column-balancing-000.ref.html +== column-balancing-004.html column-balancing-004.ref.html +== column-box-alignment-rtl.html column-box-alignment-rtl-ref.html +HTTP(..) == columnfill-balance.html columnfill-balance-ref.html +fuzzy-if(OSX,32,1000) HTTP(..) == columnfill-auto.html columnfill-auto-ref.html +HTTP(..) == columnfill-auto-2.html columnfill-auto-2-ref.html +HTTP(..) == columnfill-auto-3.html columnfill-auto-2-ref.html +== columnrule-basic.html columnrule-basic-ref.html +== columnrule-complex.html columnrule-complex-ref.html +!= columnrule-linestyles.html columnrule-linestyles-notref.html +== columnrule-padding.html columnrule-padding-ref.html +== columnfill-overflow.html columnfill-overflow-ref.html +== margin-collapsing-bug616722-1.html margin-collapsing-bug616722-1-ref.html +== margin-collapsing-bug616722-2.html margin-collapsing-bug616722-2-ref.html +== column-balancing-nested-000.html column-balancing-nested-000-ref.html +== column-balancing-nested-001.html column-balancing-nested-001-ref.html +== columnrule-overflow.html columnrule-overflow-ref.html +== columns-table-caption-000.html columns-table-caption-000-ref.html +== positioning-transforms-bug1112501.html positioning-transforms-bug1112501-ref.html +fuzzy-if(browserIsRemote&&winWidget,140,276) == fieldset-columns-001.html fieldset-columns-001-ref.html |