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-pseudo-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="cell-pseudo" interestfor="target">Button</button>
</div>
<div id="target">Target</div>
<div id="container2">
<button id="btn2" class="caption-pseudo" interestfor="target">Button 2</button>
</div>
<style>
#container, #container2 {
width: 300px;
}
button {
appearance: none;
display: block;
width: 100px;
height: 50px;
margin: 0;
padding: 0;
border: none;
}
[interestfor]::interest-button {
width: 60px;
height: 40px;
margin: 0;
padding: 0;
border: none;
content: "";
}
.cell-pseudo::interest-button {
display: table-cell;
}
.caption-pseudo::interest-button {
display: table-caption;
}
</style>
<script>
test(() => {
const btn = document.getElementById('btn');
const btnRect = btn.getBoundingClientRect();
assert_equals(btnRect.width, 100);
assert_equals(btnRect.height, 50);
// When ::interest-button has display: table-cell, table fixup wraps it in an anonymous table.
// Since #btn is display: block, the anonymous table for the pseudo-element is placed below #btn.
const elBelow = document.elementFromPoint(btnRect.left + 10, btnRect.bottom + 10);
assert_equals(elBelow, btn, "pseudo-element with display: table-cell is rendered below the block button");
}, "::interest-button with display: table-cell on a display: block originating button");
test(() => {
const btn2 = document.getElementById('btn2');
const btn2Rect = btn2.getBoundingClientRect();
// When ::interest-button has display: table-caption, table fixup wraps it in an anonymous table.
const elBelow = document.elementFromPoint(btn2Rect.left + 10, btn2Rect.bottom + 10);
assert_equals(elBelow, btn2, "pseudo-element with display: table-caption is rendered below the block button");
}, "::interest-button with display: table-caption on a display: block originating button");
</script>