| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>getComputedStyle() Zoom and Background Size</title> |
| <style> |
| #test_area { |
| position: relative; |
| } |
| .test_div { |
| zoom: 2; |
| width: 300px; |
| } |
| |
| #zoomed_and_displayed { |
| display: block; |
| } |
| #zoomed_and_hidden { |
| display: none; |
| } |
| |
| #results { |
| overflow: hidden; |
| } |
| .results { |
| float: left; |
| margin-right: 2em; |
| } |
| .results table { |
| border-collapse: collapse; |
| line-height: 1.4em; |
| } |
| .results th { |
| text-align: left; |
| } |
| .results th, |
| .results td { |
| padding: 0 1em 0 0; |
| border-bottom: 1px solid #ddd; |
| } |
| .results .test-pass { |
| color: green; |
| } |
| .results .test-fail { |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| Checks that getComputedStyle() on a zoomed element returns the right thing. |
| <section id="results"> |
| <section class="results"> |
| <h2>Results while display:block</h2> |
| <table> |
| <thead> |
| <tr> |
| <th>Property</th> |
| <th>Pass?</th> |
| <th>Set Value</th> |
| <th>Computed Value</th> |
| <tbody id="results_body"> |
| </tbody> |
| </table> |
| </section> |
| |
| <section class="results"> |
| <h2>Results while display:none</h2> |
| <table> |
| <thead> |
| <tr> |
| <th>Hidden Property</th> |
| <th>Pass?</th> |
| <th>Set Value</th> |
| <th>Computed Value</th> |
| <tbody id="results_hidden_body"> |
| </tbody> |
| </table> |
| </section> |
| </section> |
| |
| <div id="test_area"> |
| <div id="zoomed_and_displayed" class="test_div"> |
| This div has a zoom value of "2." It has a width of 300px. |
| Its background size is: 400px by 300px. |
| </div> |
| <div id="zoomed_and_hidden" class="test_div"> |
| This div is has a zoom value of "2" and is hidden. It has a width of 300px. |
| Its background size is: 400px by 300px. |
| </div> |
| </div> |
| |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| |
| var propertiesToCheck = { |
| "background-position": "10px 10px", |
| "background-size": "400px 300px", |
| "-webkit-border-horizontal-spacing": "10px", |
| "-webkit-border-vertical-spacing": "10px", |
| |
| // Need style or width won't be applied |
| "border-top-style": "solid", |
| "border-top-width": "2px", |
| "border-right-style": "solid", |
| "border-right-width": "2px", |
| "border-bottom-style": "solid", |
| "border-bottom-width": "2px", |
| "border-left-style": "solid", |
| "border-left-width": "2px", |
| |
| "border-top-left-radius": "5px", |
| "border-top-right-radius": "5px", |
| "border-bottom-left-radius": "5px", |
| "border-bottom-right-radius": "5px", |
| |
| // Need style or width won't be applied |
| "outline-style": "solid", |
| "outline-width": "2px", |
| |
| // Need style or width won't be applied |
| "-webkit-column-rule-width": "10px", |
| "-webkit-column-rule-style": "solid", |
| |
| "-webkit-column-width": "80px", |
| "-webkit-column-gap": "20px", |
| |
| "-webkit-mask-position": "10px 10px", |
| "-webkit-mask-size": "10px 10px", |
| "-webkit-perspective": "400px", |
| "-webkit-perspective-origin": "20px 20px", |
| "-webkit-text-stroke-width": "2px", |
| "-webkit-transform-origin": "10px 10px", |
| |
| "position":"absolute", |
| |
| "left": "20px", |
| "top": "20px", |
| |
| "font-size": "20px", |
| "width": "400px", |
| "max-width": "900px", |
| "min-width": "200px", |
| "height": "250px", |
| "max-height": "600px", |
| "min-height": "200px", |
| "letter-spacing": "2px", |
| "word-spacing": "10px", |
| |
| "margin-top": "10px", |
| "margin-right": "10px", |
| "margin-bottom": "10px", |
| "margin-left": "10px", |
| |
| "padding-top": "10px", |
| "padding-right": "10px", |
| "padding-bottom": "10px", |
| "padding-left": "10px", |
| |
| "text-indent": "10px" |
| }; |
| |
| |
| var zoomedAndDisplayed = document.getElementById("zoomed_and_displayed"), |
| zoomedAndHidden = document.getElementById("zoomed_and_hidden"), |
| tbody = document.getElementById("results_body"), |
| tbodyHidden = document.getElementById("results_hidden_body"), |
| overallPass = true, |
| computed; |
| |
| var testProperties = function(testElement, resultBody) { |
| // Apply properties |
| for (var property in propertiesToCheck) { |
| testElement.style[property] = propertiesToCheck[property]; |
| } |
| |
| // Check properties |
| var computed = document.defaultView.getComputedStyle(testElement) |
| for (var property in propertiesToCheck) { |
| var originalValue = propertiesToCheck[property], |
| computedValue = computed[property], |
| pass = computedValue == originalValue; |
| |
| var row = document.createElement("tr"), |
| propertyCell = document.createElement("td"), |
| passCell = document.createElement("td"), |
| originalCell = document.createElement("td"), |
| computedCell = document.createElement("td"); |
| |
| propertyCell.appendChild(document.createTextNode(property)); |
| passCell.appendChild(document.createTextNode(pass ? "PASS" : "FAIL")); |
| originalCell.appendChild(document.createTextNode(originalValue)); |
| computedCell.appendChild(document.createTextNode(computedValue)); |
| row.appendChild(propertyCell); |
| row.appendChild(passCell); |
| row.appendChild(originalCell); |
| row.appendChild(computedCell); |
| row.className = "test-" + (pass ? "pass" : "fail"); |
| resultBody.appendChild(row); |
| |
| overallPass = overallPass && pass; |
| } |
| }; |
| |
| testProperties(zoomedAndDisplayed, tbody); |
| testProperties(zoomedAndHidden, tbodyHidden); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
