| <!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> |
