301 lines
12 KiB
HTML
301 lines
12 KiB
HTML
<!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>
|