<!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-marquee-increment": "10px",
      "-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",
      "right": "50px",
      "bottom": "50px",
      
      "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>