Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/checkVisibility.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=visibilityhidden style="visibility:hidden">hello</div>
<div style="content-visibility:hidden">
<div id=cvhidden>hello</div>
</div>
<div style="content-visibility:auto">
<div id=cvauto>hello</div>
</div>
<div id=displaynone style="display:none">hello</div>
<div style="display:none" class="shadow-host-with-slot">
<div id="slottedindisplaynone" slot="slot">slotted</div>
</div>
<div id=displaycontents style="display:contents">
<div id=displaycontentschild>hello</div>
</div>
<div id=opacityzero style="opacity:0">hello</div>
<div style="opacity:0" class="shadow-host-with-slot">
<div id="slottedinopacityzero" slot="slot">slotted</div>
</div>
<div style="content-visibility:hidden">
<div id=cvhiddenchildwithupdate></div>
</div>
<div style="content-visibility:hidden" id=cvhiddenwithupdate></div>
<div style="content-visibility:hidden" class="shadow-host-with-slot">
<div id="slottedincvhidden" slot="slot">slotted</div>
</div>
<div style="height:10000px">spacer</div>
<div style="content-visibility:auto">
<div id=cvautooffscreen>hello</div>
</div>
<div id=cvautocontainer>
<div id=cvautochild></div>
</div>
<div style="content-visibility:auto">
<div style="content-visibility:auto">
<div id=nestedcvautochild></div>
</div>
</div>
<script>
for (const host of document.querySelectorAll(".shadow-host-with-slot")) {
const shadowRoot = host.attachShadow({ mode: "open" });
const slot = document.createElement("slot");
slot.name = "slot";
shadowRoot.appendChild(slot);
}
test(() => {
assert_false(visibilityhidden.checkVisibility({
checkVisibilityCSS: true
}), 'checkVisibilityCSS:true');
assert_false(visibilityhidden.checkVisibility({
visibilityProperty: true
}), 'visibilityProperty:true');
assert_true(visibilityhidden.checkVisibility({
checkVisibilityCSS: false
}), 'checkVisibilityCSS:false');
}, 'checkVisibility on visibility:hidden element.');
test(() => {
assert_false(cvhidden.checkVisibility());
}, 'checkVisibility on content-visibility:hidden element.');
test(() => {
assert_false(slottedincvhidden.checkVisibility());
}, 'checkVisibility on element slotted in content-visibility: hidden shadow host.');
promise_test(async () => {
await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
assert_true(cvauto.checkVisibility({
contentVisibilityAuto: false
}), 'contentVisibilityAuto: false');
assert_true(cvauto.checkVisibility({
contentVisibilityAuto: true
}), 'contentVisibilityAuto: true');
}, 'checkVisibility on content-visibility:auto element.');
test(() => {
assert_true(cvautooffscreen.checkVisibility({
contentVisibilityAuto: false
}), 'contentVisibilityAuto: false');
assert_false(cvautooffscreen.checkVisibility({
contentVisibilityAuto: true
}), 'contentVisibilityAuto: true');
}, 'checkVisibility on content-visibility:auto element which is outside the viewport.');
test(() => {
assert_false(displaynone.checkVisibility());
}, 'checkVisibility on display:none element.');
test(() => {
assert_false(slottedindisplaynone.checkVisibility());
}, 'checkVisibility on element slotted in display:none shadow host.');
test(() => {
assert_false(displaycontents.checkVisibility());
assert_true(displaycontentschild.checkVisibility());
}, 'checkVisibility on display:contents element.');
test(() => {
assert_false(opacityzero.checkVisibility({
checkOpacity: true
}), 'checkOpacity:true');
assert_false(opacityzero.checkVisibility({
opacityProperty: true
}), 'opacityProperty:true');
assert_true(opacityzero.checkVisibility({
checkOpacity: false
}), 'checkOpacity:false');
}, 'checkVisibility on opacity:0 element.');
test(() => {
assert_false(slottedinopacityzero.checkVisibility({
checkOpacity: true
}), 'checkOpacity: true');
assert_true(slottedinopacityzero.checkVisibility({
checkOpacity: false
}), 'checkOpacity: true');
}, 'checkVisibility on element slotted in opacity: 0; shadow host.');
test(() => {
cvautocontainer.style.contentVisibility = 'auto';
cvautochild.style.visibility = 'hidden';
assert_false(cvautochild.checkVisibility({checkVisibilityCSS: true}));
assert_false(cvautochild.checkVisibility({contentVisibilityAuto: true}));
assert_true(cvautochild.checkVisibility());
cvautochild.style.visibility = 'visible';
assert_true(cvautochild.checkVisibility({checkVisibilityCSS: true}));
assert_false(cvautochild.checkVisibility({contentVisibilityAuto: true}));
assert_true(cvautochild.checkVisibility());
}, 'checkVisibility on content-visibility:auto with visibility:hidden inside.');
test(() => {
assert_true(nestedcvautochild.checkVisibility());
}, 'checkVisibility on nested content-visibility:auto containers reports that the content is visible.');
test(() => {
cvhiddenchildwithupdate.getBoundingClientRect();
assert_false(cvhiddenchildwithupdate.checkVisibility());
}, 'checkVisibility on content-visibility:hidden child after forced layout update.');
test(() => {
cvhiddenwithupdate.getBoundingClientRect();
assert_true(cvhiddenwithupdate.checkVisibility());
}, 'checkVisibility on content-visibility:hidden element after forced layout update.');
test(() => {
document.documentElement.style.contentVisibility = "hidden";
assert_true(document.documentElement.checkVisibility());
document.documentElement.style.removeProperty("content-visibility");
}, 'checkVisibility on root element with content-visibility: hidden returns true.');
</script>