blob: efd49f0ed2638e0f9350bd107d9e0ba469a64e74 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description('Tests that computed style is not affected by the zoom value');
function testProperty(data)
{
var prop = data[0];
if (data.length == 1)
data.push('20px');
for (var i = 1; i < data.length; i++) {
testPropertyValue(prop, data[i]);
}
}
function testPropertyValue(prop, value)
{
var el = document.createElement('div');
el.style.cssText = 'position: absolute; width: 100px; height: 100px;' +
'overflow: hidden; border: 20px solid red;' +
'outline: 20px solid blue;-webkit-column-rule: 20px solid red';
el.style.setProperty(prop, value, '');
document.body.style.zoom = '';
document.body.appendChild(el);
var value1 = getComputedStyle(el, null).getPropertyValue(prop);
document.body.style.zoom = 2;
var value2 = getComputedStyle(el, null).getPropertyValue(prop);
document.body.style.zoom = .5;
var value3 = getComputedStyle(el, null).getPropertyValue(prop);
document.body.removeChild(el);
document.body.style.zoom = '';
if (typeof value1 === 'string' && value1 === value2 && value2 == value3)
testPassed(prop + ', value: "' + value1 + '"');
else
testFailed(prop + ', value1: "' + value1 + '", value2: "' + value2 + '", value3: "' + value3 + '"');
}
var testData = [
['-webkit-border-horizontal-spacing'],
['-webkit-border-vertical-spacing'],
['-webkit-box-reflect', 'below 20px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white))'],
['-webkit-box-shadow', '20px 20px 20px 20px red'],
['-webkit-column-rule-width', '20px'],
['-webkit-perspective-origin', '20px 20px'],
['-webkit-text-stroke-width'],
['-webkit-transform', 'translate(20px, 20px)', 'translate3d(20px, 20px, 20px)'],
['-webkit-transform-origin', '20px 20px', '-20px -20px'],
['border-bottom-left-radius'],
['border-bottom-right-radius'],
['border-bottom-width'],
['border-left-width'],
['border-right-width'],
['border-spacing'],
['border-top-left-radius'],
['border-top-right-radius'],
['border-top-width'],
['bottom', '20px', '-20px'],
['clip', 'rect(20px 80px 80px 20px)'],
['font-size', '20px', 'large'],
['height'],
['left', '20px', '-20px'],
['letter-spacing', '20px', '-20px'],
['line-height'],
['margin-bottom', '20px', '-20px'],
['margin-left', '20px', '-20px'],
['margin-right', '20px', '-20px'],
['margin-top', '20px', '-20px'],
['outline-width'],
['padding-bottom'],
['padding-left'],
['padding-right'],
['padding-top'],
['right', '20px', '-20px'],
['text-shadow', '20px 20px 20px red'],
['top', '20px', '-20px'],
['width'],
['word-spacing', '20px', '-20px'],
];
testData.forEach(testProperty);
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>