1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Backgrounds and Borders Test: background-size - initial and supported values</title>
<link rel="author" title="Intel" href="http://www.intel.com" />
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
<meta name="flags" content="dom" />
<meta name="assert" content="Check if background-size initial value is auto and supports values auto, cover and contain" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"auto", "background-size initial value");
}, "background-size_initial");
document.getElementById("test").style.backgroundSize = "auto";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"auto", "background-size supporting value");
}, "background-size_auto");
document.getElementById("test").style.backgroundSize = "cover";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"cover", "background-size supporting value");
}, "background-size_cover");
document.getElementById("test").style.backgroundSize = "contain";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"contain", "background-size supporting value");
}, "background-size_contain");
document.getElementById("test").style.backgroundSize = "0px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"0px auto", "background-size supporting value");
}, "background-size_length_zero");
document.getElementById("test").style.backgroundSize = "-0px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"0px auto", "background-size supporting value");
}, "background-size_length_negative_zero");
document.getElementById("test").style.backgroundSize = "+0px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"0px auto", "background-size supporting value");
}, "background-size_length_positive_zero");
document.getElementById("test").style.backgroundSize = "15px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"15px auto", "background-size supporting value");
}, "background-size_length_normal");
document.getElementById("test").style.backgroundSize = "0%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"0% auto", "background-size supporting value");
}, "background-size_percentage_min");
document.getElementById("test").style.backgroundSize = "50%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"50% auto", "background-size supporting value");
}, "background-size_percentage_normal");
document.getElementById("test").style.backgroundSize = "100%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"100% auto", "background-size supporting value");
}, "background-size_percentage_max");
document.getElementById("test").style.backgroundSize = "auto auto";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"auto", "background-size supporting value");
}, "background-size_auto_auto");
document.getElementById("test").style.backgroundSize = "auto 15px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"auto 15px", "background-size supporting value");
}, "background-size_auto_length");
document.getElementById("test").style.backgroundSize = "auto 50%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"auto 50%", "background-size supporting value");
}, "background-size_auto_percentage");
document.getElementById("test").style.backgroundSize = "15px auto";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"15px auto", "background-size supporting value");
}, "background-size_length_auto");
document.getElementById("test").style.backgroundSize = "15px 15px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"15px 15px", "background-size supporting value");
}, "background-size_length_length");
document.getElementById("test").style.backgroundSize = "15px 50%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"15px 50%", "background-size supporting value");
}, "background-size_length_percentage");
document.getElementById("test").style.backgroundSize = "50% auto";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"50% auto", "background-size supporting value");
}, "background-size_percentage_auto");
document.getElementById("test").style.backgroundSize = "50% 15px";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"50% 15px", "background-size supporting value");
}, "background-size_percentage_length");
document.getElementById("test").style.backgroundSize = "50% 50%";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
"50% 50%", "background-size supporting value");
}, "background-size_percentage_percentage");
</script>
</body>
</html>
|