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