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

Side by Side Diff: example/todomvc/test/expected/todomvc_mainpage2_test.html.txt

Issue 22962005: Merge pull request #581 from kevmoo/polymer (Closed) Base URL: https://github.com/dart-lang/web-ui.git@polymer
Patch Set: Created 7 years, 4 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
OLDNEW
1 Content-Type: text/plain 1 Content-Type: text/plain
2 <html lang="en"><head><style>template { display: none; }</style> 2 <html lang="en"><head><style>template { display: none; }</style>
3 <!-- 3 <!--
4 This test runs the TodoMVC app and evaluates that it renders correctly if a 4 This test runs the TodoMVC app and evaluates that it renders correctly if a
5 single item is present in the todo list. 5 single item is present in the todo list.
6 --> 6 -->
7 <meta charset="utf-8"> 7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 9
10 <link rel="stylesheet" href="../../../web/base.css"> 10 <link rel="stylesheet" href="../../../web/base.css">
11 <script src="../../packages/polymer/testing/testing.js"></script> 11 <script src="../../packages/polymer/testing/testing.js"></script>
12 <title>Dart • TodoMVC</title> 12 <title>Dart • TodoMVC</title>
13 <style>template, 13 <style>template,
14 thead[template], 14 thead[template],
15 tbody[template], 15 tbody[template],
16 tfoot[template], 16 tfoot[template],
17 th[template], 17 th[template],
18 tr[template], 18 tr[template],
19 td[template], 19 td[template],
20 caption[template], 20 caption[template],
21 colgroup[template], 21 colgroup[template],
22 col[template], 22 col[template],
23 option[template] { 23 option[template] {
24 display: none; 24 display: none;
25 }</style></head><body><polymer-element name="todo-row" extends="li" attributes=" todo"> 25 }</style></head><body><polymer-element name="todo-row" extends="li" attributes=" todo">
26 <template> 26 <template>
27 27 <style scoped="">
28 <style>
29 .todo-item { 28 .todo-item {
30 position: relative; 29 position: relative;
31 font-size: 24px; 30 font-size: 24px;
32 border-bottom: 1px dotted #ccc; 31 border-bottom: 1px dotted #ccc;
33 } 32 }
33
34 .todo-item.editing { 34 .todo-item.editing {
35 border-bottom: none; 35 border-bottom: none;
36 padding: 0; 36 padding: 0;
37 } 37 }
38
39 /*
40 TODO(jmesserly): the ".todo-item label" selector does not work with real
41 ShadowRoot because it crosses the shadow boundary.
42 */
38 .todo-item.completed [is=editable-label] { 43 .todo-item.completed [is=editable-label] {
39 color: #a9a9a9; 44 color: #a9a9a9;
40 text-decoration: line-through; 45 text-decoration: line-through;
41 } 46 }
47
42 .todo-item .toggle { 48 .todo-item .toggle {
43 text-align: center; 49 text-align: center;
44 width: 40px; 50 width: 40px;
51 /* auto, since non-WebKit browsers don't support input styling */
45 height: auto; 52 height: auto;
46 position: absolute; 53 position: absolute;
47 top: 0; 54 top: 0;
48 bottom: 0; 55 bottom: 0;
49 margin: auto 0; 56 margin: auto 0;
50 border: none; 57 border: none; /* Mobile Safari */
51 -webkit-appearance: none; 58 -webkit-appearance: none;
59 /*-moz-appearance: none;*/
52 -ms-appearance: none; 60 -ms-appearance: none;
53 -o-appearance: none; 61 -o-appearance: none;
54 appearance: none; 62 appearance: none;
55 } 63 }
64
56 .todo-item .toggle:after { 65 .todo-item .toggle:after {
57 content: "✔"; 66 content: '✔';
58 line-height: 43px; 67 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
59 font-size: 20px; 68 font-size: 20px;
60 color: #d9d9d9; 69 color: #d9d9d9;
61 text-shadow: 0 -1px 0 #bfbfbf; 70 text-shadow: 0 -1px 0 #bfbfbf;
62 } 71 }
72
63 .todo-item .toggle:checked:after { 73 .todo-item .toggle:checked:after {
64 color: #85ada7; 74 color: #85ada7;
65 text-shadow: 0 1px 0 #669991; 75 text-shadow: 0 1px 0 #669991;
66 bottom: 1px; 76 bottom: 1px;
67 position: relative; 77 position: relative;
68 } 78 }
69 .todo-item .destroy { 79 .todo-item .destroy {
70 display: none; 80 display: none;
71 position: absolute; 81 position: absolute;
72 top: 0; 82 top: 0;
73 right: 10px; 83 right: 10px;
74 bottom: 0; 84 bottom: 0;
75 width: 40px; 85 width: 40px;
76 height: 40px; 86 height: 40px;
77 margin: auto 0; 87 margin: auto 0;
78 font-size: 22px; 88 font-size: 22px;
79 color: #a88a8a; 89 color: #a88a8a;
80 -webkit-transition: all 0.2s; 90 -webkit-transition: all 0.2s;
81 -moz-transition: all 0.2s; 91 -moz-transition: all 0.2s;
82 -ms-transition: all 0.2s; 92 -ms-transition: all 0.2s;
83 -o-transition: all 0.2s; 93 -o-transition: all 0.2s;
84 transition: all 0.2s; 94 transition: all 0.2s;
85 } 95 }
96
86 .todo-item .destroy:hover { 97 .todo-item .destroy:hover {
87 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); 98 text-shadow: 0 0 1px #000,
99 0 0 10px rgba(199, 107, 107, 0.8);
88 -webkit-transform: scale(1.3); 100 -webkit-transform: scale(1.3);
89 -moz-transform: scale(1.3); 101 -moz-transform: scale(1.3);
90 -ms-transform: scale(1.3); 102 -ms-transform: scale(1.3);
91 -o-transform: scale(1.3); 103 -o-transform: scale(1.3);
92 transform: scale(1.3); 104 transform: scale(1.3);
93 } 105 }
106
94 .todo-item .destroy:after { 107 .todo-item .destroy:after {
95 content: "✖"; 108 content: '✖';
96 } 109 }
110
97 .todo-item:hover .destroy { 111 .todo-item:hover .destroy {
98 display: block; 112 display: block;
99 } 113 }
100 .todo-item.editing .destroy, .todo-item.editing .toggle { 114
115 .todo-item.editing .destroy,
116 .todo-item.editing .toggle {
101 display: none; 117 display: none;
102 } 118 }
119
103 .todo-item.editing:last-child { 120 .todo-item.editing:last-child {
104 margin-bottom: -1px; 121 margin-bottom: -1px;
105 } @media screen AND (-webkit-min-device-pixel-ratio:0) {
106 .todo-item .toggle {
107 background: none;
108 } 122 }
109 #todo-item .toggle { 123
110 height: 40px; 124 /*
125 Hack to remove background from Mobile Safari.
126 Can't use it globally since it destroys checkboxes in Firefox and Opera
127 */
128 @media screen and (-webkit-min-device-pixel-ratio:0) {
129 .todo-item .toggle {
130 background: none;
131 }
132 #todo-item .toggle {
133 height: 40px;
134 }
111 } 135 }
112 } 136 </style>
113 </style><div class="todo-item"> 137 <div class="todo-item">
114 <input class="toggle" type="checkbox" checked="{{todo.done}}"> 138 <input class="toggle" type="checkbox" checked="{{todo.done}}">
115 <div is="editable-label" id="label" value="{{todo.task}}"></div> 139 <span is="editable-label" id="label" value="{{todo.task}}"></span>
116 <button class="destroy" on-click="removeTodo"></button> 140 <button class="destroy" on-click="removeTodo"></button>
117 </div> 141 </div>
118 </template> 142 </template>
119 143
120 </polymer-element> 144 </polymer-element>
121 <polymer-element name="todo-app"> 145 <polymer-element name="todo-app">
122 <template> 146 <template>
123 <section id="todoapp"> 147 <section id="todoapp">
124 <header id="header"> 148 <header id="header">
125 <h1 class="title">todos</h1> 149 <h1 class="title">todos</h1>
126 <form on-submit="addTodo"> 150 <form on-submit="addTodo">
127 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo"> 151 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo">
128 </form> 152 </form>
129 </header> 153 </header>
130 <section id="main"> 154 <section id="main">
131 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> 155 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}">
132 <label for="toggle-all"></label> 156 <label for="toggle-all"></label>
133 <ul id="todo-list"> 157 <ul id="todo-list">
134 <template repeat="{{app.visibleTodos}}"> 158 <template repeat="{{app.visibleTodos}}">
135 <li is="todo-row" todo="{{}}"></li> 159 <li is="todo-row" todo="{{}}"></li>
136 </template> 160 </template>
137 </ul> 161 </ul>
138 </section> 162 </section>
139 <template bind="" if="{{app.hasTodos}}"> 163 <template bind="" if="{{app.todos.length &gt; 0}}">
140 <footer id="footer"> 164 <footer id="footer">
141 <span id="todo-count"><strong>{{app.remaining}}</strong></span> 165 <span id="todo-count"><strong>{{app.remaining}}</strong></span>
142 <ul is="router-options" id="filters"> 166 <ul is="router-options" id="filters">
143 <li> <a href="#/">All</a> </li> 167 <li> <a href="#/">All</a> </li>
144 <li> <a href="#/active">Active</a> </li> 168 <li> <a href="#/active">Active</a> </li>
145 <li> <a href="#/completed">Completed</a> </li> 169 <li> <a href="#/completed">Completed</a> </li>
146 </ul> 170 </ul>
147 <template bind="" if="{{app.hasCompleteTodos}}"> 171 <template bind="" if="{{app.hasCompleteTodos}}">
148 <button id="clear-completed" on-click="clear"> 172 <button id="clear-completed" on-click="clear">
149 Clear completed ({{app.doneCount}}) 173 Clear completed ({{app.doneCount}})
(...skipping 13 matching lines...) Expand all
163 </p> 187 </p>
164 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> 188 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
165 </footer> 189 </footer>
166 </template> 190 </template>
167 191
168 </polymer-element> 192 </polymer-element>
169 <polymer-element name="router-options" extends="ul"> 193 <polymer-element name="router-options" extends="ul">
170 <template><content></content></template> 194 <template><content></content></template>
171 195
172 </polymer-element> 196 </polymer-element>
173 <polymer-element name="editable-label" extends="div" attributes="value"> 197 <polymer-element name="editable-label" attributes="value">
174 <template> 198 <template>
175 <template bind="" if="{{notEditing}}"> 199 <template bind="" if="{{!editing}}">
176 <label class="edit-label" on-double-click="edit">{{value}}</label> 200 <label class="edit-label" on-double-click="edit">{{value}}</label>
177 </template> 201 </template>
178 <template bind="" if="{{editing}}"> 202 <template bind="" if="{{editing}}">
179 <form on-submit="update"> 203 <form on-submit="update">
180 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC ancel"> 204 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC ancel">
181 </form> 205 </form>
182 </template> 206 </template>
183 </template> 207 </template>
184 208
185 </polymer-element> 209 </polymer-element>
186 210
187 <span is="todo-app"><shadow-root> 211 <span is="todo-app"><shadow-root>
188 <section id="todoapp"> 212 <section id="todoapp">
189 <header id="header"> 213 <header id="header">
190 <h1 class="title">todos</h1> 214 <h1 class="title">todos</h1>
191 <form on-submit="addTodo"> 215 <form on-submit="addTodo">
192 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo"> 216 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo">
193 </form> 217 </form>
194 </header> 218 </header>
195 <section id="main"> 219 <section id="main">
196 <input id="toggle-all" type="checkbox"> 220 <input id="toggle-all" type="checkbox">
197 <label for="toggle-all"></label> 221 <label for="toggle-all"></label>
198 <ul id="todo-list"> 222 <ul id="todo-list">
199 <template repeat="{{app.visibleTodos}}"> 223 <template repeat="{{app.visibleTodos}}"></template>
200 <li is="todo-row" todo="{{}}"></li>
201 </template>
202 <li is="todo-row" todo="{{}}"><shadow-root> 224 <li is="todo-row" todo="{{}}"><shadow-root>
203 225 <style scoped="">
204 <style>
205 .todo-item { 226 .todo-item {
206 position: relative; 227 position: relative;
207 font-size: 24px; 228 font-size: 24px;
208 border-bottom: 1px dotted #ccc; 229 border-bottom: 1px dotted #ccc;
209 } 230 }
231
210 .todo-item.editing { 232 .todo-item.editing {
211 border-bottom: none; 233 border-bottom: none;
212 padding: 0; 234 padding: 0;
213 } 235 }
236
237 /*
238 TODO(jmesserly): the ".todo-item label" selector does not work with real
239 ShadowRoot because it crosses the shadow boundary.
240 */
214 .todo-item.completed [is=editable-label] { 241 .todo-item.completed [is=editable-label] {
215 color: #a9a9a9; 242 color: #a9a9a9;
216 text-decoration: line-through; 243 text-decoration: line-through;
217 } 244 }
245
218 .todo-item .toggle { 246 .todo-item .toggle {
219 text-align: center; 247 text-align: center;
220 width: 40px; 248 width: 40px;
249 /* auto, since non-WebKit browsers don't support input styling */
221 height: auto; 250 height: auto;
222 position: absolute; 251 position: absolute;
223 top: 0; 252 top: 0;
224 bottom: 0; 253 bottom: 0;
225 margin: auto 0; 254 margin: auto 0;
226 border: none; 255 border: none; /* Mobile Safari */
227 -webkit-appearance: none; 256 -webkit-appearance: none;
257 /*-moz-appearance: none;*/
228 -ms-appearance: none; 258 -ms-appearance: none;
229 -o-appearance: none; 259 -o-appearance: none;
230 appearance: none; 260 appearance: none;
231 } 261 }
262
232 .todo-item .toggle:after { 263 .todo-item .toggle:after {
233 content: "✔"; 264 content: '✔';
234 line-height: 43px; 265 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
235 font-size: 20px; 266 font-size: 20px;
236 color: #d9d9d9; 267 color: #d9d9d9;
237 text-shadow: 0 -1px 0 #bfbfbf; 268 text-shadow: 0 -1px 0 #bfbfbf;
238 } 269 }
270
239 .todo-item .toggle:checked:after { 271 .todo-item .toggle:checked:after {
240 color: #85ada7; 272 color: #85ada7;
241 text-shadow: 0 1px 0 #669991; 273 text-shadow: 0 1px 0 #669991;
242 bottom: 1px; 274 bottom: 1px;
243 position: relative; 275 position: relative;
244 } 276 }
245 .todo-item .destroy { 277 .todo-item .destroy {
246 display: none; 278 display: none;
247 position: absolute; 279 position: absolute;
248 top: 0; 280 top: 0;
249 right: 10px; 281 right: 10px;
250 bottom: 0; 282 bottom: 0;
251 width: 40px; 283 width: 40px;
252 height: 40px; 284 height: 40px;
253 margin: auto 0; 285 margin: auto 0;
254 font-size: 22px; 286 font-size: 22px;
255 color: #a88a8a; 287 color: #a88a8a;
256 -webkit-transition: all 0.2s; 288 -webkit-transition: all 0.2s;
257 -moz-transition: all 0.2s; 289 -moz-transition: all 0.2s;
258 -ms-transition: all 0.2s; 290 -ms-transition: all 0.2s;
259 -o-transition: all 0.2s; 291 -o-transition: all 0.2s;
260 transition: all 0.2s; 292 transition: all 0.2s;
261 } 293 }
294
262 .todo-item .destroy:hover { 295 .todo-item .destroy:hover {
263 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); 296 text-shadow: 0 0 1px #000,
297 0 0 10px rgba(199, 107, 107, 0.8);
264 -webkit-transform: scale(1.3); 298 -webkit-transform: scale(1.3);
265 -moz-transform: scale(1.3); 299 -moz-transform: scale(1.3);
266 -ms-transform: scale(1.3); 300 -ms-transform: scale(1.3);
267 -o-transform: scale(1.3); 301 -o-transform: scale(1.3);
268 transform: scale(1.3); 302 transform: scale(1.3);
269 } 303 }
304
270 .todo-item .destroy:after { 305 .todo-item .destroy:after {
271 content: "✖"; 306 content: '✖';
272 } 307 }
308
273 .todo-item:hover .destroy { 309 .todo-item:hover .destroy {
274 display: block; 310 display: block;
275 } 311 }
276 .todo-item.editing .destroy, .todo-item.editing .toggle { 312
313 .todo-item.editing .destroy,
314 .todo-item.editing .toggle {
277 display: none; 315 display: none;
278 } 316 }
317
279 .todo-item.editing:last-child { 318 .todo-item.editing:last-child {
280 margin-bottom: -1px; 319 margin-bottom: -1px;
281 } @media screen AND (-webkit-min-device-pixel-ratio:0) {
282 .todo-item .toggle {
283 background: none;
284 } 320 }
285 #todo-item .toggle { 321
286 height: 40px; 322 /*
323 Hack to remove background from Mobile Safari.
324 Can't use it globally since it destroys checkboxes in Firefox and Opera
325 */
326 @media screen and (-webkit-min-device-pixel-ratio:0) {
327 .todo-item .toggle {
328 background: none;
329 }
330 #todo-item .toggle {
331 height: 40px;
332 }
287 } 333 }
288 } 334 </style>
289 </style><div class="todo-item"> 335 <div class="todo-item">
290 <input class="toggle" type="checkbox"> 336 <input class="toggle" type="checkbox">
291 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> 337 <span is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
292 <template bind="" if="{{notEditing}}"> 338 <template bind="" if="{{!editing}}"></template>
293 <label class="edit-label" on-double-click="edit">{{value}}</label>
294 </template>
295 <label class="edit-label" on-double-click="edit">hola</label> 339 <label class="edit-label" on-double-click="edit">hola</label>
296 340
297 <template bind="" if="{{editing}}"> 341 <template bind="" if="{{editing}}"></template>
298 <form on-submit="update"> 342 </shadow-root></span>
299 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC ancel">
300 </form>
301 </template>
302 </shadow-root></div>
303 <button class="destroy" on-click="removeTodo"></button> 343 <button class="destroy" on-click="removeTodo"></button>
304 </div> 344 </div>
305 </shadow-root></li> 345 </shadow-root></li>
306 346
307 </ul> 347 </ul>
308 </section> 348 </section>
309 <template bind="" if="{{app.hasTodos}}"> 349 <template bind="" if="{{app.todos.length &gt; 0}}"></template>
310 <footer id="footer">
311 <span id="todo-count"><strong>{{app.remaining}}</strong></span>
312 <ul is="router-options" id="filters">
313 <li> <a href="#/">All</a> </li>
314 <li> <a href="#/active">Active</a> </li>
315 <li> <a href="#/completed">Completed</a> </li>
316 </ul>
317 <template bind="" if="{{app.hasCompleteTodos}}">
318 <button id="clear-completed" on-click="clear">
319 Clear completed ({{app.doneCount}})
320 </button>
321 </template>
322 </footer>
323 </template>
324 <footer id="footer"> 350 <footer id="footer">
325 <span id="todo-count"><strong>1</strong></span> 351 <span id="todo-count"><strong>1</strong></span>
326 <ul is="router-options" id="filters"><shadow-root><content></content></s hadow-root> 352 <ul is="router-options" id="filters"><shadow-root><content></content></s hadow-root>
327 <li> <a href="#/" class="selected">All</a> </li> 353 <li> <a href="#/" class="selected">All</a> </li>
328 <li> <a href="#/active" class="">Active</a> </li> 354 <li> <a href="#/active" class="">Active</a> </li>
329 <li> <a href="#/completed" class="">Completed</a> </li> 355 <li> <a href="#/completed" class="">Completed</a> </li>
330 </ul> 356 </ul>
331 <template bind="" if="{{app.hasCompleteTodos}}"></template> 357 <template bind="" if="{{app.hasCompleteTodos}}"></template>
332 </footer> 358 </footer>
333 359
334 </section> 360 </section>
335 <footer id="info"> 361 <footer id="info">
336 <p>Double-click to edit a todo.</p> 362 <p>Double-click to edit a todo.</p>
337 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> 363 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p>
338 <p> 364 <p>
339 Learn more about 365 Learn more about
340 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We b Components</a> 366 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We b Components</a>
341 or 367 or
342 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc"> view the source</a>. 368 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc"> view the source</a>.
343 </p> 369 </p>
344 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> 370 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
345 </footer> 371 </footer>
346 </shadow-root></span> 372 </shadow-root></span>
347 373
348 374
349 375
350 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s cript> 376 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s cript>
351 <script type="application/dart" src="todomvc_mainpage2_test.html_bootstrap.dart" ></script></body></html> 377 <script type="application/dart" src="todomvc_mainpage2_test.html_bootstrap.dart" ></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698