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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1363233003: Make sure <url>s are being serialized according to spec (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix interpolation tests Created 5 years, 2 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 | « third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-multiple-layers-expected.txt ('k') | third_party/WebKit/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 borde r-box';
26 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / cover no-repeat border-box border-box red'"); 26 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / c over no-repeat border-box border-box red');
27 shouldBe("e.style.backgroundSize", "'cover'"); 27 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cove r');
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 paddi ng-box';
35 shouldBe("e.style.background", "'url(dummy://test.png) 20px 50% / contain no-rep eat padding-box padding-box red'"); 35 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px 50% / contain no-repeat padding-box padding-box red');
36 shouldBe("e.style.backgroundSize", "'contain'"); 36 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box pa dding-box');
39 shouldBe('computedStyle.getPropertyValue("background-size")', "'contain'"); 39 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cont ain');
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-repeat' ;
44 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% 75% no-re peat red'"); 44 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red');
45 shouldBe("e.style.backgroundSize", "'50% 75%'"); 45 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50px 60px / 50% 75% padding-box b order-box');
48 shouldBe('computedStyle.getPropertyValue("background-size")', "'50% 75%'"); 48 shouldBeEqualToString('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 200px 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 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 0% 0% / 100 px 200px repeat border-box content-box red');
54 shouldBe("e.style.backgroundSize", "'100px 200px'"); 54 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box conte nt-box');
57 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px 200px'"); 57 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100p x 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 content -box padding-box';
62 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat con tent-box padding-box red'"); 62 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / a uto repeat content-box padding-box red');
63 shouldBe("e.style.backgroundSize", "'auto'"); 63 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-b ox');
66 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'"); 66 shouldBeEqualToString('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 fixe d';
71 shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% no-repeat fixed red'"); 71 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% no-repeat fixed red');
72 shouldBe("e.style.backgroundSize", "'50%'"); 72 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 0% 0% / 100 px repeat scroll padding-box border-box red');
81 shouldBe("e.style.backgroundSize", "'100px'"); 81 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100p x');
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-bo x red';
89 shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat fix ed content-box content-box red'"); 89 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / a uto repeat fixed content-box content-box red');
90 shouldBe("e.style.backgroundSize", "'auto'"); 90 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-bo x');
93 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'"); 93 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", '0% 0% / 50%');
99 shouldBe("e.style.backgroundSize", "'50%'"); 99 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", 'fixed red');
108 shouldBe("e.style.backgroundSize", "'initial'"); 108 shouldBeEqualToString("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 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box');
111 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'"); 111 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", '');
118 shouldBe("e.style.backgroundSize", "''"); 118 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('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 contain' ;
127 shouldBe("e.style.background", "''"); 127 shouldBeEqualToString("e.style.background", '');
128 shouldBe("e.style.backgroundSize", "''"); 128 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('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") repeat' ;
137 shouldBe("e.style.background", "''"); 137 shouldBeEqualToString("e.style.background", '');
138 shouldBe("e.style.backgroundSize", "''"); 138 shouldBeEqualToString("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 shouldBeEqualToString('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 shouldBeEqualToString('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 | « third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-multiple-layers-expected.txt ('k') | third_party/WebKit/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