background-size-001

background-size - initial and supported values

WeasyPrint

This browser

Flags
dom, script
Assertion
Check if background-size initial value is auto and supports values auto, cover and contain

Source

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