<!doctype HTML>
<html>
<meta charset="utf8">
<title>CSS Content Visibility: auto + overflow clip + scrollIntoView, ContentVisibilityAutoStateChange fires trece</title>
<link rel="author" title="Cathie Chen" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
<meta name="assert"
content="If content-visibility: auto element is not relevent to user after calling scrollIntoView of its descendant, contentvisibilityautostatechange trece">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
.auto {
content-visibility: auto;
contain-intrinsic-size: auto 1px auto 10000px;
}
.child {
height: 40000px;
position: relative;
}
#target {
position: absolute;
bottom: 0;
}
.before_target {
height: 40000px;
}
#overflow_clip {
overflow: clip;
height: 20000px;
}
</style>
<div id=e1 class="auto before_target"></div>
<div id=e2 class="auto before_target"></div>
<div id=e3 class="auto">
<div id="overflow_clip">
<div class=child>
<div id=target>PASS</div>
</div>
</div>
</div>
<div id=e4 class=auto>
<div class=child></div>
</div>
<script>
function waitForEvent() {
return new Promise(resolve => e3.addEventListener('contentvisibilityautostatechange', resolve, { once: true }));
}
promise_test(async (t) => {
var eventCounter = 0;
function eventHandler(e) {
eventCounter++;
if (eventCounter == 1) {
assert_equals(e.skipped, true, "the first event is the initial one");
} else if (eventCounter == 2) {
assert_equals(e.skipped, false, "the second event should be generated by visible");
} else if (eventCounter == 3) {
assert_equals(e.skipped, true, "the third event should be generated by hidden");
}
}
e3.addEventListener("contentvisibilityautostatechange", eventHandler);
// Make sure the first event has fired.
await waitForEvent();
target.scrollIntoView();
await waitForEvent();
await waitForEvent();
await waitForAtLeastOneFrame();
assert_equals(eventCounter, 3, "There should be three contentvisibilityautostatechange events.");
}, "ContentVisibilityAutoStateChange fires trece when `scrollIntoView` a descendant of `content-visibility:auto` which is hidden after scrolling");
</script>
Codebase Browser
chromium