diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-multicol/table | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-multicol/table')
19 files changed, 392 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html b/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html new file mode 100644 index 0000000000..119b44607e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=605902"> +<div style="columns:3;"> + <div style="margin:8px; height:20px; break-after:column;"></div> + <div style="display:table-row-group;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html new file mode 100644 index 0000000000..9a55737a51 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=534751"> +<div id="multicol" style="columns:2; width:200px; line-height:20px;"> + <div style="display:table; border-spacing:1px;"> + <div style="display:table-cell; width:30px;"> + <br> + <br> + <br> + <br> + <br> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + var multicol = document.getElementById("multicol"); + assert_equals(multicol.offsetHeight, 61); + }, "Balanced multicol with table with border spacing"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html new file mode 100644 index 0000000000..434dc52ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#filling-columns"> +<div id="multicol" style="columns:2; line-height:100px;"> + <div style="display:table-row; height:4.9999px;"></div> + <div style="display:table-row;"> + <br> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(multicol.getBoundingClientRect().height, 100); + }, "If we have room for the line, we have room for all we need"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht new file mode 100644 index 0000000000..37f172d5e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht @@ -0,0 +1,12 @@ +<!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="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + </head> + <body> + <div><img src="../support/black20x20.png" width="120" height="20" alt="Image download support must be enabled" /></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht new file mode 100644 index 0000000000..405ace9234 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht @@ -0,0 +1,32 @@ +<!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 Multi-column Layout Test: column-count and table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + column-count: 6; + column-gap: 0em; + } + ]]></style> + </head> + <body> + + <div>P<br />A<br />S<br />S<br />E<br />D</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht new file mode 100644 index 0000000000..e028d1f797 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht @@ -0,0 +1,23 @@ +<!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="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + height: 360px; + width: 300px; + } + + img + img {padding-left: 110px;} + ]]></style> + + </head> + <body> + <div><img src="../support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /><img src="../support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht new file mode 100644 index 0000000000..1d3e44ea5f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 18em; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 2; + column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht new file mode 100644 index 0000000000..c66c475f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 0em; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 2; + column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.xht new file mode 100644 index 0000000000..b2fc3f8331 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.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>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model"/> +<link rel="match" href="multicol-table-cell-vertical-align-ref.xht"/> +<meta name="flags" content="ahem"/> +<meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which also use 'vertical-align: middle'. The 'vertical-align' property should still apply." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +div { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 20em; + display: table-cell; + + column-count: 2; + column-gap: 0; +} +]]></style> +</head> + +<body> + +<div> +aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht new file mode 100644 index 0000000000..6d20530b73 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht @@ -0,0 +1,30 @@ +<!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>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +div { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 5.5em; +} +div+div { + margin-top: 9em; +} +]]></style> +</head> + +<body> +<div></div> +<div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html new file mode 100644 index 0000000000..2e5a6ba460 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<p>You should see the word 'PASS' below.</p> +<div style="font-family:monospace;"> + <div style="float:left; overflow:hidden; width:1em;">P</div> + <div style="float:left; overflow:hidden; width:1em;">A</div> + <div style="float:left; overflow:hidden; width:1em;">S</div> + <div style="float:left; overflow:hidden; width:1em;">S</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html new file mode 100644 index 0000000000..9df85f0192 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="match" href="table-cell-as-multicol-ref.html"> +<p>You should see the word 'PASS' below.</p> +<div style="font-family:monospace;"> + <div style="display:table-cell; width:1em;">P</div> + <div style="display:table-cell; width:3em; column-count:3; column-gap:0; orphans:1; widows:1;"> + A<br> + S<br> + S<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html new file mode 100644 index 0000000000..f8f1c9e19f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; orphans:1; widows:1;"> + first column<br> + <br> + second column<br> + second column +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html new file mode 100644 index 0000000000..27227e96a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=348064"> +<link rel="match" href="table-cell-content-change-000-ref.html"> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; orphans:1; widows:1;"> + <div style="display:table-row;"> + first column + <div style="height:0.1em;"></div> + </div> + <div style="display:table-row;"> + second column + <div id="elm" style="display:none;">second column</div> + </div> +</div> +</body> +<script> + document.body.offsetTop; // trigger layout + document.getElementById('elm').style.display = 'block'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html new file mode 100644 index 0000000000..ad7ff706c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<p>Test changing the contents of a table cell, increasing column height</p> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="width:511px; overflow:hidden; background:yellow;"> + <div style="float:left; width:255px;"> + first column + </div> + <div style="float:left; border-left:1px solid; padding-left:5px;"> + second column<br> + second column + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html new file mode 100644 index 0000000000..5ecb7ec408 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=348064"> +<link rel="match" href="table-cell-content-change-001-ref.html"> +<p>Test changing the contents of a table cell, increasing column height</p> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; column-rule:1px solid; column-gap:11px; width:511px; background:yellow;"> + <div style="display:table-row;"> + first column + <div style="height:0.1em;"></div> + </div> + <div style="display:table-row;"> + second column + <div id="elm" style="display:none;">second column</div> + </div> +</div> +<script> + document.body.offsetTop; // trigger layout + document.getElementById('elm').style.display = 'block'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html new file mode 100644 index 0000000000..5cb9eaf564 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; width:50px; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html new file mode 100644 index 0000000000..b250841f92 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly - its height and max-height should be ignored, since the intrinsic size is larger"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; height:10px; max-height:10px; width:50px; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html new file mode 100644 index 0000000000..f4e52910f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly, and that it gets stretched by the specified height, which is larger than the intrinsic size"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; height:100px; width:50px; background:red;"> + <div style="height:150px; background:green;"></div> + </div> + <div style="margin-top:-25px; height:75px; background:green;"></div> +</div> |