blob: cb41cbc8bfc7843c3bb98932fc9ec9973bc50724 [file] [log] [blame]
<!DOCTYPE>
<html>
<head>
<style>
#background {
width: 200px;
height: 200px;
display: block;
background-color: green;
}
.overlay {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
-webkit-transition: opacity 1s;
}
#popup {
width: 20px;
height: 20px;
background-color: red;
border-radius: 6px;
-webkit-transition: -webkit-transform 1s;
}
.transparent {
opacity: 0;
}
[hidden] {
display: none;
}
.overlay.transparent .page {
transform: scale(1) translateY(0px);
}
</style>
<script type="text/javascript" charset="utf-8">
function runTest()
{
var solid_color_overlay = document.getElementById("solid_color_overlay");
solid_color_overlay.removeAttribute('hidden');
var popup = document.getElementById("popup");
popup.removeAttribute('hidden');
// NOTE: This is a hacky way to force the container to layout which
// will allow us to trigger the webkit transition.
// See crbug.com/324685
solid_color_overlay.scrollTop;
solid_color_overlay.classList.remove('transparent');
// dump the pixel in the middle of the transition
if (window.internals) {
window.internals.forceCompositingUpdate(document);
window.internals.pauseAnimations(0.5);
}
triggerPixelResults();
}
function triggerPixelResults()
{
parent.postMessage("TriggerPixelResults", '*');
}
window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="background">
<div id="solid_color_overlay" class="overlay transparent" hidden=true>
<div id="popup" class="page" hidden=true></div>
</div>
</div>
</body>
</html>