third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script src="../../resources/js-test.js"></script>
   4 <div id="test"> </div>
   5 <script>
   6 description("Tests background shortand property with background-size");
   7
   8 var e = document.getElementById('test');
   9 var computedStyle = window.getComputedStyle(e, null);
  10
  11 function checkStyle() {
  12     var before = e.style.background;
  13     e.style.background = 'none';
  14     e.style.background = before;
  15     return (e.style.background == before);
  16 }
  17
  18 function checkComputedStyleValue() {
  19     var before = window.getComputedStyle(e, null).getPropertyValue('background');
  20     e.style.background = 'none';
  21     e.style.background = before;
  22     return (window.getComputedStyle(e, null).getPropertyValue('background') == before);
  23 }
  24
  25 e.style.background = "center / cover red url(dummy://test.png) no-repeat border-box";
  26 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / cover no-repeat border-box border-box red'");
  27 shouldBe("e.style.backgroundSize", "'cover'");
  28 shouldBe("checkStyle()", "true");
  29 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50% 50% / cover border-box border-box'");
  30 shouldBe('computedStyle.getPropertyValue("background-size")', "'cover'");
  31 shouldBe("checkComputedStyleValue()", "true");
  32 debug("")
  33
  34 e.style.background = "red 20px / contain url(dummy://test.png) no-repeat padding-box";
  35 shouldBe("e.style.background", "'url(dummy://test.png) 20px 50% / contain no-repeat padding-box padding-box red'");
  36 shouldBe("e.style.backgroundSize", "'contain'");
  37 shouldBe("checkStyle()", "true");
  38 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 20px 50% / contain padding-box padding-box'");
  39 shouldBe('computedStyle.getPropertyValue("background-size")', "'contain'");
  40 shouldBe("checkComputedStyleValue()", "true");
  41 debug("")
  42
  43 e.style.background = "red url(dummy://test.png) 50px 60px / 50% 75% no-repeat";
  44 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% 75% no-repeat red'");
  45 shouldBe("e.style.backgroundSize", "'50% 75%'");
  46 shouldBe("checkStyle()", "true");
  47 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50px 60px / 50% 75% padding-box border-box'");
  48 shouldBe('computedStyle.getPropertyValue("background-size")', "'50% 75%'");
  49 shouldBe("checkComputedStyleValue()", "true");
  50 debug("")
  51
  52 e.style.background = "red url(dummy://test.png) repeat top left / 100px 200px border-box content-box";
  53 shouldBe("e.style.background", "'url(dummy://test.png) 0% 0% / 100px 200px repeat border-box content-box red'");
  54 shouldBe("e.style.backgroundSize", "'100px 200px'");
  55 shouldBe("checkStyle()", "true");
  56 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px 200px border-box content-box'");
  57 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px 200px'");
  58 shouldBe("checkComputedStyleValue()", "true");
  59 debug("")
  60
  61 e.style.background = "red url(dummy://test.png) repeat 50% / auto auto content-box padding-box";
  62 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat content-box padding-box red'");
  63 shouldBe("e.style.backgroundSize", "'auto'");
  64 shouldBe("checkStyle()", "true");
  65 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 50% 50% / auto content-box padding-box'");
  66 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
  67 shouldBe("checkComputedStyleValue()", "true");
  68 debug("")
  69
  70 e.style.background = "url(dummy://test.png) red 50px 60px / 50% no-repeat fixed";
  71 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% no-repeat fixed red'");
  72 shouldBe("e.style.backgroundSize", "'50%'");
  73 shouldBe("checkStyle()", "true");
  74 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 50px 60px / 50% padding-box border-box'");
  75 shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
  76 shouldBe("checkComputedStyleValue()", "true");
  77 debug("")
  78
  79 e.style.background = "red repeat scroll padding-box border-box top left / 100px url(dummy://test.png)";
  80 shouldBe("e.style.background", "'url(dummy://test.png) 0% 0% / 100px repeat scroll padding-box border-box red'");
  81 shouldBe("e.style.backgroundSize", "'100px'");
  82 shouldBe("checkStyle()", "true");
  83 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px padding-box border-box'");
  84 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px'");
  85 shouldBe("checkComputedStyleValue()", "true");
  86 debug("")
  87
  88 e.style.background = "50% / auto fixed url(dummy://test.png) repeat content-box red";
  89 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat fixed content-box content-box red'");
  90 shouldBe("e.style.backgroundSize", "'auto'");
  91 shouldBe("checkStyle()", "true");
  92 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat fixed 50% 50% / auto content-box content-box'");
  93 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
  94 shouldBe("checkComputedStyleValue()", "true");
  95 debug("")
  96
  97 e.style.background = "top left / 50%";
  98 shouldBe("e.style.background", "'0% 0% / 50%'");
  99 shouldBe("e.style.backgroundSize", "'50%'");
 100 shouldBe("checkStyle()", "true");
 101 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50% padding-box border-box'");
 102 shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
 103 shouldBe("checkComputedStyleValue()", "true");
 104 debug("")
 105
 106 e.style.background = "red fixed";
 107 shouldBe("e.style.background", "'fixed red'");
 108 shouldBe("e.style.backgroundSize", "'initial'");
 109 shouldBe("checkStyle()", "true");
 110 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box'");
 111 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
 112 shouldBe("checkComputedStyleValue()", "true");
 113 debug("")
 114
 115 e.style.background = "";
 116 e.style.background = "red / cover url(dummy://test.png) repeat";
 117 shouldBe("e.style.background", "''");
 118 shouldBe("e.style.backgroundSize", "''");
 119 shouldBe("checkStyle()", "true");
 120 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 121 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
 122 shouldBe("checkComputedStyleValue()", "true");
 123 debug("")
 124
 125 e.style.background = "";
 126 e.style.background = "red url(dummy://test.png) repeat 25px / contain contain";
 127 shouldBe("e.style.background", "''");
 128 shouldBe("e.style.backgroundSize", "''");
 129 shouldBe("checkStyle()", "true");
 130 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 131 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
 132 shouldBe("checkComputedStyleValue()", "true");
 133 debug("")
 134
 135 e.style.background = "";
 136 e.style.background = "red top left / 100px cover url(dummy://test.png) repeat";
 137 shouldBe("e.style.background", "''");
 138 shouldBe("e.style.backgroundSize", "''");
 139 shouldBe("checkStyle()", "true");
 140 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 141 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
 142 shouldBe("checkComputedStyleValue()", "true");
 143 debug("")
 144 </script>
 145 </body>
 146 </html>