171 lines
5.6 KiB
HTML
171 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<link rel=author href="mailto:jarhar@chromium.org">
|
|
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6850">
|
|
<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>
|