Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / ManualTests / image-resampling-with-scale.html
blob35a1a8cb95c800602b92f3a4da3b6d6ce1603e32
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script>
5 // Image of the Chrome logo. An image with features (i.e., not a green square) is necessary for noticing resampling noise.
6 var imgSrc = "data:image/png;base64,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";
8 var intervalId = null;
9 function doScaleTest() {
10 var scale = 0.5;
11 var image1 = document.getElementById('image1');
12 var image2 = document.getElementById('image2');
13 var layer2 = document.getElementById('layer2');
15 image1.setAttribute('src', imgSrc);
16 image2.setAttribute('src', imgSrc);
17 intervalId = setInterval(function() {
18 scale += 0.001;
19 image1.style.webkitTransform = 'scale(' + scale + ')';
20 layer2.style.webkitTransform = 'scale(' + scale + ')';
21 if (scale > 1.5)
22 window.clearInterval(intervalId);
23 }, 10);
25 </script>
26 </head>
27 <body onload="doScaleTest()">
28 Test for crbug.com/151538. This test passes if both Chromium logos smoothly scale up and look identical as they scale.
29 <img id="image1" style="position: absolute; top: 45px; left: 35px;" width="100" height="100" >
30 <div id="layer2" style="position: absolute; top: 180px; left: 35px;">
31 <img id="image2" width="100" height="100" >
32 </body>
33 </html>