213 lines
5.9 KiB
HTML
213 lines
5.9 KiB
HTML
<!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>
|