blob: 351c9cf8b6e6928215ae93e079bfcbbcdcefc756 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>This tests iframe with visibility hidden</title>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
var iframe1IsVisible = false;
var iframe2IsVisible = false;
function makeiframe1Visible()
{
document.getElementById("iframe1").style.visibility = "visible";
iframe1IsVisible = true;
elementIsVisibleNow();
}
function makeiframe2Visible()
{
document.getElementById("iframe2").style.visibility = "visible";
iframe2IsVisible = true;
elementIsVisibleNow();
}
function elementIsVisibleNow()
{
if (!iframe1IsVisible || !iframe2IsVisible)
return;
document.body.offsetHeight;
if (window.testRunner)
testRunner.notifyDone();
}
</script>
<style>
#iframe2 {
position: absolute;
left: 80px;
top: 8px;
}
</style>
</head>
<body>
<iframe frameborder=no id=iframe1 onload="makeiframe1Visible()" width="80" height="80" style="visibility: hidden"
srcdoc="<div style='will-change: transform; width: 50px; height: 50px; background-color: green;'>
<div style='visibility: visible;'></div>
</div>">
</iframe>
<iframe frameborder=no id=iframe2 onload="makeiframe2Visible()" width="80" height="80" style="visibility: hidden"
srcdoc="
<video style='width: 50px; height: 50px; background-color: green;'>
<source src='movie.mp4' type='video/mp4'>
</video>">
</iframe>
<iframe frameborder=no width="80" height="80" style="visibility: hidden"
srcdoc="<div style='will-change: transform; width: 50px; height: 50px; background-color: red;'>
<div style='visibility: visible;'></div>
</div>">
</iframe>
</body>
</html>