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

Side by Side Diff: LayoutTests/compositing/will-change/parse-will-change.html

Issue 167603002: Implement 'will-change' parsing (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 10 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 | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #willChangeOpacity {
6 will-change: opacity;
7 }
8
9 #willChangeScrollPosition {
10 will-change: scroll-position;
11 }
12
13 #willChangeContents {
14 will-change: contents;
15 }
16
17 #willChangeMultiple {
18 will-change: opacity, contents, left, -webkit-transform;
19 }
20
21 #willChangeWithArbitraryIdent {
22 will-change: opacity, i-am-not-a-property, top;
23 }
24
25 </style>
26 <script src="../../resources/js-test.js"></script>
27 </head>
28 <body>
29 <div id="willChangeOpacity"></div>
30 <div id="willChangeScrollPosition"></div>
31 <div id="willChangeContents"></div>
32 <div id="willChangeMultiple"></div>
33 <div id="willChangeWithArbitraryIdent"></div>
34 <script>
35 description('Test that setting and getting will-change works as expected');
36
37 debug("Test getting will-change set through CSS");
38 var willChangeOpacity = document.getElementById("willChangeOpacity");
39 shouldBe("getComputedStyle(willChangeOpacity, '').getPropertyValue('will-change' )", "'opacity'");
40
41 var willChangeScrollPosition = document.getElementById("willChangeScrollPosition ");
42 shouldBe("getComputedStyle(willChangeScrollPosition, '').getPropertyValue('will- change')", "'scroll-position'");
43
44 var willChangeContents = document.getElementById("willChangeContents");
45 shouldBe("getComputedStyle(willChangeContents, '').getPropertyValue('will-change ')", "'contents'");
46
47 var willChangeMultiple = document.getElementById("willChangeMultiple");
48 shouldBe("getComputedStyle(willChangeMultiple, '').getPropertyValue('will-change ')", "'contents, opacity, left, -webkit-transform'");
49
50 var willChangeContents = document.getElementById("willChangeWithArbitraryIdent") ;
51 shouldBe("getComputedStyle(willChangeWithArbitraryIdent, '').getPropertyValue('w ill-change')", "'opacity, top'");
52
53 debug("");
54 debug("Test initial value of will-change");
55 var element = document.createElement("div");
56 document.body.appendChild(element);
57 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
58
59 debug("");
60 debug("Test getting and setting will-change through JS");
61 element = document.createElement("div");
62 document.body.appendChild(element);
63 element.style.willChange = "opacity";
64 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac ity'");
65
66 element.style.willChange = "scroll-position";
67 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'scro ll-position'");
68
69 element.style.willChange = "contents";
70 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont ents'");
71
72 element.style.willChange = "contents, scroll-position, opacity, -webkit-transfor m";
73 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont ents, scroll-position, opacity, -webkit-transform'");
74
75 element.style.willChange = "i-am-not-a-property, opacity, top";
76 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac ity, top'");
77
78 element.style.willChange = "opacity, i-am-not-a-property, top";
79 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac ity, top'");
80
81 element.style.willChange = "opacity, top, i-am-not-a-property";
82 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac ity, top'");
83
84 element.style.willChange = "i-am-not-a-property";
85 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
86
87 debug("");
88 debug("Test that illegal will-change values are disallowed");
89 element.style.willChange = "auto";
90 element.style.willChange = "opacity, will-change";
91 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
92
93 element.style.willChange = "none";
94 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
95
96 element.style.willChange = "none, opacity";
97 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
98
99 element.style.willChange = "all";
100 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
101
102 element.style.willChange = "all, opacity";
103 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
104
105 element.style.willChange = "left, auto, top";
106 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
107
108 element.style.willChange = "left, default";
109 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
110
111 element.style.willChange = "initial, top";
112 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
113
114 element.style.willChange = "top, inherit";
115 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
116
117 debug("");
118 debug("Test the value 'initial'");
119 element.style.willChange = "opacity";
120 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac ity'");
121 element.style.willChange = "initial";
122 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
123
124 debug("");
125 debug("Test the value 'inherit'");
126 var parentElement = document.createElement("div");
127 document.body.appendChild(parentElement);
128 parentElement.style.willChange = "contents, opacity, top";
129 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')", "'contents, opacity, top'");
130 element = document.createElement("div");
131 parentElement.appendChild(element);
132 element.style.willChange = "inherit";
133 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont ents, opacity, top'");
134
135 debug("");
136 debug("Test that will-change is not inherited by default");
137 var parentElement = document.createElement("div");
138 document.body.appendChild(parentElement);
139 parentElement.style.willChange = "opacity";
140 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')", "'opacity'");
141 element = document.createElement("div");
142 parentElement.appendChild(element);
143 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto '");
144 </script>
145 </body>
146 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698