third_party/WebKit/LayoutTests/fast/transforms/mirror-transform-tiled-scaled-background.html

   1 <!DOCTYPE html>
   2 <title>Tiled and scaled background with 'transform: scale(1, -1)'</title>
   3 <style>
   4 div {
   5   width: 100px;
   6   height: 100px;
   7 }
   8 #subject {
   9   background-size: 95px 100px;
  10   transform: scale(1, -1);
  11 }
  12 </style>
  13 <div id=back>
  14   <div id=subject></div>
  15 </div>
  16 <script>
  17 function stripedImage(c1, c2) {
  18   var c = document.createElement('canvas');
  19   c.width = c.height = 100;
  20   var ctx = c.getContext('2d');
  21   ctx.fillStyle = c1;
  22   ctx.fillRect(0, 0, 100, 50);
  23   ctx.fillStyle = c2;
  24   ctx.fillRect(0, 50, 100, 50);
  25   return c.toDataURL('image/png');
  26 }
  27 document.getElementById('back').style.background = 'url(' + stripedImage('#080', '#f00') + ')';
  28 document.getElementById('subject').style.backgroundImage = 'url(' + stripedImage('#080', 'transparent') + ')';
  29 </script>