83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>offset* properties on tables</title>
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">
|
|
<script src=/resources/testharness.js></script>
|
|
<script src=/resources/testharnessreport.js></script>
|
|
<div id="test-target" style="position: absolute"></div>
|
|
<script>
|
|
test(function() {
|
|
// Each test consists of four elements: the markup to use, the expected
|
|
// value of offsetWidth on the table, the expected value of offsetHeight
|
|
// on the table, and the description string.
|
|
var tests = [
|
|
[ `<table style="width: 20px; height: 30px">`,
|
|
20, 30,
|
|
"Basic table" ],
|
|
[ `<table><caption style="width: 40px; height: 50px">`,
|
|
40, 50,
|
|
"Basic caption" ],
|
|
[ `<table style="width: 20px; height: 30px">
|
|
<caption style="width: 10px; height: 20px">`,
|
|
20, 50,
|
|
"Table and narrower caption" ],
|
|
[ `<table style="width: 20px; height: 30px">
|
|
<caption style="width: 40px; height: 20px">`,
|
|
40, 50,
|
|
"Table and wider caption" ],
|
|
[ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px">`,
|
|
20, 30,
|
|
"Table with padding" ],
|
|
[ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px;
|
|
box-sizing: content-box">`,
|
|
26, 34,
|
|
"Table with padding and content-box sizing" ],
|
|
[ `<table style="width: 20px; height: 30px;
|
|
border-width: 1px 2px 3px 4px; border-style: solid;
|
|
border-collapse: separate; box-sizing: content-box">`,
|
|
26, 34,
|
|
"Table with separated border" ],
|
|
[ `<table style="width: 20px; height: 30px;
|
|
border-width: 2px 4px 6px 8px; border-style: solid;
|
|
border-collapse: collapse; box-sizing: content-box">
|
|
<tr><td>`,
|
|
26, 34,
|
|
"Table with collapsed border" ],
|
|
[ `<table>
|
|
<caption style="width: 40px; height: 50px; padding: 1px 2px 3px 4px">`,
|
|
46, 54,
|
|
"Caption with padding" ],
|
|
[ `<table>
|
|
<caption style="width: 40px; height: 50px;
|
|
border-width: 1px 2px 3px 4px; border-style: solid">`,
|
|
46, 54,
|
|
"Caption with border" ],
|
|
[ `<table>
|
|
<caption style="width: 40px; height: 50px; margin: 1px 2px 3px 4px;">`,
|
|
46, 54,
|
|
"Caption with margin" ],
|
|
[ `<table style="caption-side: bottom">
|
|
<caption style="width: 40px; height: 50px;">`,
|
|
40, 50,
|
|
"Bottom caption" ],
|
|
];
|
|
|
|
function target() {
|
|
return document.getElementById("test-target");
|
|
}
|
|
|
|
function table() {
|
|
return target().querySelector("table");
|
|
}
|
|
|
|
for (var t of tests) {
|
|
test(function() {
|
|
target().innerHTML = t[0];
|
|
assert_equals(table().offsetWidth, t[1], t[3] + " offsetWidth");
|
|
assert_equals(table().offsetHeight, t[2], t[3] + " offsetHeight");
|
|
assert_equals(table().offsetLeft, 0, t[3] + " offsetLeft");
|
|
assert_equals(table().offsetTop, 0, t[3] + " offsetTop");
|
|
}, t[3]);
|
|
}
|
|
}, "Overall test to make sure there are no exceptions");
|
|
</script>
|