diff options
Diffstat (limited to 'layout/reftests/columns')
94 files changed, 2838 insertions, 0 deletions
diff --git a/layout/reftests/columns/ahem.css b/layout/reftests/columns/ahem.css new file mode 100644 index 0000000000..884a41198b --- /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 0000000000..538c239654 --- /dev/null +++ b/layout/reftests/columns/basic-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-count:2; 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 0000000000..21f74a6cca --- /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/break-avoid-line-position-1-ref.html b/layout/reftests/columns/break-avoid-line-position-1-ref.html new file mode 100644 index 0000000000..1f9315219c --- /dev/null +++ b/layout/reftests/columns/break-avoid-line-position-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<meta charset="UTF-8"/> +<title>Wikipedia References Multicol Bug</title> + +<style> + html { overflow: hidden } + div { width: 15em; margin-right: 2em; float: left; } + p { margin: 0 } +</style> + +<div> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222 abcdefghijkl3333333333</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> +</div> +<div> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222 abcdefghijkl3333333333</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111</p> +</div> diff --git a/layout/reftests/columns/break-avoid-line-position-1.html b/layout/reftests/columns/break-avoid-line-position-1.html new file mode 100644 index 0000000000..43af8d0121 --- /dev/null +++ b/layout/reftests/columns/break-avoid-line-position-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<meta charset="UTF-8"/> +<title>Wikipedia References Multicol Bug</title> + +<style> + html { overflow: hidden } + div { width: 32em; column-count: 2; column-gap: 2em; } + p { page-break-inside:avoid; margin: 0; } +</style> + +<div> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222 abcdefghijkl3333333333</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222 abcdefghijkl3333333333</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111 abcdefghijkl2222222222</p> + <p>abcdefghijkl0000000000 abcdefghijkl1111111111</p> +</div> diff --git a/layout/reftests/columns/column-balancing-000.html b/layout/reftests/columns/column-balancing-000.html new file mode 100644 index 0000000000..a5033bce22 --- /dev/null +++ b/layout/reftests/columns/column-balancing-000.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..95234e8578 --- /dev/null +++ b/layout/reftests/columns/column-balancing-000.ref.html @@ -0,0 +1,19 @@ +<!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; + font: 16px/1 sans-serif; + } + 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 0000000000..7e2ab6f568 --- /dev/null +++ b/layout/reftests/columns/column-balancing-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..1510bc56df --- /dev/null +++ b/layout/reftests/columns/column-balancing-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..3699a469f4 --- /dev/null +++ b/layout/reftests/columns/column-balancing-002.ref.html @@ -0,0 +1,19 @@ +<!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; + font: 16px/1 sans-serif; + } + 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 0000000000..e61f2bfba2 --- /dev/null +++ b/layout/reftests/columns/column-balancing-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..d191940554 --- /dev/null +++ b/layout/reftests/columns/column-balancing-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..5417da617f --- /dev/null +++ b/layout/reftests/columns/column-balancing-004.ref.html @@ -0,0 +1,19 @@ +<!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; + font: 16px/1 sans-serif; + } + 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 0000000000..6dba85fdd4 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-000-ref.html @@ -0,0 +1,62 @@ +<!-- + 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 { + column-count: 2; + column-gap: 1px; + column-rule: 1px solid black; + border: solid silver; + width:30ch; + } + p { margin: 0; } + + /* balancing column sets deeper than level 2 should only use 1 column */ + .colset .colset .colset, + .colset .colset .colset .colset { + 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> +<br> +<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> +<br> +<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 0000000000..66a9559309 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-000.html @@ -0,0 +1,56 @@ +<!-- + 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 { + column-count: 2; + column-gap: 1px; + column-rule: 1px solid black; + border: solid silver; + 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> +<br> +<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> +<br> +<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 0000000000..21d4aef395 --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-001-ref.html @@ -0,0 +1,65 @@ +<!-- + 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 { + column-count: 2; + column-gap: 0px; + column-rule: 1px solid black; + width:30ch; + } + .colset.lvl2 { + column-rule: 1px solid blue; + } + .colset.lvl3 { + column-rule: 1px solid red; + } + p { margin: 0; } + .non-balancing { + column-count: 1; + } + .fixed-height.lvl2 { + column-count: 2; + } + .fixed-height { + 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> +<br> +<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> +<br> +<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 0000000000..597d9821cf --- /dev/null +++ b/layout/reftests/columns/column-balancing-nested-001.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-family:monospace; font-size:16px; padding:0; margin:0; + } + + .colset { + column-count: 2; + column-gap: 0px; + column-rule: 1px solid black; + width:30ch; + } + .colset.lvl2 { + column-rule: 1px solid blue; + } + .colset.lvl3 { + column-rule: 1px solid red; + } + p { margin: 0; } + .non-balancing { + 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> +<br> +<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> +<br> +<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 0000000000..afe6f36863 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-000.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..a5033bce22 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-000.ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..fd3898a8ea --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..18e90cc659 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..66aa4ccfb4 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-002.ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>Balancing Overflow</title> + +<style type="text/css"> + .colset { + border: solid silver; + width: 9em; + font: 16px/1 sans-serif; + } + 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 0000000000..fd21051fe2 --- /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 { + column-count: 3; + 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=""></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 0000000000..fdcb3ffd1d --- /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 { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + } + img { display: block; + width: 3em; + height: 3em;} +</style> + + + +<div class="colset"> + <img src=""> +</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 0000000000..9c09f3023c --- /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 column-gap and the backgrounds + are just added here for easier visualization */ +#colset { width: 200px; + padding: 2px; + column-count: 3; + 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 0000000000..70c3cf9b4d --- /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 0000000000..6b6a531660 --- /dev/null +++ b/layout/reftests/columns/column-balancing-overflow-005.html @@ -0,0 +1,13 @@ +<html><head> +<style> +#colset { width: 200px; + column-count: 3; + column-gap: 4px; + padding: 4px; + outline: 1px orange solid; } +#b { height: 10px; + outline: 1px green dotted;} +#c { height: 12px; /* Create overflow for #b */ + background: yellow;} +</style></head><body><div id="colset"><div id="b"><div id="c"></div></div></div> +</body></html> 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 0000000000..e63d391f62 --- /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-2-ref.html b/layout/reftests/columns/column-box-alignment-rtl-2-ref.html new file mode 100644 index 0000000000..e981507edf --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-2-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +table { + border: 1px solid; + inline-size: 600px; + box-sizing: content-box; + font: 16px/1 sans-serif; +} + +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-2.html b/layout/reftests/columns/column-box-alignment-rtl-2.html new file mode 100644 index 0000000000..4e8ea574ad --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-2.html @@ -0,0 +1,25 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +div { + column-gap: 0; + column-count: 4; + inline-size: 600px; + font: 16px/1 sans-serif; +} + +/* cosmetics */ +div { + border: 1px solid; +} + +</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/column-box-alignment-rtl-3-ref.html b/layout/reftests/columns/column-box-alignment-rtl-3-ref.html new file mode 100644 index 0000000000..5cd1e12b14 --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-3-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +html { + writing-mode: vertical-rl; +} + +table { + border: 1px solid; + inline-size: 100%; + font: 16px/1 sans-serif; +} + +td { + inline-size: 25%; +} +</style> +The first column should be aligned with the inline-end side of the block and the second column should be to its direct left (towards inline-start side). +<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-3.html b/layout/reftests/columns/column-box-alignment-rtl-3.html new file mode 100644 index 0000000000..de18213a05 --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-3.html @@ -0,0 +1,28 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +html { + writing-mode: vertical-rl; +} + +div { + column-gap: 0; + column-count: 4; + font: 16px/1 sans-serif; +} + +/* cosmetics */ +div { + border: 1px solid; +} + +</style> +The first column should be aligned with the inline-end side of the block and the second column should be to its direct left (towards inline-start side). +<div style="direction:rtl; text-align:right;"> + <p>1st column</p> + <p>2nd column</p> +</div> diff --git a/layout/reftests/columns/column-box-alignment-rtl-4-ref.html b/layout/reftests/columns/column-box-alignment-rtl-4-ref.html new file mode 100644 index 0000000000..cda029afeb --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-4-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +html { + writing-mode: vertical-rl; +} + +table { + border: 1px solid; + inline-size: 600px; + box-sizing: content-box; + font: 16px/1 sans-serif; +} + +td { + inline-size: 25%; +} +</style> +The first column should be aligned with the inline-end side of the block and the second column should be to its direct left (towards inline-start side). +<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-4.html b/layout/reftests/columns/column-box-alignment-rtl-4.html new file mode 100644 index 0000000000..96826cd0a4 --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl-4.html @@ -0,0 +1,29 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +html { + writing-mode: vertical-rl; +} + +div { + column-gap: 0; + column-count: 4; + inline-size: 600px; + font: 16px/1 sans-serif; +} + +/* cosmetics */ +div { + border: 1px solid; +} + +</style> +The first column should be aligned with the inline-end side of the block and the second column should be to its direct left (towards inline-start side). +<div style="direction:rtl; text-align:right;"> + <p>1st column</p> + <p>2nd column</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 0000000000..deb03dccbd --- /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; +} + +table { + border: 1px solid; + width: 100%; + font: 16px/1 sans-serif; +} + +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 0000000000..7abfd185cb --- /dev/null +++ b/layout/reftests/columns/column-box-alignment-rtl.html @@ -0,0 +1,24 @@ +<!doctype html> +<style> +* { + margin: 0 0; + padding: 0 0; +} + +div { + column-gap: 0; + column-count: 4; + font: 16px/1 sans-serif; +} + +/* cosmetics */ +div { + border: 1px solid; +} + +</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/column-span-bidi-1-ref.html b/layout/reftests/columns/column-span-bidi-1-ref.html new file mode 100644 index 0000000000..9bc890541f --- /dev/null +++ b/layout/reftests/columns/column-span-bidi-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <style> + h3 { + column-span: all; + } + html { + columns: 3em; + } + </style> + + <body onload=go()> + <h3></h3> + <!-- The following content will be in a -moz-column-content frame where it's + parent is a hard continuation of a nsColumnSetFrame. --> + ltr + ltr + <div dir="rtl">rtl</div> + <div></div> + </body> +</html> diff --git a/layout/reftests/columns/column-span-bidi-1.html b/layout/reftests/columns/column-span-bidi-1.html new file mode 100644 index 0000000000..8e45f82fcf --- /dev/null +++ b/layout/reftests/columns/column-span-bidi-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <style> + h3 { + column-span: all; + } + html { + columns: 3em; + } + </style> + <script> + function go() { + document.body.offsetHeight; + document.body.appendChild(a); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload=go()> + <h3> + <div id="a"></div> + </h3> + <!-- The following content will be in a -moz-column-content frame where it's + parent is a hard continuation of a nsColumnSetFrame. --> + ltr + ltr + <div dir="rtl">rtl</div> + </body> +</html> 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 0000000000..29e69e3afc --- /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; + column-width: 640px; + column-fill: balance; + 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 0000000000..b0680cd051 --- /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; + column-width: 640px; + column-fill: auto; + 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 0000000000..1b575c3271 --- /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; + column-width: 640px; + column-fill: auto; + 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 0000000000..6e0046c309 --- /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 0000000000..d79dc84657 --- /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 { + column-width: 12em; + column-gap: 0; + 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 0000000000..de523224ce --- /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 0000000000..8302a32847 --- /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="column-width: 200px; + column-gap: 0px; + 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 0000000000..2bd626bf69 --- /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; + + column-width:15em; + column-gap: 2em; + column-rule: 4px solid green; + 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 0000000000..ecd6a40f37 --- /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; + + column-width:15em; + column-gap: 2em; + column-rule: 4px solid green; + 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 0000000000..57e6432006 --- /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; + column-count:2; + 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 0000000000..fad41f5965 --- /dev/null +++ b/layout/reftests/columns/columnrule-basic.html @@ -0,0 +1,11 @@ +<div style="position: absolute; + top: 20px; left: 20px; + column-count :2; + column-gap: 0px; + 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 0000000000..86c84bb6f0 --- /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; + column-count: 4; + 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 0000000000..70c232a69f --- /dev/null +++ b/layout/reftests/columns/columnrule-complex.html @@ -0,0 +1,11 @@ +<div style="position: absolute; + top: 20px; left: 20px; + column-count: 4; + column-gap: 0px; + 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 0000000000..86ec821397 --- /dev/null +++ b/layout/reftests/columns/columnrule-linestyles-notref.html @@ -0,0 +1 @@ +<div style="column-count:2; column-gap: 3px; 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 0000000000..12f785fac3 --- /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="column-count:2; column-gap: 3px; 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 0000000000..22bcc41a52 --- /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 0000000000..cdcc06c120 --- /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; + + column-width: 180px; + column-gap: 10px; + 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 0000000000..9f322ca871 --- /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; + column-count: 4; + 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 0000000000..1de49b221a --- /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; + column-count: 4; + column-gap: 0px; + 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 0000000000..433f095ec6 --- /dev/null +++ b/layout/reftests/columns/columns-table-caption-000-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>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 { + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; + + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -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 { + -webkit-column-count:1; + -o-column-count:1; + -ms-column-count:1; + column-count:1; +} +.cw1 { + -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 0000000000..e41ccad7f1 --- /dev/null +++ b/layout/reftests/columns/columns-table-caption-000.html @@ -0,0 +1,71 @@ +<!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 { + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; + + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -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 { + -webkit-column-count:1; + -o-column-count:1; + -ms-column-count:1; + column-count:1; +} +.cw1 { + -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/dynamic-change-with-overflow-1-ref.html b/layout/reftests/columns/dynamic-change-with-overflow-1-ref.html new file mode 100644 index 0000000000..8104adfb88 --- /dev/null +++ b/layout/reftests/columns/dynamic-change-with-overflow-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <div style="overflow: hidden; width: 130px; column-count: 2;"> + Some long text that cannot possibly fit in 130px. + </div> +</html> diff --git a/layout/reftests/columns/dynamic-change-with-overflow-1.html b/layout/reftests/columns/dynamic-change-with-overflow-1.html new file mode 100644 index 0000000000..8e73266e4c --- /dev/null +++ b/layout/reftests/columns/dynamic-change-with-overflow-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <div style="overflow: hidden; width: 130px"> + Some long text that cannot possibly fit in 130px. + </div> + + <script> + onload = function() { + var div = document.querySelector("div"); + // Make sure layout has happened. + window.width = div.offsetWidth; + div.style.columnCount = "2"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/columns/dynamic-text-indent-1-ref.html b/layout/reftests/columns/dynamic-text-indent-1-ref.html new file mode 100644 index 0000000000..9d96ce96de --- /dev/null +++ b/layout/reftests/columns/dynamic-text-indent-1-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="column-count: 2; width: 200px; text-indent: 50px"> + This is some text that is too long and it will overflow. +</div> diff --git a/layout/reftests/columns/dynamic-text-indent-1.html b/layout/reftests/columns/dynamic-text-indent-1.html new file mode 100644 index 0000000000..dc4f4f5300 --- /dev/null +++ b/layout/reftests/columns/dynamic-text-indent-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <div style="column-count: 2; width: 200px;"> + This is some text that is too long and it will overflow. + </div> + <script> + onload = function() { + var d = document.querySelector("div"); + window.w = d.offsetWidth; + d.style.textIndent = "50px"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/columns/dynamic-text-indent-2-ref.html b/layout/reftests/columns/dynamic-text-indent-2-ref.html new file mode 100644 index 0000000000..1b96697717 --- /dev/null +++ b/layout/reftests/columns/dynamic-text-indent-2-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<fieldset style="column-count: 2; width: 200px; border: none; text-indent: 50px"> + This is some text that is too long and it will overflow. +</fieldset> diff --git a/layout/reftests/columns/dynamic-text-indent-2.html b/layout/reftests/columns/dynamic-text-indent-2.html new file mode 100644 index 0000000000..a36b8d1bc0 --- /dev/null +++ b/layout/reftests/columns/dynamic-text-indent-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <fieldset style="column-count: 2; width: 200px; border: none"> + This is some text that is too long and it will overflow. + </fieldset> + <script> + onload = function() { + var f = document.querySelector("fieldset"); + window.w = f.offsetWidth; + f.style.textIndent = "50px"; + document.documentElement.className = ""; + } + </script> +</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 0000000000..84b0580bb9 --- /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 { + columns: 2; + column-fill: auto; +} +fieldset { + border: 1px solid; +} +.rel { + position: relative; +} +</style> +<fieldset class="rel" style="overflow:hidden; width:300px; height:200px;"> + <legend>Legend</legend> +<div style="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 class="rel" style="width:600px; height:7em; overflow:hidden"> + <legend>Legend</legend> +<div style="columns: 3; column-gap:2em; column-rule:3px solid; 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 0000000000..705cea0e82 --- /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 { + columns: 2; + 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="columns: 3; column-gap:2em; column-rule:3px solid; 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/fieldset-columns-002-ref.html b/layout/reftests/columns/fieldset-columns-002-ref.html new file mode 100644 index 0000000000..b522d342bf --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> + <style> + div { + position: absolute; + width: 10px; + height: 10px; + top: 0; + background: blue; + } + fieldset { + width: 300px; + height: 200px; + border: 1px solid; + position: relative; + overflow: hidden; + } + </style> + <fieldset> + <legend>Legend<div style="left: 0px;"></div></legend> + <div style="left: 10px;"></div> + </fieldset> +</html> diff --git a/layout/reftests/columns/fieldset-columns-002.html b/layout/reftests/columns/fieldset-columns-002.html new file mode 100644 index 0000000000..661a90caac --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> + <style> + div { + position: absolute; + width: 10px; + height: 10px; + top: 0; + background: blue; + } + fieldset { + width: 300px; + height: 200px; + border: 1px solid; + position: relative; + overflow: hidden; + } + </style> + <fieldset style="columns: 1;"> + <!-- The position of <div>s should remain the same regardless of + the multicol style on fieldset. --> + <legend>Legend<div style="left: 0px;"></div></legend> + <div style="left: 10px;"></div> + </fieldset> +</html> diff --git a/layout/reftests/columns/fieldset-columns-003-ref.html b/layout/reftests/columns/fieldset-columns-003-ref.html new file mode 100644 index 0000000000..dc2e865577 --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> + fieldset.outer { + transform: rotate(180deg); + width: 100px; + height: 50px; + border: 1px solid blue; + } + + div.fixed { + position: fixed; + background: green; + } + </style> + + <fieldset class="outer"> + <legend>Legend</legend> + <div class="fixed">ABC</div> + </fieldset> +</html> diff --git a/layout/reftests/columns/fieldset-columns-003.html b/layout/reftests/columns/fieldset-columns-003.html new file mode 100644 index 0000000000..9fe4c9aec8 --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <style> + fieldset.outer { + column-count: 1; + transform: rotate(180deg); + width: 100px; + height: 50px; + border: 1px solid blue; + } + + div.fixed { + position: fixed; + background: green; + } + </style> + + <!-- All the children under the fieldset should be upside down + since 'transform' create a stacking context. --> + <fieldset class="outer"> + <legend>Legend</legend> + <div class="fixed">ABC</div> + </fieldset> +</html> diff --git a/layout/reftests/columns/fieldset-columns-004-ref.html b/layout/reftests/columns/fieldset-columns-004-ref.html new file mode 100644 index 0000000000..18cdcfc4ff --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-004-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <style> + fieldset.outer { + column-count: 1; + margin-left: 3px; + position: relative; + width: 100px; + height: 50px; + border: 1px solid blue; + } + + div.fixed { + position: absolute; + top: 0; + left: 0; + background: green; + } + </style> + + <!-- ABC should be inside the fieldset since 'transform' creates a stacking context. --> + <fieldset class="outer"> + <legend>Legend</legend> + <div class="fixed">ABC</div> + </fieldset> +</html> diff --git a/layout/reftests/columns/fieldset-columns-004.html b/layout/reftests/columns/fieldset-columns-004.html new file mode 100644 index 0000000000..3b8e5a50c4 --- /dev/null +++ b/layout/reftests/columns/fieldset-columns-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <style> + fieldset.outer { + column-count: 1; + transform: translateX(3px); + position: relative; + width: 100px; + height: 50px; + border: 1px solid blue; + margin: 0; + } + + div.fixed { + position: fixed; + top: 0; + left: 0; + background: green; + } + </style> + + <!-- ABC should be inside the fieldset since 'transform' creates a stacking context. --> + <fieldset class="outer"> + <legend>Legend</legend> + <div class="fixed">ABC</div> + </fieldset> +</html> diff --git a/layout/reftests/columns/first-line-first-letter-ref.html b/layout/reftests/columns/first-line-first-letter-ref.html new file mode 100644 index 0000000000..bdf5189772 --- /dev/null +++ b/layout/reftests/columns/first-line-first-letter-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> + +<style> +div { + border: 1px solid red; + width: 400px; +} +div::first-letter { + font-size: 200%; +} +div::first-line { + color: blue; +} +</style> + +<div>first line (blue)<br>second line</div> diff --git a/layout/reftests/columns/first-line-first-letter.html b/layout/reftests/columns/first-line-first-letter.html new file mode 100644 index 0000000000..1bbbc9aea6 --- /dev/null +++ b/layout/reftests/columns/first-line-first-letter.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> + +<style> +div { + column-count: 1; + border: 1px solid red; + width: 400px; +} +div::first-letter { + font-size: 200%; +} +div::first-line { + color: blue; +} +</style> + +<div id="column">first line (blue)<br>second line</div> 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 0000000000..e7e99f70e7 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-1-ref.html @@ -0,0 +1,70 @@ +<!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; font: 20px/1 sans-serif;} + p { margin: 0; background:pink; } + .columns { + -webkit-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 0000000000..9f404eb0c2 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-1.html @@ -0,0 +1,57 @@ +<!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; font: 20px/1 sans-serif;} + 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; + 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 0000000000..52e31a35cc --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-2-ref.html @@ -0,0 +1,79 @@ +<!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; font: 20px/1 sans-serif; } + p { margin: 3px 0; background:pink; } + .no-border p { margin: 0; } + + .columns { + -webkit-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 0000000000..76b2680df3 --- /dev/null +++ b/layout/reftests/columns/margin-collapsing-bug616722-2.html @@ -0,0 +1,79 @@ +<!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; font: 20px/1 sans-serif; } + 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; + 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 0000000000..d6d7034b09 --- /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 0000000000..60aa2ea352 --- /dev/null +++ b/layout/reftests/columns/min-width-1a.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-count:2; column-gap:0; border:2px solid black; height:200px; } + div.gap { 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 0000000000..1deb4f0c84 --- /dev/null +++ b/layout/reftests/columns/min-width-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-width:200px; column-count:2; column-gap:0; border:2px solid black; height:200px; } + div.gap { 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 0000000000..09f5105dac --- /dev/null +++ b/layout/reftests/columns/min-width-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-width:100px; column-count:2; column-gap:0; border:2px solid black; height:200px; } + div.gap { 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 0000000000..93e915da17 --- /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 0000000000..6d0a09b0f1 --- /dev/null +++ b/layout/reftests/columns/min-width-2.html @@ -0,0 +1,69 @@ +<!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 { + -webkit-column-rule:2px solid blue; + -o-column-rule:2px solid blue; + -ms-column-rule:2px solid blue; + column-rule:2px solid blue; + + -webkit-column-gap:0; + -o-column-gap:0; + -ms-column-gap:0; + column-gap:0; + + height:2.2em; + line-height:1em; + border:dotted; +} + +.col2 { + -webkit-column-count:2; + -o-column-count:2; + -ms-column-count:2; + column-count:2; +} + +.cw { + -webkit-column-width:4em; + -o-column-width:4em; + -ms-column-width:4em; + column-width:4em; +} + +.gap { + -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 0000000000..bc1a5ec605 --- /dev/null +++ b/layout/reftests/columns/positioning-transforms-bug1112501-ref.html @@ -0,0 +1,9 @@ +<html>
+<head>
+</head>
+<body>m
+<div style="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 0000000000..9c980044d5 --- /dev/null +++ b/layout/reftests/columns/positioning-transforms-bug1112501.html @@ -0,0 +1,9 @@ +<html>
+<head>
+</head>
+<body>m
+<div style="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 0000000000..2eae0681bb --- /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 0000000000..bc7968898b --- /dev/null +++ b/layout/reftests/columns/pref-width-1a.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-count:2; column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { 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 0000000000..ce5d29690d --- /dev/null +++ b/layout/reftests/columns/pref-width-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-count:2; column-width:100px; column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { 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 0000000000..a0d359dde4 --- /dev/null +++ b/layout/reftests/columns/pref-width-1c.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { column-count:2; column-width:100px; column-gap:0; float:left; border:2px solid black; height:200px; } + div.clear { clear:both; } + div.gap { 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.list b/layout/reftests/columns/reftest.list new file mode 100644 index 0000000000..160124167c --- /dev/null +++ b/layout/reftests/columns/reftest.list @@ -0,0 +1,50 @@ +== 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 +== column-box-alignment-rtl-2.html column-box-alignment-rtl-2-ref.html +== column-box-alignment-rtl-3.html column-box-alignment-rtl-3-ref.html +== column-box-alignment-rtl-4.html column-box-alignment-rtl-4-ref.html +== columnfill-balance.html columnfill-balance-ref.html +fuzzy-if(OSX,0-32,0-1000) == columnfill-auto.html columnfill-auto-ref.html +== columnfill-auto-2.html columnfill-auto-2-ref.html +== 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,0-142,0-276) == fieldset-columns-001.html fieldset-columns-001-ref.html +== fieldset-columns-002.html fieldset-columns-002-ref.html +== fieldset-columns-003.html fieldset-columns-003-ref.html +== fieldset-columns-004.html fieldset-columns-004-ref.html +== dynamic-change-with-overflow-1.html dynamic-change-with-overflow-1-ref.html +== dynamic-text-indent-1.html dynamic-text-indent-1-ref.html +== dynamic-text-indent-2.html dynamic-text-indent-2-ref.html +== break-avoid-line-position-1.html break-avoid-line-position-1-ref.html +== column-span-bidi-1.html column-span-bidi-1-ref.html +== first-line-first-letter.html first-line-first-letter-ref.html +== zero-height-nondirty-reflow.html zero-height-nondirty-reflow-ref.html diff --git a/layout/reftests/columns/zero-height-nondirty-reflow-ref.html b/layout/reftests/columns/zero-height-nondirty-reflow-ref.html new file mode 100644 index 0000000000..758fd31350 --- /dev/null +++ b/layout/reftests/columns/zero-height-nondirty-reflow-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Multi-column Layout Test: multi-column element with zero height</title> + <!-- + Based on + https://github.com/web-platform-tests/wpt/blob/1f346b050d87656a040fa4fdf9f99567164e2a2b/css/css-multicol/multicol-zero-height-001.xht + by Opera Software ASA. + --> + <style> + + html { overflow: hidden } /* suppress scrollbar reflows */ + + div#multi-column + { + height: 1px; + width: 200px; + display: inline-block; + background: #0c0; + } + </style> + </head> + <body style="height: 300px; width: 300px;"> + <p>Below should be a 1px tall and 200px wide green line:</p> + <div style="display: inline"> + <div id="multi-column"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/columns/zero-height-nondirty-reflow.html b/layout/reftests/columns/zero-height-nondirty-reflow.html new file mode 100644 index 0000000000..b530e9d64b --- /dev/null +++ b/layout/reftests/columns/zero-height-nondirty-reflow.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Multi-column Layout Test: multi-column element with zero height</title> + <!-- + Based on + https://github.com/web-platform-tests/wpt/blob/1f346b050d87656a040fa4fdf9f99567164e2a2b/css/css-multicol/multicol-zero-height-001.xht + by Opera Software ASA. + --> + <style> + + html { overflow: hidden } /* suppress scrollbar reflows */ + + div#multi-column + { + height: 0; + orphans: 1; + widows: 1; + width: 200px; + border-bottom:1px solid red; + + column-count: 10; + column-gap: 0; + display: inline-block; + } + + div#multi-column > div + { + background: #0c0; + float: left; + height: 10px; + width: 20px; + } + </style> + </head> + <body style="height: 300px; width: 400px;"> + <p>Below should be a 1px tall and 200px wide green line:</p> + <div style="display: inline"> + <div id="multi-column"> + <div></div> + </div> + </div> + <script> + + /* + * Cause the multi-column element to be reflowed without being dirty or any resize bits set. + */ + var e = document.body; + e.offsetWidth; + e.style.width = "300px"; + + </script> + </body> +</html> |