<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<img id="oval0" src="resources/oval.png" style="zoom: 1%">
<img id="oval1" src="resources/oval.png" style="zoom: 2%">
<img id="oval2" src="resources/oval.png" style="zoom: 3%">
<img id="oval3" src="resources/oval.png" style="zoom: 4%">
<img id="oval4" src="resources/oval.png" style="zoom: 5%">
<img id="oval5" src="resources/oval.png" style="zoom: 30%">
<img id="oval6" src="resources/oval.png" style="zoom: 33%">
<img id="oval7" src="resources/oval.png" style="zoom: 50%">
<img id="oval8" src="resources/oval.png" style="zoom: 70%">
<img id="oval9" src="resources/oval.png" style="zoom: 100%">
<img id="oval10" src="resources/oval.png" style="zoom: 111%">
<img id="oval11" src="resources/oval.png" style="zoom: 150%">
<img id="oval12" src="resources/oval.png" style="zoom: 333%">
<img id="oval13" src="resources/oval.png" style="zoom: 400%">
<img id="oval14" src="resources/oval.png" style="zoom: 1234%">
<script>
const EXPECTED_WIDTH = 37;
const EXPECTED_HEIGHT = 33;
for (i = 0; i < 15; ++i) {
const oval = document.getElementById('oval' + i);
const testDesc = `Zoom ${oval.style.zoom} should not affect width/height of images.`;
const testBody = () => {
assert_equals(oval.width, EXPECTED_WIDTH, oval.getAttribute('style'));
assert_equals(oval.height, EXPECTED_HEIGHT, oval.getAttribute('style'));
};
if (oval.complete) {
test(testBody, testDesc);
} else {
async_test(t => {
oval.onload = t.step_func_done(testBody);
}, testDesc);
}
}
</script>
</body>
</html>
Codebase Browser
chromium