third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8" />
   5 <title>getComputedStyle() Zoom and Background Size</title>
   6 <style>
   7   #test_area {
   8     position: relative;
   9   }
  10   .test_div {
  11     zoom: 2;
  12     width: 300px;
  13   }
  14
  15   #zoomed_and_displayed {
  16     display: block;
  17   }
  18   #zoomed_and_hidden {
  19     display: none;
  20   }
  21
  22   #results {
  23     overflow: hidden;
  24   }
  25     .results {
  26       float: left;
  27       margin-right: 2em;
  28     }
  29       .results table {
  30         border-collapse: collapse;
  31         line-height: 1.4em;
  32       }
  33       .results th {
  34         text-align: left;
  35       }
  36       .results th,
  37       .results td {
  38         padding: 0 1em 0 0;
  39         border-bottom: 1px solid #ddd;
  40       }
  41       .results .test-pass {
  42         color: green;
  43       }
  44       .results .test-fail {
  45         color: red;
  46       }
  47 </style>
  48 </head>
  49 <body>
  50   Checks that getComputedStyle() on a zoomed element returns the right thing.
  51   <section id="results">
  52     <section class="results">
  53       <h2>Results while display:block</h2>
  54       <table>
  55         <thead>
  56           <tr>
  57             <th>Property</th>
  58             <th>Pass?</th>
  59             <th>Set Value</th>
  60             <th>Computed Value</th>
  61         <tbody id="results_body">
  62         </tbody>
  63       </table>
  64     </section>
  65
  66     <section class="results">
  67       <h2>Results while display:none</h2>
  68       <table>
  69         <thead>
  70           <tr>
  71             <th>Hidden Property</th>
  72             <th>Pass?</th>
  73             <th>Set Value</th>
  74             <th>Computed Value</th>
  75         <tbody id="results_hidden_body">
  76         </tbody>
  77       </table>
  78     </section>
  79   </section>
  80
  81   <div id="test_area">
  82     <div id="zoomed_and_displayed" class="test_div">
  83       This div has a zoom value of "2." It has a width of 300px.
  84       Its background size is: 400px by 300px.
  85     </div>
  86     <div id="zoomed_and_hidden" class="test_div">
  87       This div is has a zoom value of "2" and is hidden. It has a width of 300px.
  88       Its background size is: 400px by 300px.
  89     </div>
  90   </div>
  91
  92   <script type="text/javascript" charset="utf-8">
  93     if (window.testRunner)
  94         window.testRunner.dumpAsText();
  95
  96     var propertiesToCheck = {
  97       "background-position": "10px 10px",
  98       "background-size": "400px 300px",
  99       "-webkit-border-horizontal-spacing": "10px",
 100       "-webkit-border-vertical-spacing": "10px",
 101
 102       // Need style or width won't be applied
 103       "border-top-style": "solid",
 104       "border-top-width": "2px",
 105       "border-right-style": "solid",
 106       "border-right-width": "2px",
 107       "border-bottom-style": "solid",
 108       "border-bottom-width": "2px",
 109       "border-left-style": "solid",
 110       "border-left-width": "2px",
 111
 112       "border-top-left-radius": "5px",
 113       "border-top-right-radius": "5px",
 114       "border-bottom-left-radius": "5px",
 115       "border-bottom-right-radius": "5px",
 116
 117       // Need style or width won't be applied
 118       "outline-style": "solid",
 119       "outline-width": "2px",
 120
 121       // Need style or width won't be applied
 122       "-webkit-column-rule-width": "10px",
 123       "-webkit-column-rule-style": "solid",
 124
 125       "-webkit-column-width": "80px",
 126       "-webkit-column-gap": "20px",
 127
 128       "-webkit-mask-position": "10px 10px",
 129       "-webkit-mask-size": "10px 10px",
 130       "-webkit-perspective": "400px",
 131       "-webkit-perspective-origin": "20px 20px",
 132       "-webkit-text-stroke-width": "2px",
 133       "-webkit-transform-origin": "10px 10px",
 134
 135       "position":"absolute",
 136
 137       "left": "20px",
 138       "top": "20px",
 139       "right": "50px",
 140       "bottom": "50px",
 141
 142       "font-size": "20px",
 143       "width": "400px",
 144       "max-width": "900px",
 145       "min-width": "200px",
 146       "height": "250px",
 147       "max-height": "600px",
 148       "min-height": "200px",
 149       "letter-spacing": "2px",
 150       "word-spacing": "10px",
 151
 152       "margin-top": "10px",
 153       "margin-right": "10px",
 154       "margin-bottom": "10px",
 155       "margin-left": "10px",
 156
 157       "padding-top": "10px",
 158       "padding-right": "10px",
 159       "padding-bottom": "10px",
 160       "padding-left": "10px",
 161
 162       "text-indent": "10px"
 163     };
 164
 165
 166     var zoomedAndDisplayed = document.getElementById("zoomed_and_displayed"),
 167         zoomedAndHidden    = document.getElementById("zoomed_and_hidden"),
 168         tbody              = document.getElementById("results_body"),
 169         tbodyHidden        = document.getElementById("results_hidden_body"),
 170         overallPass        = true,
 171         computed;
 172
 173     var testProperties = function(testElement, resultBody) {
 174       // Apply properties
 175       for (var property in propertiesToCheck) {
 176         testElement.style[property] = propertiesToCheck[property];
 177       }
 178
 179       // Check properties
 180       var computed = document.defaultView.getComputedStyle(testElement)
 181       for (var property in propertiesToCheck) {
 182         var originalValue = propertiesToCheck[property],
 183             computedValue = computed[property],
 184             pass = computedValue == originalValue;
 185
 186         var row = document.createElement("tr"),
 187             propertyCell = document.createElement("td"),
 188             passCell = document.createElement("td"),
 189             originalCell = document.createElement("td"),
 190             computedCell = document.createElement("td");
 191
 192         propertyCell.appendChild(document.createTextNode(property));
 193         passCell.appendChild(document.createTextNode(pass ? "PASS" : "FAIL"));
 194         originalCell.appendChild(document.createTextNode(originalValue));
 195         computedCell.appendChild(document.createTextNode(computedValue));
 196         row.appendChild(propertyCell);
 197         row.appendChild(passCell);
 198         row.appendChild(originalCell);
 199         row.appendChild(computedCell);
 200         row.className = "test-" + (pass ? "pass" : "fail");
 201         resultBody.appendChild(row);
 202
 203         overallPass = overallPass && pass;
 204       }
 205     };
 206
 207     testProperties(zoomedAndDisplayed, tbody);
 208     testProperties(zoomedAndHidden, tbodyHidden);
 209   </script>
 210
 211
 212
 213 </body>
 214 </html>