diff options
Diffstat (limited to '')
128 files changed, 7123 insertions, 0 deletions
diff --git a/layout/reftests/writing-mode/tables/1259168-ref.html b/layout/reftests/writing-mode/tables/1259168-ref.html new file mode 100644 index 0000000000..d3ad50a52c --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="width: 300px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-slr.html b/layout/reftests/writing-mode/tables/1259168-slr.html new file mode 100644 index 0000000000..7e23c041d1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-slr.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: sideways-lr; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-srl.html b/layout/reftests/writing-mode/tables/1259168-srl.html new file mode 100644 index 0000000000..291a8d2afe --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-srl.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: sideways-rl; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-vlr.html b/layout/reftests/writing-mode/tables/1259168-vlr.html new file mode 100644 index 0000000000..cca077e63a --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-vlr.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: vertical-lr; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-vrl.html b/layout/reftests/writing-mode/tables/1259168-vrl.html new file mode 100644 index 0000000000..73af01a75c --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-vrl.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: vertical-rl; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html new file mode 100644 index 0000000000..5d5a430589 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html new file mode 100644 index 0000000000..4bfcc00770 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html new file mode 100644 index 0000000000..d1535ce443 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-lr; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html new file mode 100644 index 0000000000..30e8bdb8bf --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-rl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html new file mode 100644 index 0000000000..b621cde1a0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-lr; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html new file mode 100644 index 0000000000..82ea6e1520 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-rl; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html new file mode 100644 index 0000000000..3ce178442a --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 100px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html new file mode 100644 index 0000000000..99aeab7868 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains."> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + #col + { + height: 100px; + } + td + { + padding: 0; + width: 24px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html new file mode 100644 index 0000000000..adbbff9259 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains."> + <style type="text/css"> + .test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + #col + { + height: 100px; + } + td + { + padding: 0; + width: 24px; + } + #cell + { + background: blue; + color: blue; + } + #div1 + { + background: black; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html new file mode 100644 index 0000000000..30913cbf78 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell in the first row with specified height sets the height for the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height."> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td + { + padding: 0; + } + #cell + { + background: black; + height: 100px; + width: 24px; + + } + #div1 + { + background: blue; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html new file mode 100644 index 0000000000..0dd80b978b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell in the first row with specified height sets the height for the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height."> + <style type="text/css"> + .test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td + { + padding: 0; + } + #cell + { + background: blue; + height: 100px; + width: 24px; + color: blue; + } + #div1 + { + background: black; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html new file mode 100644 index 0000000000..f1575a900e --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 20px; + height: 100px; + } + div#blue-stripe {background-color: blue;} + div#reference {background-color: black;} + div.middle { width: 20px; height: 50px; } + div.bottom { background-color: orange; float: right; } + div.top { background-color: silver; float: left; } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <div class="stripe" id="reference"></div> + <div class="stripe"> + <div class="middle top"></div> + <div class="middle bottom"></div> + </div> + <div class="stripe" id="blue-stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html new file mode 100644 index 0000000000..a8a6a8f9fa --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + margin: 0; + table-layout: fixed; + height: 100px; + } + #cell1 + { + background: black; + height: 98px; + } + td + { + width: 20px; + padding: 0; + } + #cell2 + { + background: silver; + } + #cell3 + { + background: orange; + } + #div1 + { + background: blue; + width: 20px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <table> + <tr> + <td id="cell1" colspan="2"></td> + </tr> + <tr> + <td id="cell2"></td> + <td id="cell3"></td> + </tr> + </table> + <div id="div1"></div> + </test> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html new file mode 100644 index 0000000000..efa93023be --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + margin: 0; + table-layout: fixed; + height: 100px; + } + #cell1 + { + background: blue; + height: 98px; + } + td + { + width: 20px; + padding: 0; + } + #cell2 + { + background: silver; + } + #cell3 + { + background: orange; + } + #div1 + { + background: black; + width: 20px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <table> + <tr> + <td id="cell1" colspan="2"></td> + </tr> + <tr> + <td id="cell2"></td> + <td id="cell3"></td> + </tr> + </table> + <div id="div1"></div> + </test> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html new file mode 100644 index 0000000000..8f1efad6da --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + #div1 + { + width: 100px; + height: 300px; + } + #div1 > div + { + float: left; + } + .px50 + { + height: 50px; + } + #px100 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <div id="div1"> + <div class="px50">1</div> + <div class="px50">2</div> + <div id="px100">3</div> + <div class="px50">4</div> + <div class="px50">5</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html new file mode 100644 index 0000000000..1b2288946f --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-spacing: 0; + table-layout: fixed; + height: 300px; + } + #col1 + { + height: 50px; + } + td + { + padding: 0; + } + #cell1 + { + height: 50px; + } + #cell2 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <table> + <col id="col1"> + <col> + <col> + <col> + <col> + <col> + <tr> + <td>1</td> + <td id="cell1">2</td> + <td id="cell2" colspan="2">3</td> + <td>4</td> + <td>5</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html new file mode 100644 index 0000000000..bc22d3db6c --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-spacing: 0; + table-layout: fixed; + height: 300px; + } + #col1 + { + height: 50px; + } + td + { + padding: 0; + } + #cell1 + { + height: 50px; + } + #cell2 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <table> + <col id="col1"> + <col> + <col> + <col> + <col> + <col> + <tr> + <td>1</td> + <td id="cell1">2</td> + <td id="cell2" colspan="2">3</td> + <td>4</td> + <td>5</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html new file mode 100644 index 0000000000..42e28b5e39 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.stripe + { + height: 10px; + width: 100px; + } + div.blue {background-color: blue;} + div.orange {background-color: orange;} + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html new file mode 100644 index 0000000000..3ccbff1eda --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing)."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + background: blue; + border-collapse: separate; + border-spacing: 10px 0; + table-layout: fixed; + height: 130px; + } + td + { + background: blue; + border-top: 10px solid orange; + border-bottom: 10px solid orange; + width: 100px; + padding: 0; + } + #specified + { + height: 10px; + } + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <table> + <tr> + <td id="specified"></td> + <td></td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html new file mode 100644 index 0000000000..821e4c6820 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing)."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + background: blue; + border-collapse: separate; + border-spacing: 10px 0; + table-layout: fixed; + height: 130px; + } + td + { + background: blue; + border-top: 10px solid orange; + border-bottom: 10px solid orange; + width: 100px; + padding: 0; + } + #specified + { + height: 10px; + } + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <table> + <tr> + <td id="specified"></td> + <td></td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html new file mode 100644 index 0000000000..4313090884 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 200px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html new file mode 100644 index 0000000000..9cd003f81c --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: black; + padding: 0; + height: 50px; + width: 24px; + } + #div1 + { + background: blue; + width: 24px; + } + #div1, table + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td>X</td> + <td>X</td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html new file mode 100644 index 0000000000..b5b3e30027 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + padding: 0; + height: 50px; + width: 24px; + color: blue; + } + #div1 + { + background: black; + width: 24px; + } + #div1, table + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td>X</td> + <td>X</td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html new file mode 100644 index 0000000000..89ca8ffaff --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + padding: 1em; + } + div.textContainer + { + height: 100px; + border: 1px solid blue; + margin: 2px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <div class="textContainer">FillerTextFillerTextFillerTextFiller</div> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <div class="textContainer" id="hidden">FillerTextFillerTextFillerTextFiller</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html new file mode 100644 index 0000000000..5d26b97281 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + margin: 1em; + } + table + { + table-layout: fixed; + height: 100px; + } + td + { + border: 1px solid blue; + height: 100px; + padding: 0px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html new file mode 100644 index 0000000000..639103d158 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-rl; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + margin: 1em; + } + table + { + table-layout: fixed; + height: 100px; + } + td + { + border: 1px solid blue; + height: 100px; + padding: 0px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html new file mode 100644 index 0000000000..db95aef2f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; text-orientation: sideways-right; } + div.stripe + { + width: 2em; + line-height: 2em; + height: 200px; + } + div.blue {background-color: blue; } + div.black {background-color: black;} + span.text { position: relative; top: 100px; white-space: pre;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <div class="blue stripe"></div> + <div class="blue stripe"><span class="text">Filler Text Filler Text Filler Text</span></div> + <div class="blue stripe"></div> + <div class="black stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html new file mode 100644 index 0000000000..b33feafb5d --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Subsequent rows in fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + text-orientation: sideways-right; + } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + color: blue; + padding: 0; + width: 2em; + } + #overflow + { + color: black; + overflow: visible; + white-space: pre; + } + #div1 + { + background: black; + width: 2em; + } + table, .row1 + { + height: 100px; + } + .row2, #div1 + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <table> + <tr> + <td class="row1"></td> + <td class="row1"></td> + </tr> + <tr> + <td></td> + <td id="overflow">Filler Text Filler Text Filler Text</td> + </tr> + <tr> + <td class="row2"></td> + <td class="row2"></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html new file mode 100644 index 0000000000..c608c51199 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Subsequent rows in fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout."> + <style type="text/css"> + div.test { + writing-mode: vertical-rl; + text-orientation: sideways-right; + } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + color: blue; + padding: 0; + width: 2em; + } + #overflow + { + color: black; + overflow: visible; + white-space: pre; + } + #div1 + { + background: black; + width: 2em; + } + table, .row1 + { + height: 100px; + } + .row2, #div1 + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <div id="div1"></div> + <table> + <tr> + <td class="row1"></td> + <td class="row1"></td> + </tr> + <tr> + <td></td> + <td id="overflow">Filler Text Filler Text Filler Text</td> + </tr> + <tr> + <td class="row2"></td> + <td class="row2"></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html new file mode 100644 index 0000000000..52e387c9f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 50px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html new file mode 100644 index 0000000000..ef25ceedc8 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #col + { + height: 50px; + } + #cell + { + background: black; + height: 175px; + width: 24px; + } + #div1 + { + background: blue; + width: 24px; + height: 50px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html new file mode 100644 index 0000000000..e443494973 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #col + { + height: 50px; + } + #cell + { + background: blue; + color: blue; + height: 175px; + width: 24px; + } + #div1 + { + background: black; + width: 24px; + height: 50px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html new file mode 100644 index 0000000000..4d8f763866 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Specified column-group height is ignored in fixed table layout."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 50px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, #cell + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html new file mode 100644 index 0000000000..147c3db0fd --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Specified column-group height is ignored in fixed table layout."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 50px; + } + #cell + { + background: blue; + } + #div1 + { + background: black; + height: 100px; + } + #div1, #cell + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html new file mode 100644 index 0000000000..0f9a51ac82 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td { padding: 0px; } + #colgroup + { + height: 300px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + } + #div1, #cell + { + width: 24px; + } + #div1, #col + { + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col id="col"> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html new file mode 100644 index 0000000000..aac53493c6 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td { padding: 0px; } + #colgroup + { + height: 300px; + } + #cell + { + background: blue; + } + #div1 + { + background: black; + } + #div1, #cell + { + width: 24px; + } + #div1, #col + { + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col id="col"> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html new file mode 100644 index 0000000000..cbb026d34f --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 75px; + } + #cell + { + background: black; + height: 100px; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html new file mode 100644 index 0000000000..50f378d860 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 200px; + } + #colgroup + { + height: 75px; + } + #cell + { + background: blue; + height: 100px; + } + td + { + padding: 0; + } + #div1 + { + background: black; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html new file mode 100644 index 0000000000..ad4b6944e0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 75px; + } + td + { + background: black; + padding: 0; + height: 25px; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html new file mode 100644 index 0000000000..604dacbe49 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 75px; + } + td + { + background: blue; + padding: 0; + height: 25px; + } + #div1 + { + background: black; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html new file mode 100644 index 0000000000..237db1a831 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + padding-left: 4px; } + div.stripe + { + width: 24px; + margin-right: 4px; + margin-top: 172px; + height: 160px; + } + div.blue {background-color: blue;} + div.orange {background-color: orange; margin-left: 0px} + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html new file mode 100644 index 0000000000..d3d0e4d025 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html @@ -0,0 +1,90 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-collapse: separate; + border-spacing: 4px; + table-layout: fixed; + height: 420px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td { padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 0px : table border-top + + + 4px : 1st border-spacing + + + 80px : 1st column : (420 - 20) mult by (60% divided by 3) + + + 4px : 2nd border-spacing + + + 80px : 2nd column : (420 - 20) mult by (60% divided by 3) + + + 4px: 3rd border-spacing + ======== + 172px + */ + position: relative; + height: 160px; + /* + 420px : total height of table + - + 20px : 5 times vertical border-spacing + - + 0px : total of vertical table borders + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + <div id="reference">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html new file mode 100644 index 0000000000..b4d90e3a13 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html @@ -0,0 +1,90 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-collapse: separate; + border-spacing: 4px; + table-layout: fixed; + height: 420px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td { padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 0px : table border-top + + + 4px : 1st border-spacing + + + 80px : 1st column : (420 - 20) mult by (60% divided by 3) + + + 4px : 2nd border-spacing + + + 80px : 2nd column : (420 - 20) mult by (60% divided by 3) + + + 4px: 3rd border-spacing + ======== + 172px + */ + position: relative; + height: 160px; + /* + 420px : total height of table + - + 20px : 5 times vertical border-spacing + - + 0px : total of vertical table borders + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div id="reference">ref</div> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html new file mode 100644 index 0000000000..266caae5ee --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html @@ -0,0 +1,93 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: solid white; + border-width: 6px 0px; + border-collapse: separate; + border-spacing: 2px 4px; + table-layout: fixed; + height: 422px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td {padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing and the table + border-left separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 6px : table border-left + + + 2px : 1st border-spacing + + + 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 2nd border-spacing + + + 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 3rd border-spacing + ========= + 172px + */ + position: relative; + height: 160px; + /* + 422px : total height of table + - + 12px : total height of vertical borders of table + - + 10px : 5 times vertical border-spacing + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + <div id="reference">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html new file mode 100644 index 0000000000..7b3f3f5170 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html @@ -0,0 +1,94 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: solid white; + border-width: 6px 0px; + border-collapse: separate; + border-spacing: 2px 4px; + table-layout: fixed; + height: 422px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td {padding: 0px;} + td { width: 24px; } + div#reference + { + background-color: blue; + color: blue; + width: 24px; + top: 172px; + /* + 3 vertical border-spacing and the table + border-left separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 6px : table border-left + + + 2px : 1st border-spacing + + + 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 2nd border-spacing + + + 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 3rd border-spacing + ========= + 172px + */ + position: relative; + height: 160px; + /* + 422px : total height of table + - + 12px : total height of vertical borders of table + - + 10px : 5 times vertical border-spacing + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div id="reference">ref</div> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html new file mode 100644 index 0000000000..67214d000b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 52px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 8px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 88px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html new file mode 100644 index 0000000000..e929c92b25 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html @@ -0,0 +1,140 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-021-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and borders or cell spacing." + http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout + So, + 533px : total table height + - + 58px : total vertical border height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 22%; + /* 400px multiplied by 22% = 88px */ + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 100% - (13% + 22% + 31%) == 34% for last column + */ + } + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + ======= + 111px + */ + position: relative; + height: 88px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 214px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 88px : height of second column + + + 15px : 3rd border-spacing + ======= + 214px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td></td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html new file mode 100644 index 0000000000..0486684b93 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html @@ -0,0 +1,140 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-021-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and borders or cell spacing." + http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout + So, + 533px : total table height + - + 58px : total vertical border height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 22%; + /* 400px multiplied by 22% = 88px */ + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 100% - (13% + 22% + 31%) == 34% for last column + */ + } + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + div {padding: 0px; } + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + right: 48px; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + ======= + 111px + */ + position: relative; + height: 88px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + color: orange; + top: 214px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 88px : height of second column + + + 15px : 3rd border-spacing + ======= + 214px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html new file mode 100644 index 0000000000..febe38ac47 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 52px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 8px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 100px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + div.lime + { + height: 124px; + background-color: lime; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html new file mode 100644 index 0000000000..cfeef6be81 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html @@ -0,0 +1,170 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-022-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 533px : total table height + - + 58px : total vertical border-spacing height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 300px - (52px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px border-spacing + ====== + 111px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 226px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + ======= + 226px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + right: 72px; + color: lime; + top: 365px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + + + 124px : height of third column + + + 15px : 4th border-spacing + ======= + 365px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html new file mode 100644 index 0000000000..c26b0938fc --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html @@ -0,0 +1,170 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-022-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 533px : total table height + - + 58px : total vertical border-spacing height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 300px - (52px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + right: 72px; + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 48px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px border-spacing + ====== + 111px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 24px; + color: orange; + top: 226px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + ======= + 226px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + color: lime; + top: 365px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + + + 124px : height of third column + + + 15px : 4th border-spacing + ======= + 365px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html new file mode 100644 index 0000000000..4211763ab4 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 34px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 11px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 100px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + div.lime + { + height: 124px; + background-color: lime; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html new file mode 100644 index 0000000000..57eed6640d --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-023-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + body + { + margin: 8px; + height: 640px; + } + table + { + border: white solid; + border-width: 11px 0px; /* vertical table border height is 22px total */ + border-collapse: separate; + border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ + table-layout: fixed; + height: 80%; /* 640px mult by 80% == 512px */ + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 512px : total table height + - + 90px : total vertical border-spacing height + - + 22px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 400px - (52px + 100px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + right: 24px; + color: olive; + top: 99px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + ======= + 99px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 217px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + ======= + 217px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + right: 72px; + color: lime; + top: 359px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + + + 124px : height of third column + + + 18px : 4th border-spacing + ======= + 359px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html new file mode 100644 index 0000000000..3f6b042d8b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-023-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + body + { + margin: 8px; + height: 640px; + } + table + { + border: white solid; + border-width: 11px 0px; /* vertical table border height is 22px total */ + border-collapse: separate; + border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ + table-layout: fixed; + height: 80%; /* 640px mult by 80% == 512px */ + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 512px : total table height + - + 90px : total vertical border-spacing height + - + 22px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 400px - (52px + 100px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ + right: 72px; + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + right: 48px; + color: olive; + top: 99px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + ======= + 99px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 24px; + color: orange; + top: 217px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + ======= + 217px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + color: lime; + top: 359px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + + + 124px : height of third column + + + 18px : 4th border-spacing + ======= + 359px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html new file mode 100644 index 0000000000..172b85ac9a --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.square + { + width: 100px; + height: 100px; + } + div.green + { + background-color: green; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="green square"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html new file mode 100644 index 0000000000..530eeee5aa --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.htm"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + height: 50%; + } + td#left-red-cell, td#right-red-cell {background-color: red;} + td {padding: 25px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="left-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="right-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html new file mode 100644 index 0000000000..26ffd948b7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + height: 50%; + } + td#left-red-cell, td#right-red-cell {background-color: red;} + td {padding: 25px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="left-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="right-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html new file mode 100644 index 0000000000..5abcba40f0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html new file mode 100644 index 0000000000..bd4b2438bc --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html new file mode 100644 index 0000000000..120475baa3 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 24px;} + td#bottom-red-cell {border-top: red solid 25px;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html new file mode 100644 index 0000000000..bd30dacef1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 24px;} + td#bottom-red-cell {border-top: red solid 25px;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html new file mode 100644 index 0000000000..9837521763 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 15px; + border-bottom: green solid 15px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 10px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html new file mode 100644 index 0000000000..f975ed45fd --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 15px; + border-bottom: green solid 15px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 10px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html new file mode 100644 index 0000000000..4b55f1f46e --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 16px; + border-bottom: green solid 16px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 15px;} + td#bottom-red-cell {border-top: red solid 16px;} + td {padding: 9px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html new file mode 100644 index 0000000000..08f7458d8b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 16px; + border-bottom: green solid 16px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 15px;} + td#bottom-red-cell {border-top: red solid 16px;} + td {padding: 9px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html new file mode 100644 index 0000000000..e68ff76429 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html new file mode 100644 index 0000000000..a88bfe0ccb --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html new file mode 100644 index 0000000000..047daac238 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html new file mode 100644 index 0000000000..cc9ea74c89 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht b/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht new file mode 100644 index 0000000000..499debaf14 --- /dev/null +++ b/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: yellow; + font: 1.25em/1 Ahem; + width: 21em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <!-- body of reference case rewritten by Jonathan Kew to use Ahem glyphs instead of images, + to reduce antialiasing fuzz in comparison with testcases --> + <div> + XXXX XXXX XXXX XXXX + X X X X X X + X X X X X X + XXXX XXXX XXXX XXXX + X X X X X + X X X X X + X X X XXXX XXXX + +</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/reftest.list b/layout/reftests/writing-mode/tables/reftest.list new file mode 100644 index 0000000000..6172de537b --- /dev/null +++ b/layout/reftests/writing-mode/tables/reftest.list @@ -0,0 +1,98 @@ +== vertical-table-1a.html vertical-table-1-ref.html +== vertical-table-1b.html vertical-table-1-ref.html +== vertical-table-2a.html vertical-table-2-ref.html +fuzzy-if(skiaContent,0-3,0-750) == vertical-table-2b.html vertical-table-2-ref.html +== vertical-table-rowspan-1.html vertical-table-rowspan-1-ref.html +== vertical-table-rowspan-2.html vertical-table-rowspan-2-ref.html +== vertical-table-colspan-1.html vertical-table-colspan-1-ref.html +== vertical-table-colspan-2.html vertical-table-colspan-2-ref.html +== vertical-table-specified-width-1.html vertical-table-specified-width-1-ref.html +asserts(1) == vertical-table-specified-width-2.html vertical-table-specified-width-2-ref.html # bug 1179741 +fuzzy-if(cocoaWidget,0-141,0-24) == vertical-border-collapse-1.html vertical-border-collapse-1-ref.html +fuzzy-if(cocoaWidget,0-141,0-24) == vertical-border-collapse-2.html vertical-border-collapse-2-ref.html + +== fixed-table-layout-002-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-003-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-004-vlr.html fixed-table-layout-004-ref.html +== fixed-table-layout-005-vlr.html fixed-table-layout-005-ref.html +== fixed-table-layout-006-vlr.html fixed-table-layout-006-ref.html +== fixed-table-layout-007-vlr.html fixed-table-layout-007-ref.html +== fixed-table-layout-009-vlr.html fixed-table-layout-009-ref.html +fuzzy-if(Android,0-255,0-400) == fixed-table-layout-010-vlr.html fixed-table-layout-010-ref.html +== fixed-table-layout-012-vlr.html fixed-table-layout-012-ref.html +== fixed-table-layout-013-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-014-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-015-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-016-vlr.html fixed-table-layout-002-ref.html +fuzzy-if(skiaContent,0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-017-vlr.html fixed-table-layout-017-ref.html +fuzzy-if(skiaContent,0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-018-vlr.html fixed-table-layout-017-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-021-vlr.html fixed-table-layout-021-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-022-vlr.html fixed-table-layout-022-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-023-vlr.html fixed-table-layout-023-ref.html +== fixed-table-layout-025-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-026-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-027-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-028-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-029-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-030-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-031-vlr.html fixed-table-layout-025-ref.html + +== fixed-table-layout-002-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-003-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-004-vrl.html fixed-table-layout-004-ref.html +== fixed-table-layout-005-vrl.html fixed-table-layout-005-ref.html +== fixed-table-layout-006-vrl.html fixed-table-layout-006-ref.html +== fixed-table-layout-007-vrl.html fixed-table-layout-007-ref.html +== fixed-table-layout-009-vrl.html fixed-table-layout-009-ref.html +fuzzy-if(Android,0-255,0-400) == fixed-table-layout-010-vrl.html fixed-table-layout-010-ref.html +== fixed-table-layout-012-vrl.html fixed-table-layout-012-ref.html +== fixed-table-layout-013-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-014-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-015-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-016-vrl.html fixed-table-layout-002-ref.html +fuzzy-if(skiaContent,0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-017-vrl.html fixed-table-layout-017-ref.html +fuzzy-if(skiaContent,0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-018-vrl.html fixed-table-layout-017-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-021-vrl.html fixed-table-layout-021-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-022-vrl.html fixed-table-layout-022-ref.html +fuzzy-if(skiaContent,0-1,0-102) == fixed-table-layout-023-vrl.html fixed-table-layout-023-ref.html +== fixed-table-layout-025-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-026-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-027-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-028-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-029-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-030-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-031-vrl.html fixed-table-layout-025-ref.html + +== s72-border-spacing-002.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-003.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-004.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-005.xht s72-border-spacing-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-002.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-003.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-004.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-005.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-006.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-007.xht multicol-count-002-ref.xht + +fuzzy-if(Android,0-255,0-38) == table-caption-top-1.html table-caption-top-1-ref.html +fuzzy-if(Android,0-255,0-38) == table-caption-bottom-1.html table-caption-bottom-1-ref.html +fuzzy-if(Android,0-244,0-27) == table-caption-left-1.html table-caption-left-1-ref.html +fuzzy-if(Android,0-244,0-27) == table-caption-right-1.html table-caption-right-1-ref.html + +== border-collapse-bevels-1a.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1b.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1c.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1d.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1e.html border-collapse-bevels-1-ref.html + +== vertical-rl-row-progression-1a.html vertical-rl-row-progression-1-ref.html +== vertical-rl-row-progression-1b.html vertical-rl-row-progression-1-ref.html +== sideways-lr-row-progression-1a.html sideways-lr-row-progression-1-ref.html +== sideways-lr-row-progression-1b.html sideways-lr-row-progression-1-ref.html +== sideways-rl-row-progression-1a.html sideways-rl-row-progression-1-ref.html +== sideways-rl-row-progression-1b.html sideways-rl-row-progression-1-ref.html + +random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1259168-ref.html 1259168-vrl.html # Bug 1392106 +random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1259168-ref.html 1259168-vlr.html # Bug 1392106 +random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1259168-ref.html 1259168-srl.html # Bug 1392106 +random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1259168-ref.html 1259168-slr.html # Bug 1392106 diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht new file mode 100644 index 0000000000..958ba060f1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <meta name="flags" content="image" /> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="100" height="200" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht new file mode 100644 index 0000000000..3e8ba5d5e0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht @@ -0,0 +1,144 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-rl' table</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <!-- + To be replaced with + <link rel="match" href="border-spacing-wm-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table right padding (physical table top padding) and rightmost cells and b) inter-column spacing and c) spacing between leftmost cells and logical table left padding (physical table bottom padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */ + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + height: 0.5em; + padding: 0em; + width: 1em; + } + + /* + + 0px width of nth row 20px TOP + | | + =================================== 0x (0em) ||| + | table padding-top 25px (1.25em) | ||| + | with red background=color | \ ||| / + | with red background=color | \ / + | with red background=color | \ / + | with red background=color | v + =================================== 25px (1.25em) + |logical righ border-spacing: 10px| + | with red background=color | + =================================== 35px (1.75em) + | height of 1st td 10px (0.5em) | ||| + | with red background=color | ||| + =================================== 45px (2.25em) \ ||| / + |inter-column spacing 10px (0.5em)| \ / + | with red background=color | \ / + =================================== 55px (2.75em) v + | height of 2nd td 10px (0.5em) | + | with red background=color | + =================================== 65px (3.25em) + |logical left border-spacing: 10px| ||| + | with red background=color | ||| + =================================== 75px (3.75em) \ ||| / + |tble padding-bottom 25px (1.25em)| \ / + | with red background=color | \ / + | with red background=color | v + | with red background=color | + | with red background=color | + =================================== 100px (5em) BOTTOM + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht new file mode 100644 index 0000000000..eba0a9dd51 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht @@ -0,0 +1,144 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-lr' table</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <!-- + To be replaced with + <link rel="match" href="border-spacing-wm-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table left padding (physical table top padding) and leftmost cells and b) inter-column spacing and c) spacing between rightmost cells and logical table right padding (physical table bottom padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */ + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + height: 0.5em; + padding: 0em; + width: 1em; + } + + /* + + 0px width of nth row 20px TOP + | | + =================================== 0x (0em) ||| + | table padding-top 25px (1.25em) | ||| + | with red background=color | \ ||| / + | with red background=color | \ / + | with red background=color | \ / + | with red background=color | v + =================================== 25px (1.25em) + |logical left border-spacing: 10px| + | with red background=color | + =================================== 35px (1.75em) + | height of 1st td 10px (0.5em) | ||| + | with red background=color | ||| + =================================== 45px (2.25em) \ ||| / + |inter-column spacing 10px (0.5em)| \ / + | with red background=color | \ / + =================================== 55px (2.75em) v + | height of 2nd td 10px (0.5em) | + | with red background=color | + =================================== 65px (3.25em) + |logical righ border-spacing: 10px| ||| + | with red background=color | ||| + =================================== 75px (3.75em) \ ||| / + |tble padding-bottom 25px (1.25em)| \ / + | with red background=color | \ / + | with red background=color | v + | with red background=color | + | with red background=color | + =================================== 100px (5em) BOTTOM + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht new file mode 100644 index 0000000000..db81c77c87 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht @@ -0,0 +1,124 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-rl' table</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that second value of 'border-spacing' represents, from right to left, a) spacing between logical table top padding (physical table right padding) and topmost cells and b) inter-row spacing and c) between bottommost cells and logical table bottom padding (physical table left padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */ + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + height: 1em; + padding: 0em; + width: 0.5em; + } + + /* + + 0px 25px 35px 45px 55px 65px 75px 100px + | padding-left | left | 2nd | middle | 1st | right | padding-right| + | of table | vert. | right | vert. | right | vert. | of table | + | | border | most | border | most | border | | + | | spacing| row | spacing| row | spacing| | +20| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +40| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +60| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +80| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +00| | | | | | | | +px| | | | | | | | + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht new file mode 100644 index 0000000000..0fd61d0f22 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht @@ -0,0 +1,124 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-lr' table</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that second value of 'border-spacing' represents, from left to right, a) spacing between logical table top padding (physical table left padding) and topmost cells and b) inter-row spacing and c) spacing between bottommost cells and logical table bottom padding (physical table right padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */ + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + height: 1em; + padding: 0em; + width: 0.5em; + } + + /* + + 0px 25px 35px 45px 55px 65px 75px 100px + | padding-left | left | 2nd | middle | 1st | right | padding-right| + | of table | vert. | row | vert. | right | vert. | of table | + | | border | | border | most | border | | + | | spacing| | spacing| row | spacing| | +20| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +40| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +60| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +80| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +00| | | | | | | | +px| | | | | | | | + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html new file mode 100644 index 0000000000..930ce16dd9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Reference: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table> + <tr> + <td rowspan=2> + <td class="e"> + <td rowspan=2 colspan=2> + <td rowspan=3> + <td class="d"> + </tr> + <tr> + <td rowspan=2> + <td class="c"> + </tr> + <tr> + <td class="b"> + <td class="f"> + <td class="g"> + <td rowspan=2> + </tr> + <tr> + <td class="a"> + <td colspan=3> + <td class="h"> + </tr> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html new file mode 100644 index 0000000000..68d15a91c9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells bottom-to-top (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-lr; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + </tr> + </thead> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + </tr> + </tfoot> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + </tr> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td class="h"> + <td colspan=3> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html new file mode 100644 index 0000000000..70172efb94 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells top-to-bottom (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-lr; + direction: rtl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + </tr> + </thead> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + </tr> + </tfoot> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + </tr> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td colspan=3> + <td class="h"> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html new file mode 100644 index 0000000000..64f29765e7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Reference: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="reference"> + <tr> + <td rowspan=2> + <td class="h"> + <td colspan=3"> + <td class="a"> + </tr> + <tr> + <td rowspan=3"> + <td class="g"> + <td class="f"> + <td rowspan=2"> + <td class="b"> + </tr> + <tr> + <td class="c"> + <td rowspan=2 colspan=2> + <td rowspan=2> + </tr> + <tr> + <td class="d"> + <td class="e"> + </tr> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html new file mode 100644 index 0000000000..c2096757f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + direction: ltr; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + </tr> + </thead> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + </tr> + </tfoot> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + </tr> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td class="h"> + <td colspan=3> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html new file mode 100644 index 0000000000..5ef6875511 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells bottom-to-top (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + direction: rtl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + </tr> + </thead> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + </tr> + </tfoot> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + </tr> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td colspan=3> + <td class="h"> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/support/ahem.css b/layout/reftests/writing-mode/tables/support/ahem.css new file mode 100644 index 0000000000..cf2cd818f4 --- /dev/null +++ b/layout/reftests/writing-mode/tables/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} diff --git a/layout/reftests/writing-mode/tables/support/swatch-green.png b/layout/reftests/writing-mode/tables/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/writing-mode/tables/support/swatch-green.png diff --git a/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html new file mode 100644 index 0000000000..ae36e72e88 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; +} +</style> +</head> +<body> + +<div class="h"> + <div class="t"></div> + <div class="c" style="width: 200px">table caption</div> +</div> + +<div class="h"> + <div class="t"></div> + <div class="c" style="width: 200px">table caption</div> +</div> + +<div class="vlr"> + <div class="t"></div> + <div class="c" style="height: 100px">table caption</div> +</div> + +<div class="vrl"> + <div class="t"></div> + <div class="c" style="height: 100px">table caption</div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-bottom-1.html b/layout/reftests/writing-mode/tables/table-caption-bottom-1.html new file mode 100644 index 0000000000..74cd13dd2a --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-bottom-1.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: bottom; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/table-caption-left-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-left-1-ref.html new file mode 100644 index 0000000000..4e4f38a724 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-left-1-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; + vertical-align: top; +} +</style> +</head> +<body> + +<div class="h"> + <div class="c" style="display: inline-block; inline-size: min-content">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> + +<div class="h"> + <div class="c" style="display: inline-block; inline-size: min-content">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> + +<div class="vlr"> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> + +<div class="vlr"> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> + +<div class="vrl"> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> + +<div class="vrl"> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div> + <div class="t" style="display: inline-block"></div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-left-1.html b/layout/reftests/writing-mode/tables/table-caption-left-1.html new file mode 100644 index 0000000000..1096bcaeb3 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-left-1.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: left; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/table-caption-right-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-right-1-ref.html new file mode 100644 index 0000000000..7bbe524886 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-right-1-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; + vertical-align: top; +} +</style> +</head> +<body> + +<div class="h"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content">table caption</div> +</div> + +<div class="h"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content">table caption</div> +</div> + +<div class="vlr"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div> +</div> + +<div class="vlr"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: bottom">table caption</div> +</div> + +<div class="vrl"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div> +</div> + +<div class="vrl"> + <div class="t" style="display: inline-block"></div> + <div class="c" style="display: inline-block; inline-size: min-content; vertical-align: top">table caption</div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-right-1.html b/layout/reftests/writing-mode/tables/table-caption-right-1.html new file mode 100644 index 0000000000..e6a4cd7347 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-right-1.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: right; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html new file mode 100644 index 0000000000..ac90c6ec20 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; +} +</style> +</head> +<body> + +<div class="h"> + <div class="c" style="width: 200px">table caption</div> + <div class="t"></div> +</div> + +<div class="h"> + <div class="c" style="width: 200px">table caption</div> + <div class="t"></div> +</div> + +<div class="vlr"> + <div class="c" style="height: 100px">table caption</div> + <div class="t"></div> +</div> + +<div class="vrl"> + <div class="c" style="height: 100px">table caption</div> + <div class="t"></div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-top-1.html b/layout/reftests/writing-mode/tables/table-caption-top-1.html new file mode 100644 index 0000000000..5955d01461 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-top-1.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: top; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html new file mode 100644 index 0000000000..30e67d7dda --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +tr:nth-child(2) > td { + height: 80px; +} +tr:nth-child(4) > td { + height: 120px; +} +col:nth-child(even) { + background: #ffc; +} +col:nth-child(odd) { + background: #cff; +} +col:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<col/><col/><col/><col/><col/> +<tr> <td rowspan=3> </td> <td colspan=3> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td colspan=2> </td> <td> </td> </tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html new file mode 100644 index 0000000000..599302ff79 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; + writing-mode: vertical-lr; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +td.w1 { + height: 80px; +} +td.w2 { + height: 120px; +} +tr:nth-child(even) { + background: #ffc; +} +tr:nth-child(odd) { + background: #cff; +} +tr:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<tr><td colspan=3> </td> <td> </td> </tr> +<tr><td rowspan=3> </td><td class="w1"> </td><td> </td><td> </td> </tr> +<tr> <td> </td> <td> </td><td rowspan=2> </td> </tr> +<tr> <td> </td> <td> </td> </tr> +<tr><td> </td> <td> </td> <td> </td><td class="w2"> </td></tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html new file mode 100644 index 0000000000..a74ee00655 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +tr:nth-child(2) > td { + height: 80px; +} +tr:nth-child(4) > td { + height: 120px; +} +col:nth-child(even) { + background: #ffc; +} +col:nth-child(odd) { + background: #cff; +} +col:nth-child(5) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<col/><col/><col/><col/><col/> +<tr> <td> </td> <td colspan=3> </td> <td rowspan=3> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td colspan=2 style="background:#cff"> </td> <td> </td> <td> </td> </tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html new file mode 100644 index 0000000000..9c602ebdbb --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; + writing-mode: vertical-rl; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +td.w1 { + height: 80px; +} +td.w2 { + height: 120px; +} +tr:nth-child(even) { + background: #ffc; +} +tr:nth-child(odd) { + background: #cff; +} +tr:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<tr><td colspan=3> </td> <td> </td> </tr> +<tr><td rowspan=3> </td><td class="w1"> </td><td> </td><td> </td> </tr> +<tr> <td> </td> <td> </td><td rowspan=2> </td> </tr> +<tr> <td> </td> <td> </td> </tr> +<tr><td> </td> <td> </td> <td> </td><td class="w2"> </td></tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html new file mode 100644 index 0000000000..60afb00d9b --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Reference: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="reference"> + <tr> + <td rowspan=2> + <td class="h"> + <td colspan=3"> + <td class="a"> + <tr> + <td rowspan=3"> + <td class="g"> + <td class="f"> + <td rowspan=2"> + <td class="b"> + <tr> + <td class="c"> + <td rowspan=2 colspan=2> + <td rowspan=2> + <tr> + <td class="d"> + <td class="e"> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html new file mode 100644 index 0000000000..6b0929495f --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + <tr> + <td class="g"> + <tbody> + <tr> + <td class="h"> + <td colspan=3> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html new file mode 100644 index 0000000000..69f4f52e6c --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells bottom-to-top (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table dir=rtl class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + <tr> + <td class="g"> + <tbody> + <tr> + <td colspan=3> + <td class="h"> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-1-ref.html new file mode 100644 index 0000000000..093acf6b03 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r2c1"></td> +</tr> +<tr> + <td id="r1c2"></td> + <td id="r2c2"></td> +</tr> +<tr> + <td id="r1c3"></td> + <td id="r2c3"></td> +</tr> +<tr> + <td id="r1c4"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1a.html b/layout/reftests/writing-mode/tables/vertical-table-1a.html new file mode 100644 index 0000000000..aea9a2198d --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1a.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1b.html b/layout/reftests/writing-mode/tables/vertical-table-1b.html new file mode 100644 index 0000000000..8acd2ab109 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1b.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-2-ref.html new file mode 100644 index 0000000000..2e5b9fb2a1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r2c1"></td> +</tr> +<tr> + <td id="r1c2"></td> + <td id="r2c2"></td> +</tr> +<tr> + <td id="r1c3"></td> + <td id="r2c3"></td> +</tr> +<tr> + <td id="r1c4"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2a.html b/layout/reftests/writing-mode/tables/vertical-table-2a.html new file mode 100644 index 0000000000..e735076177 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2a.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2b.html b/layout/reftests/writing-mode/tables/vertical-table-2b.html new file mode 100644 index 0000000000..b075388172 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2b.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html new file mode 100644 index 0000000000..3c902df9db --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r2 c1"></td> + <td class="r3 c1" rowspan=4></td> +</tr> +<tr> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c3"></td> + <td class="r2 c3" rowspan=2></td> +</tr> +<tr> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html new file mode 100644 index 0000000000..b93851d16c --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r1 c3"></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c1"></td> + <td class="r2 c2"></td> + <td class="r2 c3" colspan=2></td> +</tr> +<tr> + <td class="r3 c1" colspan=4></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html new file mode 100644 index 0000000000..47f7ed04d6 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1" rowspan=4></td> + <td class="r2 c1"></td> + <td class="r1 c1" rowspan=2></td> +</tr> +<tr> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r2 c3" rowspan=2></td> + <td class="r1 c3"></td> +</tr> +<tr> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html new file mode 100644 index 0000000000..eb840c5d71 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r1 c3"></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c1"></td> + <td class="r2 c2"></td> + <td class="r2 c3" colspan=2></td> +</tr> +<tr> + <td class="r3 c1" colspan=4></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html new file mode 100644 index 0000000000..fd7a6738aa --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r3 c1"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r2 c2"></td> + <td class="r3 c2"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3></td> +</tr> +<tr> + <td class="r1 c4"></td> + <td class="r2 c4" colspan=2></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html new file mode 100644 index 0000000000..bc368cce6d --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r1 c2"></td> + <td class="r1 c3" rowspan=3></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c2"></td> + <td class="r2 c4" rowspan=2></td> +</tr> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html new file mode 100644 index 0000000000..2c1b7d9774 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; } +.r2 { width: 100px; } +.r3 { width: 20px; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2 style="background: #080;"></td> + <td class="r3 c1" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c2" style="background: #800;"></td> + <td class="r2 c2" style="background: #080;"></td> + <td class="r3 c2" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3 style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c4" style="background: #800;"></td> + <td class="r2 c4" colspan=2 style="background: #008;"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html new file mode 100644 index 0000000000..da4cc58929 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> + <td class="r3 c3" rowspan=3></td> + <td class="r3 c4" rowspan=2></td> +</tr> +<tr> + <td class="r2 c1" rowspan=2></td> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html new file mode 100644 index 0000000000..03820b7f6f --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { border-spacing: 0; } +td { padding: 0; } +.r1 { width: 80px; background: #800; } +.r2 { width: 130px; background: #080; } +.r3 { width: 50px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r3 c1"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r2 c2"></td> + <td class="r3 c2"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3></td> +</tr> +<tr> + <td class="r1 c4"></td> + <td class="r2 c4" colspan=2></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html new file mode 100644 index 0000000000..f8aaaf88a9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { + writing-mode: vertical-lr; + border-spacing: 0; + width: 260px; /* natural width would be 170px; this adds 30px to each row */ +} +td { padding: 0; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r1 c2"></td> + <td class="r1 c3" rowspan=3></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c2"></td> + <td class="r2 c4" rowspan=2></td> +</tr> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html new file mode 100644 index 0000000000..cbd125d8dd --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { border-spacing: 0; } +td { padding: 0; } +.r1 { width: 80px; } +.r2 { width: 130px; } +.r3 { width: 50px; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2 style="background: #080;"></td> + <td class="r3 c1" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c2" style="background: #800;"></td> + <td class="r2 c2" style="background: #080;"></td> + <td class="r3 c2" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3 style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c4" style="background: #800;"></td> + <td class="r2 c4" colspan=2 style="background: #008;"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html new file mode 100644 index 0000000000..6d85079dde --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { + writing-mode: vertical-rl; + border-spacing: 0; + width: 260px; /* natural width would be 170px; this adds 30px to each row */ +} +td { padding: 0; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> + <td class="r3 c3" rowspan=3></td> + <td class="r3 c4" rowspan=2></td> +</tr> +<tr> + <td class="r2 c1" rowspan=2></td> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-002.xht b/layout/reftests/writing-mode/tables/wm-row-progression-002.xht new file mode 100644 index 0000000000..4749c5f451 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-002.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td>JJ K L M</td></tr> + +<!-- The left-most "S" --> + <tr><td>N O Q RRR</td><td>SS T U V</td><td>WW X Y Z</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td>ee f g hh</td><td>jj kk</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-003.xht b/layout/reftests/writing-mode/tables/wm-row-progression-003.xht new file mode 100644 index 0000000000..dbb7cf4fb5 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-003.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - line boxes progression</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc..." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ </td></tr> + +<!-- The "A" --> + <tr><td>KKK L M NNN</td><td>OO Q R SS</td><td>TT UU</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td>a b c dd</td><td> e f g hh</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td>q r s tt</td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-004.xht b/layout/reftests/writing-mode/tables/wm-row-progression-004.xht new file mode 100644 index 0000000000..7178cc1342 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-004.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression and colspan</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td>JJ K L M</td></tr> + +<!-- The left-most "S" --> + <tr><td colspan="2">N OO Q R S T UUUU</td><td>WW X Y Z</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td colspan="2">eeff g h jjjj</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-005.xht b/layout/reftests/writing-mode/tables/wm-row-progression-005.xht new file mode 100644 index 0000000000..0d3abf6539 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-005.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - table rows progression and colspan</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ </td></tr> + +<!-- The "A" --> + <tr><td colspan="2">KKKOO L Q M R NNNSS</td><td>TT UU</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td colspan="2">a b c d e f gggg</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td>q r s tt</td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-006.xht b/layout/reftests/writing-mode/tables/wm-row-progression-006.xht new file mode 100644 index 0000000000..32d3b089d8 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-006.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression and rowspan</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rowspanned cells in a table are handled according to a right-to-left direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td rowspan="2">JJ K L M WW X Y Z</td></tr> + +<!-- The left-most "S" --> + <tr><td>N O Q RRR</td><td>SS T U V</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td rowspan="2" class="left-most-cell">ee f g hh r s t uu</td><td>jj kk</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-007.xht b/layout/reftests/writing-mode/tables/wm-row-progression-007.xht new file mode 100644 index 0000000000..5280f845db --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-007.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - table rows progression and rowspan</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rowspanned cells in a table are handled according to a left-to-right direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell" rowspan="2">JJ TT UU</td></tr> + +<!-- The "A" --> + <tr><td>KKK L M NNN</td><td>OO Q R SS</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td rowspan="2">a b c dd q r s tt</td><td> e f g hh</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file |
