<!DOCTYPE HTML>
<html class="reftest-wait">
<style>

html { writing-mode: vertical-rl; }

</style>
<body onload="run()">

<p>The following image should have uniform padding around all sides.</p>


<div style="width: 200px; float: left; background: yellow; padding: 5px;">
  <div style="width: 100%">
    <!-- 32x32 blue image -->
    <img style="width: 100%" src="data:image/png; charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII=">
  </div>
</div>

<p style="clear:left">Note that if you zoom the page after it loads
it fixes the problem by causing a reflow.</p>

<script>

function run() {
  /* needs to happen after the image loads */
  var img = document.getElementsByTagName("img")[0];
  var flush_and_ignore = img.offsetTop;
  img.parentNode.parentNode.style.width = "150px";

  document.documentElement.removeAttribute("class");
}

</script>