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

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 1676513003: Move background/webkit-mask shorthands into CSSPropertyParser (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix background-size logic Created 4 years, 9 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
« third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-per-layer.html ('K') | « third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt » ('j') | third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp » ('J')
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 borde r-box'; 25 e.style.background = 'center / cover red url("dummy://test.png") no-repeat borde r-box';
26 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / c over no-repeat border-box border-box red'); 26 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") center cent er / cover no-repeat border-box border-box red');
27 shouldBeEqualToString("e.style.backgroundSize", 'cover'); 27 shouldBeEqualToString("e.style.backgroundSize", 'cover');
28 shouldBe("checkStyle()", "true"); 28 shouldBe("checkStyle()", "true");
29 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cove r'); 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 paddi ng-box'; 34 e.style.background = 'red 20px / contain url("dummy://test.png") no-repeat paddi ng-box';
35 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px 50% / contain no-repeat padding-box padding-box red'); 35 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px center / contain no-repeat padding-box padding-box red');
36 shouldBeEqualToString("e.style.backgroundSize", 'contain'); 36 shouldBeEqualToString("e.style.backgroundSize", 'contain');
37 shouldBe("checkStyle()", "true"); 37 shouldBe("checkStyle()", "true");
38 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box pa dding-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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cont ain'); 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 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red'); 44 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red');
45 shouldBeEqualToString("e.style.backgroundSize", '50% 75%'); 45 shouldBeEqualToString("e.style.backgroundSize", '50% 75%');
46 shouldBe("checkStyle()", "true"); 46 shouldBe("checkStyle()", "true");
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'); 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 shouldBeEqualToString('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 border-box content-box'; 52 e.style.background = 'red url("dummy://test.png") repeat top left / 100px 200px border-box content-box';
53 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 0% 0% / 100 px 200px repeat border-box content-box red'); 53 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px 200px repeat border-box content-box red');
54 shouldBeEqualToString("e.style.backgroundSize", '100px 200px'); 54 shouldBeEqualToString("e.style.backgroundSize", '100px 200px');
55 shouldBe("checkStyle()", "true"); 55 shouldBe("checkStyle()", "true");
56 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box conte nt-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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100p x 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 -box padding-box'; 61 e.style.background = 'red url("dummy://test.png") repeat 50% / auto auto content -box padding-box';
62 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / a uto repeat content-box padding-box red'); 62 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat content-box padding-box red');
63 shouldBeEqualToString("e.style.backgroundSize", 'auto'); 63 shouldBeEqualToString("e.style.backgroundSize", 'auto');
64 shouldBe("checkStyle()", "true"); 64 shouldBe("checkStyle()", "true");
65 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-b ox'); 65 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-b ox');
66 shouldBeEqualToString('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 fixe d'; 70 e.style.background = 'url("dummy://test.png") red 50px 60px / 50% no-repeat fixe d';
71 shouldBeEqualToString("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 shouldBeEqualToString("e.style.backgroundSize", '50%'); 72 shouldBeEqualToString("e.style.backgroundSize", '50%');
73 shouldBe("checkStyle()", "true"); 73 shouldBe("checkStyle()", "true");
74 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://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 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 0% 0% / 100 px repeat scroll padding-box border-box red'); 80 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px repeat scroll padding-box border-box red');
81 shouldBeEqualToString("e.style.backgroundSize", '100px'); 81 shouldBeEqualToString("e.style.backgroundSize", '100px');
82 shouldBe("checkStyle()", "true"); 82 shouldBe("checkStyle()", "true");
83 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://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 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100p x'); 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-bo x red'; 88 e.style.background = '50% / auto fixed url("dummy://test.png") repeat content-bo x red';
89 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% 50% / a uto repeat fixed content-box content-box red'); 89 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat fixed content-box content-box red');
90 shouldBeEqualToString("e.style.backgroundSize", 'auto'); 90 shouldBeEqualToString("e.style.backgroundSize", 'auto');
91 shouldBe("checkStyle()", "true"); 91 shouldBe("checkStyle()", "true");
92 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-bo x'); 92 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-bo x');
93 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", '0% 0% / 50%'); 98 shouldBeEqualToString("e.style.background", 'left top / 50%');
99 shouldBeEqualToString("e.style.backgroundSize", '50%'); 99 shouldBeEqualToString("e.style.backgroundSize", '50%');
100 shouldBe("checkStyle()", "true"); 100 shouldBe("checkStyle()", "true");
101 shouldBeEqualToString('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 shouldBeEqualToString('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 shouldBeEqualToString("e.style.background", 'fixed red'); 107 shouldBeEqualToString("e.style.background", 'fixed red');
108 shouldBeEqualToString("e.style.backgroundSize", 'initial'); 108 shouldBeEqualToString("e.style.backgroundSize", 'initial');
(...skipping 28 matching lines...) Expand all
137 shouldBeEqualToString("e.style.background", ''); 137 shouldBeEqualToString("e.style.background", '');
138 shouldBeEqualToString("e.style.backgroundSize", ''); 138 shouldBeEqualToString("e.style.backgroundSize", '');
139 shouldBe("checkStyle()", "true"); 139 shouldBe("checkStyle()", "true");
140 shouldBeEqualToString('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 shouldBeEqualToString('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
« third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-per-layer.html ('K') | « third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt » ('j') | third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698