83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
HTML
<html>
|
|
<style>
|
|
.container {
|
|
background-color: blue;
|
|
width: 200px;
|
|
height: 600px;
|
|
position: absolute;
|
|
}
|
|
.inert {
|
|
background-color: yellow;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
}
|
|
.target {
|
|
background-color: red;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
}
|
|
.container:focus-within .target {
|
|
background-color: green;
|
|
}
|
|
.child {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div class=container>
|
|
<div class=target tabindex=1 id=focusTarget>
|
|
</div>
|
|
<div class=target>
|
|
</div>
|
|
<div class=inert>
|
|
</div>
|
|
<div class=target>
|
|
<div class="inert child">
|
|
</div>
|
|
</div>
|
|
<div class=inert>
|
|
<div class="target child">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<pre id=log></pre>
|
|
|
|
<script>
|
|
function testStyleChangeType(selector, expectedType)
|
|
{
|
|
let pass = true;
|
|
const elements = document.querySelectorAll(selector);
|
|
for (var i = 0; i < elements.length; ++i) {
|
|
const type = window.internals.styleChangeType(elements[i]);
|
|
if (type != expectedType) {
|
|
log.textContent += `FAIL ${selector} styleChangeType was ${type} expected ${expectedType}\n`;
|
|
pass = false;
|
|
}
|
|
}
|
|
if (pass)
|
|
log.textContent += "PASS\n";
|
|
}
|
|
|
|
window.onload = function () {
|
|
if (!window.testRunner)
|
|
return;
|
|
testRunner.dumpAsText();
|
|
|
|
document.body.offsetLeft;
|
|
focusTarget.focus();
|
|
|
|
testStyleChangeType(".target", "InlineStyleChange");
|
|
testStyleChangeType(".container", "NoStyleChange");
|
|
testStyleChangeType(".inert", "NoStyleChange");
|
|
|
|
document.body.offsetLeft;
|
|
focusTarget.blur();
|
|
|
|
testStyleChangeType(".target", "InlineStyleChange");
|
|
testStyleChangeType(".container", "NoStyleChange");
|
|
testStyleChangeType(".inert", "NoStyleChange");
|
|
};
|
|
</script>
|