mirror-transform-tiled-scaled-background.html

<!DOCTYPE html>
<title>Tiled and scaled background with 'transform: scale(1, -1)'</title>
<style>
div {
  width: 100px;
  height: 100px;
}
#subject {
  background-size: 95px 100px;
  transform: scale(1, -1);
}
</style>
<div id=back>
  <div id=subject></div>
</div>
<script>
function stripedImage(c1, c2) {
  var c = document.createElement('canvas');
  c.width = c.height = 100;
  var ctx = c.getContext('2d');
  ctx.fillStyle = c1;
  ctx.fillRect(0, 0, 100, 50);
  ctx.fillStyle = c2;
  ctx.fillRect(0, 50, 100, 50);
  return c.toDataURL('image/png');
}
document.getElementById('back').style.background = 'url(' + stripedImage('#080', '#f00') + ')';
document.getElementById('subject').style.backgroundImage = 'url(' + stripedImage('#080', 'transparent') + ')';
</script>

chromium/third_party/blink/web_tests/transforms/mirror-transform-tiled-scaled-background.html