Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/interestfor/interestfor-pseudo-element-both-table-display.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="container">
<button id="btn" class="table-cell" interestfor="target">Button</button>
</div>
<div id="target">Target</div>
<div id="container2">
<button id="btn2" class="table-row" interestfor="target">Button 2</button>
</div>
<style>
#container, #container2 {
width: 300px;
}
button {
appearance: none;
height: 50px;
margin: 0;
padding: 0;
border: none;
}
[interestfor]::interest-button {
height: 50px;
margin: 0;
padding: 0;
border: none;
content: "";
}
.table-cell {
display: table-cell;
width: 100px;
}
.table-cell::interest-button {
display: table-cell;
width: 60px;
}
.table-row, .table-row::interest-button {
display: table-row;
}
</style>
<script>
test(() => {
const btn = document.getElementById('btn');
const btnRect = btn.getBoundingClientRect();
assert_equals(btnRect.width, 100);
assert_equals(btnRect.height, 50);
// Even though both have display: table-cell, they do not share the same anonymous table.
// Table box fixup wraps each in its own anonymous table under #container.
// Since anonymous tables are block-level, the pseudo-element's table is placed below the button's table.
const elBelow = document.elementFromPoint(btnRect.left + 10, btnRect.bottom + 10);
assert_equals(elBelow, btn, "pseudo-element table-cell is wrapped in a separate anonymous table below button");
const elRight = document.elementFromPoint(btnRect.right + 10, btnRect.top + 10);
assert_not_equals(elRight, btn, "they are not in the same anonymous table row side-by-side");
}, "Both originating button and ::interest-button have display: table-cell");
test(() => {
const btn2 = document.getElementById('btn2');
const container2 = document.getElementById('container2');
assert_equals(getComputedStyle(btn2).display, 'table-row');
// Dynamic layout check: both table-rows get box-tree fixup under #container2.
assert_greater_than_equal(container2.offsetHeight, 50);
}, "Both originating button and ::interest-button have display: table-row");
</script>