The square should be a uniform shade of green.
<div style="width: 100px; height: 50px; background-color: green; opacity: 0.5;"></div>
<span style="opacity: 0.9">
<div id="inner" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<span style="display: inline-block; width: 100px; height: 50px; background-color: green; opacity: 0.5;"></span>
</div>
</span>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
runAfterLayoutAndPaint(function() {
document.getElementById("inner").style.float = "none";
if (window.testRunner)
testRunner.notifyDone();
});
</script>