<!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)
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",
"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>
Codebase Browser
chromium