LibWeb: Implement Element::check_visibility

This commit is contained in:
Edwin Hoksberg 2024-06-24 22:48:27 +02:00 committed by Tim Ledbetter
commit 5f154ba372
Notes: github-actions[bot] 2024-07-20 08:15:46 +00:00
5 changed files with 148 additions and 1 deletions

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<style>
.display-none {
display: none;
}
.content-visibility-parent {
content-visibility: hidden;
}
.opacity-hidden {
opacity: 0;
}
.opacity-visible {
opacity: 0.1;
}
.visibility-hidden {
visibility: hidden;
}
.visibility-visible {
visibility: visible;
}
.content-visibility-auto-hidden {
content-visibility: auto;
}
</style>
<div class="display-none"></div>
<div class="content-visibility-parent">
<div class="content-visibility-child"></div>
</div>
<div class="opacity-hidden"></div>
<div class="opacity-visible"></div>
<div class="visibility-hidden"></div>
<div class="visibility-visible"></div>
<div class="content-visibility-auto-hidden"></div>
<script src="../include.js"></script>
<script>
test(() => {
const displayNone = document.querySelector('.display-none');
println("display-none visible: " + displayNone.checkVisibility());
const contentVisibilityParent = document.querySelector('.content-visibility-parent');
println("content-visibility-parent visible: " + contentVisibilityParent.checkVisibility());
const contentVisibilityChild = document.querySelector('.content-visibility-child');
println("content-visibility-child visible: " + contentVisibilityChild.checkVisibility());
const opacityHidden = document.querySelector('.opacity-hidden');
println("opacity-hidden visible: " + opacityHidden.checkVisibility({opacityProperty: true}));
const opacityVisible = document.querySelector('.opacity-visible');
println("opacity-visible visible: " + opacityVisible.checkVisibility({opacityProperty: true}));
const visibilityHidden = document.querySelector('.visibility-hidden');
println("visibility-hidden visible: " + visibilityHidden.checkVisibility({visibilityProperty: true}));
const visibilityVisible = document.querySelector('.visibility-visible');
println("visibility-visible visible: " + visibilityVisible.checkVisibility({visibilityProperty: true}));
const contentVisibilityAutoHidden = document.querySelector('.content-visibility-auto-hidden');
println("content-visibility-auto-hidden visible: " + contentVisibilityAutoHidden.checkVisibility({contentVisibilityAuto: true}));
});
</script>