diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/tables')
7 files changed, 1057 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/dynamic-table-001.html b/testing/web-platform/tests/mathml/presentation-markup/tables/dynamic-table-001.html new file mode 100644 index 0000000000..a07ef94d27 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/dynamic-table-001.html @@ -0,0 +1,301 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Dynamic tabular elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="/mathml/support/mathml-fragments.js"></script> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="Dynamically modify DOM tree of mtables"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script> + function forceCells(mtable, rows, cols) { + while (mtable.children.length > rows) + mtable.removeChild(mtable.lastElementChild); + while (mtable.children.length < rows) + mtable.appendChild(FragmentHelper.createElement("mtr")); + for (let i = 0; i < rows; i++) { + let mtr = mtable.children[i]; + while (mtr.children.length > cols) + mtr.removeChild(mtr.lastElementChild); + while (mtr.children.length < cols) + mtr.appendChild(FragmentHelper.createElement("mtd")); + + for (let j = 0; j < cols; j++) { + let mtd = mtr.children[j]; + while (mtd.children.length > 0) + mtd.removeChild(mtd.lastElementChild); + let mspace = FragmentHelper.createElement("mspace"); + mspace.setAttribute("height", `${10*(i+1)}px`); + mspace.setAttribute("width", `${10*(j+1)}px`); + mspace.setAttribute("style", `background: black;`); + mtd.appendChild(mspace); + } + } + } + + setup({ explicit_done: true }); + window.addEventListener("load", function() { + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + let reference = document.getElementById("reference"); + + Array.from(document.querySelectorAll("[data-title]")).forEach(mtable => { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + forceCells(mtable, 4, 3); + const epsilon = 1; + compareLayout(mtable, reference, epsilon); + }, `${mtable.getAttribute("data-title")}`); + }); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mtable id="reference"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: blue;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: blue;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: blue;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: blue;"/></mtd> + <mtd><mspace height="20px" width="20px" style="background: blue;"/></mtd> + <mtd><mspace height="20px" width="30px" style="background: blue;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: blue;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: blue;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: blue;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: blue;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: blue;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: blue;"/></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Filling an empty mtable element"></mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Filling empty mtr elements"> + <mtr></mtr> + <mtr></mtr> + <mtr></mtr> + <mtr></mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Filling empty mtd elements"> + <mtr> + <mtd></mtd> + <mtd></mtd> + <mtd></mtd> + </mtr> + <mtr> + <mtd></mtd> + <mtd></mtd> + <mtd></mtd> + </mtr> + <mtr> + <mtd></mtd> + <mtd></mtd> + <mtd></mtd> + </mtr> + <mtr> + <mtd></mtd> + <mtd></mtd> + <mtd></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Filling an empty mtr element"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <!-- Empty mtr --> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Filling an empty mtd element"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> + <mtd><!-- Empty --></mtd> + <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Adding missing elements"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <!-- Cell missing --> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> + <mtd><!-- Empty --></mtd> + <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + </mtr> + <!-- Row missing --> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Removing a row"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="50px" width="10px" style="background: red;"/></mtd> + <mtd><mspace height="50px" width="20px" style="background: red;"/></mtd> + <mtd><mspace height="50px" width="30px" style="background: red;"/></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Removing a column"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="40px" style="background: red;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="40px" style="background: red;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="40px" style="background: red;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="40px" style="background: red;"/></mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable data-title="Removing extra elements"> + <mtr> + <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="40px" style="background: black;"/></mtd> + <mtd><mspace height="10px" width="50px" style="background: red;"/></mtd><!-- extra mtd --> + </mtr> + <mtr> + <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="20px" width="40px" style="background: black;"/><mspace height="20px" width="40px" style="background: red;"/><!-- extra child--></mtd> + </mtr> + <mtr> + <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="30px" width="40px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> + <mtd><mspace height="40px" width="40px" style="background: black;"/></mtd> + </mtr> + <mtr> + <mtd><mspace height="50px" width="10px" style="background: red;"/></mtd> + <mtd><mspace height="50px" width="20px" style="background: red;"/></mtd> + <mtd><mspace height="50px" width="30px" style="background: red;"/></mtd> + <mtd><mspace height="50px" width="40px" style="background: red;"/></mtd> + </mtr> <!-- extra row --> + </mtable> + </math> + </p> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-001.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-001.html new file mode 100644 index 0000000000..91e99184df --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-001.html @@ -0,0 +1,286 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Basic table layout</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<meta name="assert" content="Verify position of cells in basic 2x2, 4x3 and 3x4 math tables."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + Array.from(document.getElementsByTagName("mtable")).forEach(table => { + const id = table.getAttribute("id"); + const rtl = window.getComputedStyle(table).direction === "rtl"; + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + const rows = Array.from(table.getElementsByTagName("mtr")); + for (var j = 0; j < rows.length; j++) { + var cells = Array.from(rows[j].getElementsByTagName("mtd")); + for (var i = 0; i < cells.length - 1; i++) { + var space1 = cells[i].firstElementChild.getBoundingClientRect(); + var space2 = cells[i + 1].firstElementChild.getBoundingClientRect(); + assert_equals(space1.top, space2.top, + `Cells (${i},${j}) and (${i + 1},${j}) should have same vertical position`); + if (rtl) { + assert_greater_than(space1.left, space2.right, + `Cell (${i},${j}) should be on the right of (${i + 1},${j})`); + } else { + assert_less_than(space1.right, space2.left, + `Cell (${i},${j}) should be on the left of (${i + 1},${j})`); + } + } + } + + for (var j = 0; j < rows.length - 1; j++) { + var cells1 = Array.from(rows[j].getElementsByTagName("mtd")); + var cells2 = Array.from(rows[j + 1].getElementsByTagName("mtd")); + for (var i = 0; i < cells1.length; i++) { + var space1 = cells1[i].firstElementChild.getBoundingClientRect(); + var space2 = cells2[i].firstElementChild.getBoundingClientRect(); + assert_equals(space1.left, space2.left, + `Cells (${i},${j}) and (${i},${j + 1}) should have same horizontal position`); + assert_less_than(space1.bottom, space2.top, + `Cell (${i},${j}) should be above (${i},${j + 1})`); + } + } + }, `Layout of ${id}`); + + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mtable id="table-001"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + </mtr> + </mtable> + <mtable id="table-002"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: cyan;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: purple;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: yellow;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: orange;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: black;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: red;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: gray;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: maroon;"></mspace> + </mtd> + </mtr> + </mtable> + <mtable id="table-003"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: cyan;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: orange;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: black;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: maroon;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: gray;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: red;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: purple;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: yellow;"></mspace> + </mtd> + + </mtr> + </mtable> + </math> + </p> + <p> + <math dir="rtl"> + <mtable id="table-011"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + </mtr> + </mtable> + <mtable id="table-012"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: cyan;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: purple;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: yellow;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: orange;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: black;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: red;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: gray;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: maroon;"></mspace> + </mtd> + </mtr> + </mtable> + <mtable id="table-013"> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: cyan;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: green;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: orange;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: black;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: maroon;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: gray;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: red;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: purple;"></mspace> + </mtd> + <mtd> + <mspace width="20px" height="10px" style="background: yellow;"></mspace> + </mtd> + + </mtr> + </mtable> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-002.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-002.html new file mode 100644 index 0000000000..b1d75db0c0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-002.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Basic table alignment</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<meta name="assert" content="Verify alignment of cells with inline elements in basic 2x2, 4x3 and 3x4 math tables."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + var epsilon = 1; + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + const ascents = [40, 0, 20, 30, 10, 80, 0, 40, 70, 30]; + const row = document.getElementById("vertical").firstElementChild; + const cells = Array.from(row.getElementsByTagName("mtd")); + for (var i = 0; i < cells.length - 1; i++) { + var space1 = cells[i].firstElementChild.getBoundingClientRect(); + var space2 = cells[i + 1].firstElementChild.getBoundingClientRect(); + assert_approx_equals(space1.top + ascents[i], + space2.top + ascents[i + 1], + epsilon, + `Baselines of cells ${i} and ${i + 1} should be aligned.`); + } + }, `Vertical alignment of cells`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + const table = document.getElementById("horizontal"); + const rows = Array.from(table.getElementsByTagName("mtr")); + for (var j = 0; j < rows.length - 1; j++) { + var space1 = rows[j].firstElementChild.firstElementChild.getBoundingClientRect(); + var space2 = rows[j + 1].firstElementChild.firstElementChild.getBoundingClientRect(); + assert_approx_equals((space1.left + space1.right) / 2, + (space2.left + space2.right) / 2, + epsilon, + `Baselines of cells ${j} and ${j + 1} should be aligned.`); + } + }, `Horizontal alignment of cells`); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mtable id="vertical"> + <mtr> + <mtd> + <mspace width="10px" height="40px" depth="0px" style="background: lightblue;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="0px" depth="40px" style="background: lightgreen;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="20px" depth="20px" style="background: cyan;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="30px" depth="10px" style="background: purple;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="10px" depth="30px" style="background: orange;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="80px" depth="0px" style="background: blue;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="0px" depth="80px" style="background: green;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="40px" depth="40px" style="background: yellow;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="70px" depth="30px" style="background: red;"></mspace> + </mtd> + <mtd> + <mspace width="10px" height="30px" depth="70px" style="background: black;"></mspace> + </mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable id="horizontal"> + <mtr> + <mtd> + <mspace width="10px" height="10px" style="background: lightblue;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="40px" height="10px" style="background: lightgreen;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="30px" height="10px" style="background: cyan;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="20px" height="10px" style="background: purple;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="50px" height="10px" style="background: orange;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="100px" height="10px" style="background: blue;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="90px" height="10px" style="background: green;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="70px" height="10px" style="background: yellow;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="80px" height="10px" style="background: red;"></mspace> + </mtd> + </mtr> + <mtr> + <mtd> + <mspace width="40px" height="10px" style="background: black;"></mspace> + </mtd> + </mtr> + </mtable> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-003.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-003.html new file mode 100644 index 0000000000..323cb03c8a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-003.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Basic table alignment</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<meta name="assert" content="Verify alignment of cells with block elements in basic 2x2, 4x3 and 3x4 math tables."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + var epsilon = 1; + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + const ascents = [40, 0, 20, 30, 10, 80, 0, 40, 70, 30]; + const row = document.getElementById("vertical").firstElementChild; + const cells = Array.from(row.getElementsByTagName("mtd")); + for (var i = 0; i < cells.length - 1; i++) { + var space1 = cells[i].firstElementChild.firstElementChild.getBoundingClientRect(); + var space2 = cells[i + 1].firstElementChild.firstElementChild.getBoundingClientRect(); + assert_approx_equals(space1.top + ascents[i], + space2.top + ascents[i + 1], + epsilon, + `Baselines of cells ${i} and ${i + 1} should be aligned.`); + } + }, `Vertical alignment of cells`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + const table = document.getElementById("horizontal"); + const rows = Array.from(table.getElementsByTagName("mtr")); + for (var j = 0; j < rows.length - 1; j++) { + var space1 = rows[j].firstElementChild.firstElementChild.firstElementChild.getBoundingClientRect(); + var space2 = rows[j + 1].firstElementChild.firstElementChild.firstElementChild.getBoundingClientRect(); + assert_approx_equals((space1.left + space1.right) / 2, + (space2.left + space2.right) / 2, + epsilon, + `Baselines of cells ${j} and ${j + 1} should be aligned.`); + } + }, `Horizontal alignment of cells`); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mtable id="vertical"> + <mtr> + <mtd> + <mrow><mspace width="10px" height="40px" depth="0px" style="background: lightblue;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="0px" depth="40px" style="background: lightgreen;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="20px" depth="20px" style="background: cyan;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="30px" depth="10px" style="background: purple;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="10px" depth="30px" style="background: orange;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="80px" depth="0px" style="background: blue;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="0px" depth="80px" style="background: green;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="40px" depth="40px" style="background: yellow;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="70px" depth="30px" style="background: red;"></mspace></mrow> + </mtd> + <mtd> + <mrow><mspace width="10px" height="30px" depth="70px" style="background: black;"></mspace></mrow> + </mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mtable id="horizontal"> + <mtr> + <mtd> + <mrow><mspace width="10px" height="10px" style="background: lightblue;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="40px" height="10px" style="background: lightgreen;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="30px" height="10px" style="background: cyan;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="20px" height="10px" style="background: purple;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="50px" height="10px" style="background: orange;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="100px" height="10px" style="background: blue;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="90px" height="10px" style="background: green;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="70px" height="10px" style="background: yellow;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="80px" height="10px" style="background: red;"></mspace></mrow> + </mtd> + </mtr> + <mtr> + <mtd> + <mrow><mspace width="40px" height="10px" style="background: black;"></mspace></mrow> + </mtd> + </mtr> + </mtable> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-axis-height.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-axis-height.html new file mode 100644 index 0000000000..58f9d64c21 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-axis-height.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>table axis height</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<meta name="assert" content="Element mtable correctly uses the axis height parameter from the MATH table."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<style> + math, mspace { + font-size: 10px; + } + @font-face { + font-family: axisheight5000-verticalarrow14000; + src: url("/fonts/math/axisheight5000-verticalarrow14000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 5000 * emToPx; + var tableMiddle = (getBox("table").bottom + getBox("table").top) / 2; + assert_approx_equals(getBox("baseline").bottom - tableMiddle, + v1, epsilon, "mtable: axis height"); + }, "AxisHeight"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: axisheight5000-verticalarrow14000"> + <mspace id="baseline" style="background: green" width="50px" height="1px"/> + <mtable id="table" style="background: blue"><mtr><mtd><mspace width="100px" height="1px"/></mtd></mtr></mtable> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-cell-mrow-layout.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-cell-mrow-layout.html new file mode 100644 index 0000000000..1e76e3949a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-cell-mrow-layout.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Table cell mrow layout</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> +<meta name="assert" content="Table cell relies on the mrow layout for their children."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<style> + /* Remove default padding, since there is none on reference mrow element. */ + mtd { padding: 0; } +</style> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mtable id="mtable"> + <mtr> + <mtd id="mtd"> + <mspace width="10px" depth="20px" height="20px" style="background: blue"/> + <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> + <mspace width="10px" depth="30px" height="10px" style="background: black"/> + </mtd> + </mtr> + </mtable> + </math> + </p> + <p> + <math> + <mrow id="mtd-reference"> + <mspace width="10px" depth="20px" height="20px" style="background: blue"/> + <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> + <mspace width="10px" depth="30px" height="10px" style="background: black"/> + </mrow> + </math> + </p> + <p> + <math> + <mtable id="mtable-reference"> + <mtr> + <mtd> + <mrow> + <mspace width="10px" depth="20px" height="20px" style="background: blue"/> + <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> + <mspace width="10px" depth="30px" height="10px" style="background: black"/> + </mrow> + </mtd> + </mtr> + </mtable> + </math> + </p> + <script> + const epsilon = 1; + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + let mtd = document.getElementById("mtd"); + let reference = document.getElementById("mtd-reference"); + compareLayout(mtd, reference, epsilon); + }, "<mtd> relies on mrow algorithm to layout its children"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + let mtable = document.getElementById("mtable"); + let reference = document.getElementById("mtable-reference"); + compareLayout(mtable, reference, epsilon); + }, "<mtable> layout does not change if children of <mtd> elements are wrapped in an explicit <mrow>"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/tables/table-default-styles-001.html b/testing/web-platform/tests/mathml/presentation-markup/tables/table-default-styles-001.html new file mode 100644 index 0000000000..495cdc000a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/tables/table-default-styles-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tabular math elements default styles</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://w3c.github.io/mathml-core/#tabular-math"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Check default styles for mtable, mtr and mtd."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + math { + font: 25px/1 Ahem; + } +</style> +<div id="log"></div> +<div> + <math> + <mrow id="reference"><mspace width="20px" height="10px" style="background: lightblue;"></mrow> + <mtable id="mtable"><mtr id="mtr"><mtd id="mtd"><mspace width="20px" height="10px" style="background: lightblue;"></mtd></mtr></mtable> + </math> +</div> +<script> + test(() => assert_equals(window.getComputedStyle(mtable).mathStyle, "compact"), + "Default math-style value on mtable"); + test(() => assert_equals(window.getComputedStyle(mtable).display, "inline-table"), + "Default display value on mtable"); + test(() => assert_equals(window.getComputedStyle(mtr).display, "table-row"), + "Default display value on mtr"); + test(() => assert_equals(window.getComputedStyle(mtd).display, "table-cell"), + "Default display value on mtd"); + test(() => assert_equals(window.getComputedStyle(mtd).textAlign, "center"), + "Default text-align value on mtd"); + test(() => assert_equals(window.getComputedStyle(mtd).paddingLeft, "10px"), + "Default padding-left value on mtd"); + test(() => assert_equals(window.getComputedStyle(mtd).paddingRight, "10px"), + "Default padding-right value on mtd"); + test(() => assert_equals(window.getComputedStyle(mtd).paddingTop, "10px"), + "Default padding-top value on mtd"); + test(() => assert_equals(window.getComputedStyle(mtd).paddingBottom, "10px"), + "Default padding-bottom value on mtd"); + + test(function () { + var mtableBox = document.getElementById("mtable").getBoundingClientRect(); + var referenceBox = document.getElementById("reference").getBoundingClientRect(); + assert_equals(mtableBox.width, referenceBox.width + 20); + assert_equals(mtableBox.height, referenceBox.height + 20); + }, "Bounding box is the same as mrow + mtd default padding"); +</script> |