Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(263)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html

Issue 1355263002: Make sure <url>s are being serialized according to spec (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@urlThing161644
Patch Set: Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/fast/backgrounds/background-shorthand-multiple-layers-expected.txt ('k') | LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <script src="../../resources/js-test.js"></script> 3 <script src="../../resources/js-test.js"></script>
4 <div id="test"> </div> 4 <div id="test"> </div>
5 <script> 5 <script>
6 description("Tests background shortand property with background-size"); 6 description("Tests background shortand property with background-size");
7 7
8 var e = document.getElementById('test'); 8 var e = document.getElementById('test');
9 var computedStyle = window.getComputedStyle(e, null); 9 var computedStyle = window.getComputedStyle(e, null);
10 10
11 function checkStyle() { 11 function checkStyle() {
12 var before = e.style.background; 12 var before = e.style.background;
13 e.style.background = 'none'; 13 e.style.background = 'none';
14 e.style.background = before; 14 e.style.background = before;
15 return (e.style.background == before); 15 return (e.style.background == before);
16 } 16 }
17 17
18 function checkComputedStyleValue() { 18 function checkComputedStyleValue() {
19 var before = window.getComputedStyle(e, null).getPropertyValue('background') ; 19 var before = window.getComputedStyle(e, null).getPropertyValue('background') ;
20 e.style.background = 'none'; 20 e.style.background = 'none';
21 e.style.background = before; 21 e.style.background = before;
22 return (window.getComputedStyle(e, null).getPropertyValue('background') == b efore); 22 return (window.getComputedStyle(e, null).getPropertyValue('background') == b efore);
23 } 23 }
24 24
25 e.style.background = "center / cover red url(dummy://test.png) no-repeat border- box"; 25 e.style.background = "center / cover red url(\"dummy://test.png\") no-repeat bor der-box";
26 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / cover no-repeat border-box border-box red'"); 26 shouldBe("e.style.background", "'url(\"dummy://test.png\") 50% 50% / cover no-re peat border-box border-box red'");
27 shouldBe("e.style.backgroundSize", "'cover'"); 27 shouldBe("e.style.backgroundSize", "'cover'");
28 shouldBe("checkStyle()", "true"); 28 shouldBe("checkStyle()", "true");
29 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) no-repeat scroll 50% 50% / cover border-box border-box'"); 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'"); 30 shouldBe('computedStyle.getPropertyValue("background-size")', "'cover'");
31 shouldBe("checkComputedStyleValue()", "true"); 31 shouldBe("checkComputedStyleValue()", "true");
32 debug("") 32 debug("")
33 33
34 e.style.background = "red 20px / contain url(dummy://test.png) no-repeat padding -box"; 34 e.style.background = "red 20px / contain url(\"dummy://test.png\") no-repeat pad ding-box";
35 shouldBe("e.style.background", "'url(dummy://test.png) 20px 50% / contain no-rep eat padding-box padding-box red'"); 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'"); 36 shouldBe("e.style.backgroundSize", "'contain'");
37 shouldBe("checkStyle()", "true"); 37 shouldBe("checkStyle()", "true");
38 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) no-repeat scroll 20px 50% / contain padding-box padding-box'"); 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'"); 39 shouldBe('computedStyle.getPropertyValue("background-size")', "'contain'");
40 shouldBe("checkComputedStyleValue()", "true"); 40 shouldBe("checkComputedStyleValue()", "true");
41 debug("") 41 debug("")
42 42
43 e.style.background = "red url(dummy://test.png) 50px 60px / 50% 75% no-repeat"; 43 e.style.background = "red url(\"dummy://test.png\") 50px 60px / 50% 75% no-repea t";
44 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% 75% no-re peat red'"); 44 shouldBe("e.style.background", "'url(\"dummy://test.png\") 50px 60px / 50% 75% n o-repeat red'");
45 shouldBe("e.style.backgroundSize", "'50% 75%'"); 45 shouldBe("e.style.backgroundSize", "'50% 75%'");
46 shouldBe("checkStyle()", "true"); 46 shouldBe("checkStyle()", "true");
47 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) no-repeat scroll 50px 60px / 50% 75% padding-box border-box'"); 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%'"); 48 shouldBe('computedStyle.getPropertyValue("background-size")', "'50% 75%'");
49 shouldBe("checkComputedStyleValue()", "true"); 49 shouldBe("checkComputedStyleValue()", "true");
50 debug("") 50 debug("")
51 51
52 e.style.background = "red url(dummy://test.png) repeat top left / 100px 200px bo rder-box content-box"; 52 e.style.background = "red url(\"dummy://test.png\") repeat top left / 100px 200p x border-box content-box";
53 shouldBe("e.style.background", "'url(dummy://test.png) 0% 0% / 100px 200px repea t border-box content-box red'"); 53 shouldBe("e.style.background", "'url(\"dummy://test.png\") 0% 0% / 100px 200px r epeat border-box content-box red'");
54 shouldBe("e.style.backgroundSize", "'100px 200px'"); 54 shouldBe("e.style.backgroundSize", "'100px 200px'");
55 shouldBe("checkStyle()", "true"); 55 shouldBe("checkStyle()", "true");
56 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) repeat scroll 0% 0% / 100px 200px border-box content-box'"); 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'"); 57 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px 200px'");
58 shouldBe("checkComputedStyleValue()", "true"); 58 shouldBe("checkComputedStyleValue()", "true");
59 debug("") 59 debug("")
60 60
61 e.style.background = "red url(dummy://test.png) repeat 50% / auto auto content-b ox padding-box"; 61 e.style.background = "red url(\"dummy://test.png\") repeat 50% / auto auto conte nt-box padding-box";
62 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat con tent-box padding-box red'"); 62 shouldBe("e.style.background", "'url(\"dummy://test.png\") 50% 50% / auto repeat content-box padding-box red'");
63 shouldBe("e.style.backgroundSize", "'auto'"); 63 shouldBe("e.style.backgroundSize", "'auto'");
64 shouldBe("checkStyle()", "true"); 64 shouldBe("checkStyle()", "true");
65 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) repeat scroll 50% 50% / auto content-box padding-box'"); 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'"); 66 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
67 shouldBe("checkComputedStyleValue()", "true"); 67 shouldBe("checkComputedStyleValue()", "true");
68 debug("") 68 debug("")
69 69
70 e.style.background = "url(dummy://test.png) red 50px 60px / 50% no-repeat fixed" ; 70 e.style.background = "url(\"dummy://test.png\") red 50px 60px / 50% no-repeat fi xed";
71 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% no-repeat fixed red'"); 71 shouldBe("e.style.background", "'url(\"dummy://test.png\") 50px 60px / 50% no-re peat fixed red'");
72 shouldBe("e.style.backgroundSize", "'50%'"); 72 shouldBe("e.style.backgroundSize", "'50%'");
73 shouldBe("checkStyle()", "true"); 73 shouldBe("checkStyle()", "true");
74 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) no-repeat fixed 50px 60px / 50% padding-box border-box'"); 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%'"); 75 shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
76 shouldBe("checkComputedStyleValue()", "true"); 76 shouldBe("checkComputedStyleValue()", "true");
77 debug("") 77 debug("")
78 78
79 e.style.background = "red repeat scroll padding-box border-box top left / 100px url(dummy://test.png)"; 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 scro ll padding-box border-box red'"); 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'"); 81 shouldBe("e.style.backgroundSize", "'100px'");
82 shouldBe("checkStyle()", "true"); 82 shouldBe("checkStyle()", "true");
83 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) repeat scroll 0% 0% / 100px padding-box border-box'"); 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'"); 84 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px'");
85 shouldBe("checkComputedStyleValue()", "true"); 85 shouldBe("checkComputedStyleValue()", "true");
86 debug("") 86 debug("")
87 87
88 e.style.background = "50% / auto fixed url(dummy://test.png) repeat content-box red"; 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 fix ed content-box 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'"); 90 shouldBe("e.style.backgroundSize", "'auto'");
91 shouldBe("checkStyle()", "true"); 91 shouldBe("checkStyle()", "true");
92 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(du mmy://test.png) repeat fixed 50% 50% / auto content-box content-box'"); 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'"); 93 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
94 shouldBe("checkComputedStyleValue()", "true"); 94 shouldBe("checkComputedStyleValue()", "true");
95 debug("") 95 debug("")
96 96
97 e.style.background = "top left / 50%"; 97 e.style.background = "top left / 50%";
98 shouldBe("e.style.background", "'0% 0% / 50%'"); 98 shouldBe("e.style.background", "'0% 0% / 50%'");
99 shouldBe("e.style.backgroundSize", "'50%'"); 99 shouldBe("e.style.backgroundSize", "'50%'");
100 shouldBe("checkStyle()", "true"); 100 shouldBe("checkStyle()", "true");
101 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50% padding-box border-box'"); 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%'"); 102 shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
103 shouldBe("checkComputedStyleValue()", "true"); 103 shouldBe("checkComputedStyleValue()", "true");
104 debug("") 104 debug("")
105 105
106 e.style.background = "red fixed"; 106 e.style.background = "red fixed";
107 shouldBe("e.style.background", "'fixed red'"); 107 shouldBe("e.style.background", "'fixed red'");
108 shouldBe("e.style.backgroundSize", "'initial'"); 108 shouldBe("e.style.backgroundSize", "'initial'");
109 shouldBe("checkStyle()", "true"); 109 shouldBe("checkStyle()", "true");
110 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none r epeat fixed 0% 0% / auto padding-box border-box'"); 110 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none r epeat fixed 0% 0% / auto padding-box border-box'");
111 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'"); 111 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
112 shouldBe("checkComputedStyleValue()", "true"); 112 shouldBe("checkComputedStyleValue()", "true");
113 debug("") 113 debug("")
114 114
115 e.style.background = ""; 115 e.style.background = "";
116 e.style.background = "red / cover url(dummy://test.png) repeat"; 116 e.style.background = "red / cover url(\"dummy://test.png\") repeat";
117 shouldBe("e.style.background", "''"); 117 shouldBe("e.style.background", "''");
118 shouldBe("e.style.backgroundSize", "''"); 118 shouldBe("e.style.backgroundSize", "''");
119 shouldBe("checkStyle()", "true"); 119 shouldBe("checkStyle()", "true");
120 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 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'"); 121 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
122 shouldBe("checkComputedStyleValue()", "true"); 122 shouldBe("checkComputedStyleValue()", "true");
123 debug("") 123 debug("")
124 124
125 e.style.background = ""; 125 e.style.background = "";
126 e.style.background = "red url(dummy://test.png) repeat 25px / contain contain"; 126 e.style.background = "red url(\"dummy://test.png\") repeat 25px / contain contai n";
127 shouldBe("e.style.background", "''"); 127 shouldBe("e.style.background", "''");
128 shouldBe("e.style.backgroundSize", "''"); 128 shouldBe("e.style.backgroundSize", "''");
129 shouldBe("checkStyle()", "true"); 129 shouldBe("checkStyle()", "true");
130 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 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'"); 131 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
132 shouldBe("checkComputedStyleValue()", "true"); 132 shouldBe("checkComputedStyleValue()", "true");
133 debug("") 133 debug("")
134 134
135 e.style.background = ""; 135 e.style.background = "";
136 e.style.background = "red top left / 100px cover url(dummy://test.png) repeat"; 136 e.style.background = "red top left / 100px cover url(\"dummy://test.png\") repea t";
137 shouldBe("e.style.background", "''"); 137 shouldBe("e.style.background", "''");
138 shouldBe("e.style.backgroundSize", "''"); 138 shouldBe("e.style.backgroundSize", "''");
139 shouldBe("checkStyle()", "true"); 139 shouldBe("checkStyle()", "true");
140 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 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'"); 141 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
142 shouldBe("checkComputedStyleValue()", "true"); 142 shouldBe("checkComputedStyleValue()", "true");
143 debug("") 143 debug("")
144 </script> 144 </script>
145 </body> 145 </body>
146 </html> 146 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/backgrounds/background-shorthand-multiple-layers-expected.txt ('k') | LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698