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