ladybird/Tests/LibWeb/Text/input/HTML/Element-checkVisibility.html
2024-07-20 09:14:50 +01:00

71 lines
2.3 KiB
HTML

<!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>