blob: c23ac83ff46e27b3016ce917f97a5fd2183d5e0b [file] [log] [blame]
<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>