Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: A visible descendant of a hidden element still renders after it stops painting itself</title>
<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com">
<link rel="match" href="visibility-descendants-003-ref.html">
<meta name="assert" content="A descendant of a hidden element with 'visibility' set to 'visible' stays visible when it is changed from positioned to statically positioned, which changes whether the descendant or its hidden ancestor is responsible for painting it.">
<style>
#div1
{
border: 1px solid blue;
}
#div2
{
color: red;
position: relative;
visibility: hidden;
}
#div3
{
color: green;
overflow: hidden;
visibility: visible;
position: relative;
}
</style>
<p>Test passes if the content "Filler Text" is contained within the blue box and there is no red visible on the page.</p>
<div id="div1">
<div id="div2">
This test fails if this text is visible on the page.
<div id="div3">Filler Text</div>
</div>
</div>
<script>
// Start positioned and go static. The reverse order cannot detect a stale cached answer.
document.body.offsetHeight;
document.getElementById("div3").style.position = "static";
</script>