| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| function testCompleted() |
| { |
| var scriptElement = document.createElement("script") |
| scriptElement.src = '../../../resources/js-test-post-async.js' |
| document.body.appendChild(scriptElement); |
| } |
| |
| function computeResolution(resolution, imgResolutionDppx) |
| { |
| if (!resolution) |
| return; |
| var fromImage = /from-image/.test(resolution); |
| var snap = /snap/.test(resolution); |
| var explicit = /(-?\d*(\.\d+)?)(dp(px|i|cm))/.exec(resolution); |
| var value = explicit && explicit[1] * 1; |
| var unit = explicit && explicit[3]; |
| var dppx = 1; |
| if (!unit && !fromImage) |
| return; |
| if (unit && value <= 0) |
| return; |
| if (unit && value) { |
| var cssPxPerIn = 96; |
| var cmPerIn = 2.54; |
| if (unit == 'dppx') |
| dppx = value; |
| else if (unit === 'dpi') |
| dppx = value / cssPxPerIn; |
| else if (unit === 'dpcm') |
| dppx = value / (cssPxPerIn / cmPerIn); |
| else |
| return; |
| } |
| if (fromImage && imgResolutionDppx) |
| dppx = imgResolutionDppx; |
| if (snap) |
| dppx = Math.floor(dppx + 0.01); |
| if (dppx <= 0) |
| dppx = 1; |
| return dppx; |
| } |
| |
| function permute3(rule) { |
| var s = rule.trim().split(' '); |
| if (s.length == 1) |
| return s; |
| if (s.length == 2) |
| return [s.join(' '), [s[1], s[0]].join(' ')]; |
| return [[s[0], s[1], s[2]].join(' '), [s[0], s[2], s[1]].join(' '), |
| [s[1], s[0], s[2]].join(' '), [s[1], s[2], s[0]].join(' '), |
| [s[2], s[0], s[1]].join(' '), [s[2], s[1], s[0]].join(' ')]; |
| } |
| |
| function generateTests(resolutions) { |
| var tests = resolutions.slice(); |
| resolutions.forEach(function(resolution) { |
| tests.push.apply(tests, permute3(resolution + ' from-image')); |
| }); |
| resolutions.forEach(function(resolution) { |
| tests.push.apply(tests, permute3(resolution + ' snap')); |
| }); |
| resolutions.forEach(function(resolution) { |
| tests.push.apply(tests, permute3(resolution + ' from-image snap')); |
| }); |
| return tests; |
| } |
| |
| var imgUrl = '../../images/resources/green.jpg'; |
| var imgWidthPx = 16; |
| var imgHeightPx = 16; |
| var imgResolutionDppx = 0; /* Embedded image resolution data not plumbed yet. */ |
| var dimensions = imgWidthPx + 'x' + imgHeightPx; |
| |
| description('Apply image-resolution property to a fixed image (' + dimensions + ').'); |
| |
| var img = document.createElement('img'); |
| img.src = imgUrl; |
| |
| var resolutions = ['0dppx', '1dppx', '2dppx', '3dppx', '4dppx', |
| '0dpi', '96dpi', '192dpi', '288dpi', '384dpi', |
| '150dpi', '300dpi', '450dpi', '600dpi', |
| '0dpcm', '37.7dpcm', '75.5dpcm', '113.3dpcm', '151.1dpcm', '']; |
| |
| img.onload = function() { |
| generateTests(resolutions).forEach(function(test) { |
| var dppx = computeResolution(test, imgResolutionDppx); |
| img.style.imageResolution = ''; |
| img.style.imageResolution = test; |
| debug('<span class="pass">TEST</span> "' + test + '"'); |
| if (!dppx) { |
| shouldBe('img.style.cssText', '""'); |
| return; |
| } |
| shouldBe('img.style.cssText', '"image-resolution: ' + test + ';"'); |
| var expectedWidth = Math.floor(imgWidthPx / dppx); |
| var expectedHeight = Math.floor(imgHeightPx / dppx); |
| shouldBe('img.offsetWidth', stringify(expectedWidth)); |
| shouldBe('img.offsetHeight', stringify(expectedHeight)); |
| }); |
| document.body.removeChild(img); |
| testCompleted(); |
| }; |
| |
| document.body.appendChild(img); |
| </script> |
| </body> |
| </html> |
