mozilla-central/testing/web-platform/tests/css/css-tables/fixed-layout-2.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>table-layout:fixed with various widths</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<meta name="assert" content="Fixed table layout is triggered except when inline-size is auto.">
<link rel="stylesheet" href="./support/base.css">
<style>
.wrapper {
width: 0;
}
x-table {
table-layout: fixed;
border-spacing: 0px;
}
x-td:first-child {
padding: 0;
background: cyan;
width: 50px;
height: 50px;
}
x-td + x-td {
padding: 0;
height: 50px;
}
x-td > div {
width: 100px;
}
</style>
<main id="main">
<h1>Fixed Layout</h1>
<p>Checks whether fixed layout is implemented properly</p>
</main>
<template id="template">
<hr>
<p></p>
<p></p>
<div class="wrapper">
<x-table>
<x-tr>
<x-td>
<div></div>
</x-td>
<x-td></x-td>
</x-tr>
</x-table>
</div>
</template>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
let sizes = [
"10px",
"100%",
"calc(10px + 100%)",
"auto",
"min-content",
"max-content",
"fit-content",
"calc-size(any, 10px + 100%)",
"fit-content(0)",
"stretch",
"contain",
// These are non-standard sizes.
"-moz-available",
"-webkit-fill-available",
"intrinsic",
"min-intrinsic",
];
function checkSize(size, allowsFixed) {
let fragment = template.content.cloneNode(true);
if (allowsFixed) {
fragment.querySelector("p").textContent = "This should be a 50x50 cyan square:";
fragment.querySelector("p + p").textContent = "Table-layout:fixed does apply to width:" + size + " tables";
} else {
fragment.querySelector("p").textContent = "This should be a 100x50 cyan rectangle:";
fragment.querySelector("p + p").textContent = "Table-layout:fixed does NOT apply to width:" + size + " tables";
}
let table = fragment.querySelector("x-table");
table.style.width = size;
table.querySelector("div").textContent = size;
main.appendChild(fragment);
test(() => {
assert_equals(
getComputedStyle(table).tableLayout,
"fixed",
"The computed value is 'fixed' regardless of whether it applies"
);
if (allowsFixed) {
assert_equals(table.offsetWidth, 50, "Table is in fixed mode");
} else {
assert_equals(table.offsetWidth, 100, "Table is NOT in fixed mode");
}
}, size);
}
for (let size of sizes) {
if (CSS.supports("width", size)) {
let allowsFixed = size !== "auto";
checkSize(size, allowsFixed);
// calc-size() should trigger fixed table layout.
let calcSize = "calc-size(" + size + ", size)";
if (CSS.supports("width", calcSize)) {
checkSize(calcSize, true);
}
}
}
</script>