diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/tables')
63 files changed, 1894 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml Binary files differnew file mode 100644 index 0000000000..7d21ce1180 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml Binary files differnew file mode 100644 index 0000000000..8610f37938 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml Binary files differnew file mode 100644 index 0000000000..3f02219973 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml new file mode 100644 index 0000000000..6af44139a0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>UA style for form in table elements - XHTML</title> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2" /> + <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <table><form></form></table> + <table><thead><form></form></thead></table> + <table><tbody><form></form></tbody></table> + <table><tfoot><form></form></tfoot></table> + <table><tr><form></form></tr></table> + <script> + for (const form of document.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "block"); + }, `Computed display of form inside ${form.parentNode.nodeName} in xhtml should be 'block'`); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html new file mode 100644 index 0000000000..611c8305b9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>UA style for form in table elements</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .block { display: block !important } +</style> +<div id="display"> + <table><form></form></table> + <table><thead><form></form></thead></table> + <table><tbody><form></form></tbody></table> + <table><tfoot><form></form></tfoot></table> + <table><tr><form></form></tr></table> +</div> +<div id="important"> + <table><form class="block"></form></table> + <table><thead><form class="block"></form></thead></table> + <table><tbody><form class="block"></form></tbody></table> + <table><tfoot><form class="block"></form></tfoot></table> + <table><tr><form class="block"></form></tr></table> +</div> +<script> + for (const form of display.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "none"); + }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none'`); + } + for (const form of important.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "none"); + }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none' (!important UA style))`); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html new file mode 100644 index 0000000000..f06c3dc9b4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>UA style for hidden attribute on table elements</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<table hidden></table> +<table><caption hidden></caption></table> +<table><colgroup hidden></table> +<table><col hidden></table> +<table><thead hidden></table> +<table><tbody hidden></table> +<table><tfoot hidden></table> +<table><tr hidden></table> +<table><tr><td hidden></table> +<table><tr><th hidden></table> +<script> +const expectedDisplay = { + 'table': 'none', + 'caption': 'none', + 'colgroup': 'table-column-group', + 'col': 'table-column', + 'thead': 'table-header-group', + 'tbody': 'table-row-group', + 'tfoot': 'table-footer-group', + 'tr': 'table-row', + 'td': 'none', + 'th': 'none', +}; +for (const el of document.querySelectorAll("[hidden]")) { + test(function() { + const style = getComputedStyle(el); + assert_equals(style.display, expectedDisplay[el.localName]); + if (el instanceof HTMLTableElement || + el instanceof HTMLTableCaptionElement || + el instanceof HTMLTableCellElement) { + assert_equals(style.visibility, 'visible'); + } else { + assert_equals(style.visibility, 'collapse'); + } + }, `Computed display and visibility of ${el.localName}`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png Binary files differnew file mode 100644 index 0000000000..9bf59ebdf1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png Binary files differnew file mode 100644 index 0000000000..7902bc31e0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png Binary files differnew file mode 100644 index 0000000000..191e13ea11 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..a45f8111b4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html new file mode 100644 index 0000000000..54acff0350 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table attribute test</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + .div_tbl table { + width: 400px; + height: 300px; + border-spacing: 0px; + } + .div_tbl td { + padding: 0px; + } + .div_tbl th { + padding: 0px; + } + .div_200 { + height: 200px; + } +</style> + +<div id="div"> + <table id="table"> + <thead id="thead"> + <tr> + <th id="th">Month</th> + <th>Savings</th> + </tr> + </thead> + <tbody id="tbody"> + <tr id="tr"> + <td>January</td> + <td>$60</td> + </tr> + <tr> + <td id="td">February</td> + <td>$80</td> + </tr> + </tbody> + <tfoot id="tfoot"> + <tr> + <td>Sum</td> + <td>$140</td> + </tr> + </tfoot> + </table> +</div> + +<script> + +const ids = ["table", "thead", "tbody", "tfoot", "tr", "td", "th"]; +const alignIds = ["thead", "tbody", "tfoot", "tr", "td", "th"]; +const heightIds = ["tr", "td", "th"]; +const div = document.getElementById("div"); +const table = document.getElementById("table"); +const aligns = [ + ["center", "center"], + ["middle", "center"], + ["left", "left"], + ["right", "right"], + ["justify", "justify"] +]; + +function commonTest(id, attr, value, cssProp, expected) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + }); + elem.setAttribute(attr, value); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `${id} ${attr} attribute is correct`); +} + +function commonAlignTest(id, attr, value, cssProp, expected) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + }); + elem.setAttribute(attr, value); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `table ${id} align attribute ${value} is correct`); +} + +function commonHeightTest(id, attr, value, cssProp, expected, type="", divClass) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + div.classList.remove(divClass); + }); + elem.setAttribute(attr, value); + div.classList.add(divClass); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `${id} ${attr} attribute ${type} is correct`); +} + +// table#bordercolor +commonTest("table", "bordercolor", "red", "border-color", "rgb(255, 0, 0)"); +// table#cellspacing +commonTest("table", "cellspacing", "10", "border-spacing", "10px 10px", "10"); + +// {table, thead, body, tfoot, tr, td, th}#background +// {table, thead, body, tfoot, tr, td, th}#bgcolor +const url = new URL('/images/threecolors.png', window.location.href).href; +for (let id of ids) { + commonTest(id, "background", "/images/threecolors.png", "background-image", `url(\"${url}\")`); + + commonTest(id, "bgcolor", "red", "background-color", "rgb(255, 0, 0)"); +} + +// {thead, body, tfoot, tr, td, th}#align#{center, middle, left, right, justify} +for (let id of alignIds) { + for (let [value, expected] of aligns) { + commonAlignTest(id, "align", value, "text-align", expected); + } +} + +// {tr, td, th}#height#pixel +for (let id of heightIds) { + commonHeightTest(id, "height", "60", "height", "60px", "pixel", "div_tbl"); +} + +// {tr, td, th}#height#percentage +let tbl = document.createElement("table"); +tbl.innerHTML = '<tr id="table_tr"><th id="table_th"></th></tr><tr><td id="table_td"></td></tr>'; +div.appendChild(tbl); +const heightPercIds = ["table_tr", "table_td", "table_th"]; +for (let id of heightPercIds) { + commonHeightTest(id, "height", "20%", "height", "60px", "percentage", "div_tbl"); +} +div.removeChild(tbl); + +// table#height#{pixel, percentage} +commonHeightTest("table", "height", "180", "height", "180px", "pixel", "div_200"); +commonHeightTest("table", "height", "90%", "height", "180px", "90%", "div_200"); +commonHeightTest("table", "height", "110%", "height", "220px", "110%", "div_200"); + +// table#cellpadding +test(t => { + t.add_cleanup(() => { + table.removeAttribute("cellpadding"); + }); + table.setAttribute("cellpadding", "10"); + + let th = document.getElementById("th"); + let th_css = window.getComputedStyle(th, null).getPropertyValue("padding"); + assert_equals(th_css, "10px"); + + let td = document.getElementById("td"); + let td_css = window.getComputedStyle(td, null).getPropertyValue("padding"); + assert_equals(td_css, "10px"); +}, "table cellpadding attribute is correct"); + +// th default text-align property is center +test(t => { + let elem = document.getElementById("th"); + let css = window.getComputedStyle(elem, null).getPropertyValue("text-align"); + assert_equals(css, "center"); +}, "th default align attribute is center"); + +// col#width#{pixel, percentage} +test(t => { + let colgroup = document.createElement("colgroup"); + let col1 = document.createElement("col"); + let col2 = document.createElement("col"); + t.add_cleanup(() => { + table.removeChild(colgroup); + div.classList.remove("div_tbl"); + }); + colgroup.appendChild(col1); + colgroup.appendChild(col2); + table.insertBefore(colgroup, table.firstChild); + div.classList.add("div_tbl"); + + col1.setAttribute("width", "100"); + let td = document.getElementById("td"); + let css = window.getComputedStyle(td, null).getPropertyValue("width"); + assert_equals(css, "100px"); + + col1.setAttribute("width", "50%"); + css = window.getComputedStyle(td, null).getPropertyValue("width"); + assert_equals(css, "200px"); +}, "table col width attribute is correct"); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html new file mode 100644 index 0000000000..3aa0abd320 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<body> +<table style="background-image: url('resources/aqua-yellow-32x32.png')"> + <thead style="background-image: url('resources/blue-16x20-green-16x20.png')"> + <tr> + <td> + Foo + </td> + <td style="background-image: url('resources/yellow-32x32.png')"> + Bar + </td> + </tr> + </thead> + <tbody style="background-image: url('resources/red-32x32.png')"> + <tr> + <th style="background-image: url('resources/fuchsia-32x32.png')"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr style="background-image: url('resources/fuchsia-32x32.png')"> + <td> + Foo + </td> + <td style="background-image: url('resources/yellow-32x32.png')"> + Bar + </td> + </tr> + </tbody> + <tfoot style="background-image: url('resources/yellow-32x32.png')"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html new file mode 100644 index 0000000000..0cbaca6019 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<link rel="match" href="table-background-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=816498"> +<body> +<table background="resources/aqua-yellow-32x32.png"> + <thead background="resources/blue-16x20-green-16x20.png"> + <tr> + <td> + Foo + </td> + <td background="resources/yellow-32x32.png"> + Bar + </td> + </tr> + </thead> + <tbody background="resources/red-32x32.png"> + <tr> + <th background="resources/fuchsia-32x32.png"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr background="resources/fuchsia-32x32.png"> + <td> + Foo + </td> + <td background="resources/yellow-32x32.png"> + Bar + </td> + </tr> + </tbody> + <tfoot background="resources/yellow-32x32.png"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html new file mode 100644 index 0000000000..ceac88e9a3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<style> +table { + border-width: 1px; + border-style: outset; +} +td { + border-width: 1px; + border-style: inset; +} +</style> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html new file mode 100644 index 0000000000..3338813995 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="match" href="table-border-1-ref.html"> +<title>Table borders</title> +<table border> +<tr><td>Test +</table> +<table border=""> +<tr><td>Test +</table> +<table border=null> +<tr><td>Test +</table> +<table border=undefined> +<tr><td>Test +</table> +<table border=foo> +<tr><td>Test +</table> +<table border=1> +<tr><td>Test +</table> +<table border=1foo> +<tr><td>Test +</table> +<table border=1%> +<tr><td>Test +</table> +<table border=-1> +<tr><td>Test +</table> +<table border=-1foo> +<tr><td>Test +</table> +<table border=-1%> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html new file mode 100644 index 0000000000..7558e5271a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<style> +table { + border-width: 1px; + border-style: outset; +} +td { + border-width: 1px; + border-style: inset; +} +</style> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html new file mode 100644 index 0000000000..36d1e45106 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html new file mode 100644 index 0000000000..6f4f39b113 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="match" href="table-border-2-ref.html"> +<title>Table borders</title> +<table border=0> +<tr><td>Test +</table> +<table border=0foo> +<tr><td>Test +</table> +<table border=0%> +<tr><td>Test +</table> +<table border=+0> +<tr><td>Test +</table> +<table border=+0foo> +<tr><td>Test +</table> +<table border=+0%> +<tr><td>Test +</table> +<table border=-0> +<tr><td>Test +</table> +<table border=-0foo> +<tr><td>Test +</table> +<table border=-0%> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html new file mode 100644 index 0000000000..e465fd433c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<head> + <title>Reference for default 'border-color' on table (with 'color' set)</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + * { + border-color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html new file mode 100644 index 0000000000..4b481194dc --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html @@ -0,0 +1,95 @@ +<!-- Intentionally omitting doctype, to test quirks mode. --> +<head> + <title>Testing default 'border-color' on table (with 'color' set), in quirks mode</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> + <link rel="match" href="table-border-3-ref.html"> + <style> + * { + /* This sets the used value of 'currentColor', which is what should be + used for all border-coloring in this test: */ + color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html new file mode 100644 index 0000000000..c4c019c8eb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<head> + <title>Testing default 'border-color' on table (with 'color' set), in standards mode</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> + <link rel="match" href="table-border-3-ref.html"> + <style> + * { + /* This sets the used value of 'currentColor', which is what should be + used for all border-coloring in this test: */ + color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html new file mode 100644 index 0000000000..c8d6a20726 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + display: inline-table; + font-family: Ahem; +} +table, table * { + border-width: 3px; +} +</style> +<p>For every three tables below, the first two should have borders between some cells, but not the third: +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table><tr><td>X<tr><td>X<tr><td>X</table> +<br><br> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table><tr><td>X<td>X<td>X</table> +<br><br> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<br><br> +<p>For every three tables below, the first two should have borders on some edges, but not the third: +<table frame="hsides"><tr><td>X</table> +<table frame="hsides"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="lhs"><tr><td>X</table> +<table frame="lhs"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="rhs"><tr><td>X</table> +<table frame="rhs"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="vsides"><tr><td>X</table> +<table frame="vsides"><tr><td>X</table> +<table><tr><td>X</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html new file mode 100644 index 0000000000..45c9da925d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case"> +<link rel="match" href="table-border-presentational-hints-ascii-case-insensitive-ref.html"> +<meta name="assert" content="@rules + @frame values are ASCII case-insensitive"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + display: inline-table; + font-family: Ahem; +} +table, table * { + border-width: 3px; +} +</style> +<p>For every three tables below, the first two should have borders between some cells, but not the third: +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="RoWs"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="rowſ"><tr><td>X<tr><td>X<tr><td>X</table> +<br><br> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table rules="CoLs"><tr><td>X<td>X<td>X</table> +<table rules="colſ"><tr><td>X<td>X<td>X</table> +<br><br> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="GrOuPs"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="groupſ"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<br><br> +<p>For every three tables below, the first two should have borders on some edges, but not the third: +<table frame="hsides"><tr><td>X</table> +<table frame="HsIdEs"><tr><td>X</table> +<table frame="hſideſ"><tr><td>X</table> +<br><br> +<table frame="lhs"><tr><td>X</table> +<table frame="LhS"><tr><td>X</table> +<table frame="lhſ"><tr><td>X</table> +<br><br> +<table frame="rhs"><tr><td>X</table> +<table frame="RhS"><tr><td>X</table> +<table frame="rhſ"><tr><td>X</table> +<br><br> +<table frame="vsides"><tr><td>X</table> +<table frame="VsIdEs"><tr><td>X</table> +<table frame="vſideſ"><tr><td>X</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html new file mode 100644 index 0000000000..1b128e6171 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference case for table bordercolor attribute behaving like border-color property</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<style> + table { margin: 5px } +</style> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html new file mode 100644 index 0000000000..014abe3567 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test for table bordercolor attribute behaving like border-color property</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="match" href="table-bordercolor-001-ref.html"> +<meta name="assert" content="bordercolor is treated as a presentation hint, equivalent to setting the border-color property"> +<style> + table { margin: 5px } +</style> +<table bordercolor="red"> + <td>I should not have a border.</td> +</table> +<table style="border-color: red"> + <td>I should not have a border.</td> +</table> +<table bordercolor="red" style="border-width: 10px"> + <td>I should not have a border.</td> +</table> +<table style="border-color: red; border-width: 10px"> + <td>I should not have a border.</td> +</table> +<table bordercolor="lime" style="border-style: solid"> + <td>I should have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html new file mode 100644 index 0000000000..5b2ea91fe5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html new file mode 100644 index 0000000000..65962ac273 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=821915"> +<link rel="match" href="table-cell-nowrap-with-fixed-width-ref.html"> +<title>A td element with the nowrap attribute should unconditionally apply white-space:nowrap</title> +<style> +table { border-spacing: 0; } +td { width: 10px; padding: 0; } +div { display: inline-block; background: green; width: 50px; height: 100px; } +</style> +<table> + <td nowrap> + <div></div><div></div> + </td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html new file mode 100644 index 0000000000..b5ba0443f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html @@ -0,0 +1,37 @@ +<style> +body { + margin: 0; +} + +.row { + clear: both; +} + +.row div { + float: left; +} + +.red { + background-color: red; +} +</style> + +<div class="row"> + <div class="red" style="width: 200px">a</div> + <div style="width: 200px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 200px">a</div> + <div style="width: 200px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 100px">a</div> + <div style="width: 300px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 100px">a</div> + <div style="width: 300px">a</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html new file mode 100644 index 0000000000..0fe0e2c25a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html @@ -0,0 +1,55 @@ +<!doctype html> +<link rel="match" href="table-cell-width-ref.html"> +<style> +body { + margin: 0; +} + +table { + width: 400px; + border-collapse: collapse; +} + +th { + font-weight: normal; + text-align: left; +} + +td, th { + padding: 0; +} + +td:first-child, th:first-child { + background-color: red; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table> + <tr> + <th width=0>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=0>a</td> + <td>a</td> + </tr> +</table> + +<!-- test valid width attribute value--> +<table> + <tr> + <th width=100>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=100>a</td> + <td>a</td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html new file mode 100644 index 0000000000..f66244ab10 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html @@ -0,0 +1,54 @@ +<link rel="match" href="table-cell-width-ref.html"> +<style> +body { + margin: 0; +} + +table { + width: 400px; + border-collapse: collapse; +} + +th { + font-weight: normal; + text-align: left; +} + +td, th { + padding: 0; +} + +td:first-child, th:first-child { + background-color: red; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table> + <tr> + <th width=0>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=0>a</td> + <td>a</td> + </tr> +</table> + +<!-- test valid width attribute value--> +<table> + <tr> + <th width=100>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=100>a</td> + <td>a</td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html new file mode 100644 index 0000000000..1eb7c00d21 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="border: 1px solid green; width: 0">Text</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html new file mode 100644 index 0000000000..6358e14a39 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html @@ -0,0 +1,10 @@ +<!doctype html> +<link rel="match" href="table-column-width-ref.html"> +<table style="display: block"> + <colgroup style="display: block"> + <col style="border: 1px solid green; display: block" width="0"></col> + </colgroup> +</table> +<script> + document.querySelector("col").append("Text"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html new file mode 100644 index 0000000000..2bbd6c0477 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Table direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html new file mode 100644 index 0000000000..a3de4136f1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="match" href="table-direction-ref.html"> +<title>Table direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table: +<table style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html new file mode 100644 index 0000000000..ef1378185a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<table border width=100% style=table-layout:fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100% style=table-layout:fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html new file mode 100644 index 0000000000..d76a48c4ab --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<table border width=100%> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100%> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html new file mode 100644 index 0000000000..7dfacf2279 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<link rel="match" href="table-layout-ref.html"> +<meta name="assert" + content="The layout attribute on table elements should have no effect."> +<table border width=100% layout=fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100% layout=auto> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html new file mode 100644 index 0000000000..dab31636d9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Table row direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL rows: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL rows: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html new file mode 100644 index 0000000000..64ed5a667a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-direction-ref.html"> +<title>Table row direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL rows: +<table> + <tr style="direction: ltr"> + <td></td> + <td class="special"></td> + </tr> + <tr style="direction: rtl"> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL rows: +<table style="direction: rtl"> + <tr style="direction: ltr"> + <td></td> + <td class="special"></td> + </tr> + <tr style="direction: rtl"> + <td></td> + <td class="special"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html new file mode 100644 index 0000000000..0f3e03f9ba --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Table row-group direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL row groups: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL row groups: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html new file mode 100644 index 0000000000..385672f127 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-group-direction-ref.html"> +<title>Table row-group direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL row groups: +<table> + <tbody style="direction: ltr"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> + <tbody style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> +</table> + +<hr> + +RTL table with LTR and RTL row groups: +<table style="direction: rtl"> + <tbody style="direction: ltr"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> + <tbody style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html new file mode 100644 index 0000000000..e5279080f0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<table style="border: 1px solid red"> + <thead style="display: block; height: 100px"> + <tr> + <td> + thead text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tbody style="display: block; height: 100px"> + <tr> + <td> + tbody text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tfoot style="display: block; height: 100px"> + <tr> + <td> + tfoot text + </td> + </tr> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html new file mode 100644 index 0000000000..b58311dd72 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html @@ -0,0 +1,31 @@ +<!doctype html> +<link rel="match" href="table-row-group-height-ref.html"> +<table style="border: 1px solid red"> + <thead style="display: block" height="100"> + <tr> + <td> + thead text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tbody style="display: block" height="100"> + <tr> + <td> + tbody text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tfoot style="display: block" height="100"> + <tr> + <td> + tfoot text + </td> + </tr> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html new file mode 100644 index 0000000000..63f882c689 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<div style="border: 1px solid green; height: 0; border-spacing: 2px"> + <div style="display: table-cell; padding: 1px">Hey</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html new file mode 100644 index 0000000000..8ecc0dd454 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html @@ -0,0 +1,9 @@ +<!doctype html> +<link rel="match" href="table-row-height-ref.html"> +<table style="display: block"> + <tbody style="display: block"> + <tr style="display: block; border: 1px solid green" height="0"> + <td>Hey</td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html new file mode 100644 index 0000000000..2aa94109ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<title>Testing row split</title> +<style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; + background-color:white; + font-size:16px; + padding:0; + margin:0; + height:100%; +} +div { height:160%; } +p { height: 50%; margin:0; } +</style> +</head> +<body> + +<div> +<p></p> +<p>1</p> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html new file mode 100644 index 0000000000..3a14558a8b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<link rel="match" href="table-row-pagination-001-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012"> +<meta charset="utf-8"> +<title>Testing row split</title> +<style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; + background-color:white; + font-size:16px; + padding:0; + margin:0; + height:100%; +} +table { height:160%; width:100%; } +td { height:50%; width:100%; } +</style> +</head> +<body> + +<table border="0" cellspacing="0" cellpadding="0"> +<tr><td></td></tr> +<tr><td valign="top">1</td></tr> +</table> + + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html new file mode 100644 index 0000000000..91400fcc1e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@page { size:5in 3in; margin:0.5in; } +</style> +</head> +<body> + <div style="height:3in">Tall div. (Scroll to end.)</div> + <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div> + <div>[clear:left]</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html new file mode 100644 index 0000000000..bc1c42088f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="match" href="table-row-pagination-002-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=963441"> +<style> +@page { size:5in 3in; margin:0.5in; } +</style> +</head> +<body> + <div style="float: left"> + <table cellpadding=0 cellspacing=0> + <tr> + <td> + <div style="height:3in">Tall div. (Scroll to end.)</div> + <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div> + </td> + </tr> + </table> + </div> + <div style="clear: left">[clear:left]</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html new file mode 100644 index 0000000000..dc3e45f5a4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test for table element's UA-stylesheet-provided styles</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="refElem"></div> +<!-- Note: this test puts the table inside of an element with a non-default + 'text-indent' and 'border-collapse' values, so that we can verify that + the table does indeed use the initial value for these properties, rather + than simply inheriting. --> +<div style="text-indent: 100px; border-collapse: collapse"> + <table id="tableElem"></table> +</div> + +<script> +/* These styles come from the default `table` styling here: + * https://html.spec.whatwg.org/multipage/rendering.html#tables-2 + * We can't check for these values directly, because they may be + * serialized slightly differently when read from the computed style. + * So, for each property here, we apply it to a "reference" div and then + * read back the computed value, and we validate that a table element + * has that same computed value by default. */ +const defaultTablePropVals = { + 'display': 'table', + 'box-sizing': 'border-box', + 'border-spacing': '2px', + 'border-collapse': 'separate', + 'text-indent': 'initial', +}; + +for (var propName in defaultTablePropVals) { + test(function() { + refElem.style[propName] = defaultTablePropVals[propName]; + let expectedComputedVal = getComputedStyle(refElem, "")[propName]; + + let actualComputedVal = getComputedStyle(tableElem, "")[propName]; + assert_equals(actualComputedVal, expectedComputedVal); + }, `Computed '${propName}' on table should match html spec`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html new file mode 100644 index 0000000000..f64bb9aa08 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case"> +<meta name="assert" content="@valign values on table-related elements are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<table><tr><td valign="baseline">X</table> +<table><tr><td valign="BaSeLiNe">X</table> +<table><tr><td valign="baſeline">X</table> +<script> +const td = document.querySelectorAll("td"); + +test(() => { + assert_equals(getComputedStyle(td[0]).getPropertyValue("vertical-align"), + "baseline", "lowercase valid"); + assert_equals(getComputedStyle(td[1]).getPropertyValue("vertical-align"), + "baseline", "mixed case valid"); + assert_equals(getComputedStyle(td[2]).getPropertyValue("vertical-align"), + "middle", "non-ASCII invalid"); +}, "keyword baseline"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html new file mode 100644 index 0000000000..9f462b5768 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset=utf-8> +<title>table vspace hspace (standards mode)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div>x</div> +<table vspace=25 hspace=25><tr><td>x</table> +<div>x</div> +<script> +test(function() { + var style = getComputedStyle(document.querySelector('table')); + ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) { + assert_equals(style[m], '0px', m); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html new file mode 100644 index 0000000000..c081775b87 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html @@ -0,0 +1,16 @@ +<!-- quirks --> +<meta charset=utf-8> +<title>table vspace hspace (quirks mode)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div>x</div> <!-- prevent margin collapsing quirks --> +<table vspace=25 hspace=25><tr><td>x</table> +<div>x</div> <!-- prevent margin collapsing quirks --> +<script> +test(function() { + var style = getComputedStyle(document.querySelector('table')); + ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) { + assert_equals(style[m], '0px', m); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html new file mode 100644 index 0000000000..820c360e39 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Test for capping percentages</title> +<style> +div { width:300px; background:yellow; height:50px; } +table { width:150%; } +td { background:blue; } +</style> +<div> + <table cellspacing="0" cellpadding="0" border="0"> + <tr><td>parent div float=left</td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html new file mode 100644 index 0000000000..9a5e108505 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Test for capping percentages</title> +<link rel="match" href="table-width-150percent-ref.html"> +<style> +div { width:300px; background:yellow; height:50px; } +td { background:blue; } +</style> +<div> + <table width="150%" cellspacing="0" cellpadding="0" border="0"> + <tr><td>parent div float=left</td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html new file mode 100644 index 0000000000..2b0f9e445c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html @@ -0,0 +1,13 @@ +<style> +p { + padding: 0; + margin: 0; +} +</style> + +<p>a b</p> + +<hr> + +<p>a</p> +<p>b</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html new file mode 100644 index 0000000000..5b987e7919 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html @@ -0,0 +1,31 @@ +<!doctype html> +<link rel="match" href="table-width-ref.html"> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table width=0> + <tr> + <td> + a b + </td> + </tr> +</table> + +<hr> + +<table width=1> + <tr> + <td> + a b + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html new file mode 100644 index 0000000000..59c5ca70d4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html @@ -0,0 +1,30 @@ +<link rel="match" href="table-width-ref.html"> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table width=0> + <tr> + <td> + a b + </td> + </tr> +</table> + +<hr> + +<table width=1> + <tr> + <td> + a b + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html new file mode 100644 index 0000000000..2cbcd6a347 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +td { width: 100px; height: 100px; background: green; } +</style> +<table> + <tr><td></td></tr> + <tr><td></td></tr> +</table> +There should be 2 green boxes above. diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html new file mode 100644 index 0000000000..0f37d635a5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="match" href="tr-transform-and-will-change-ref.html"> +<style> +tbody { background: green; } +td { width: 100px; height: 100px; } +tr { transform: translateX(5px); will-change: transform; } +</style> +<table> + <tbody> + <tr><td></td></tr> + <tr><td></td></tr> + </tbody> +</table> +There should be 2 green boxes above. diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html new file mode 100644 index 0000000000..2f313f3395 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +table { + border-collapse: collapse; +} +td { + border: 5px solid black; + width: 100px; + height: 100px; +} +</style> +Passes if there is a grid containing 2x2 squares. +<table> + <tbody> + <tr><td></td><td></td></tr> + <tr><td></td><td></td></tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html new file mode 100644 index 0000000000..5f131e6658 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Test for transformed tbody and tr with collapsed borders</title> +<link rel="match" href="transformed-tbody-tr-collapsed-border-ref.html"> +<style> +table { + border-collapse: collapse; +} +tbody, tr { + transform: translateY(0); +} +td { + border: 5px solid black; + width: 100px; + height: 100px; +} +</style> +Passes if there is a grid containing 2x2 squares. +<table> + <tbody> + <tr><td></td><td></td></tr> + <tr><td></td><td></td></tr> + </tbody> +</table> |
