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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: samples/third_party/todomvc/test/expected/todomvc_markdone_test.html.txt

Issue 23461006: Moved test changes to dart-lang (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: merged Created 7 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 | Annotate | Revision Log
« no previous file with comments | « samples/third_party/todomvc/test/expected/todomvc_mainpage_test.html.txt ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 shadowcssshim="">style { display: none !important; }
3 </style><style shadowcssshim="">template { display: none; }</style>
3 <!-- 4 <!--
4 This test runs the TodoMVC app, adds a few todos, marks some as done 5 This test runs the TodoMVC app, adds a few todos, marks some as done
5 programatically, and clicks on a checkbox to mark others via the UI. 6 programatically, and clicks on a checkbox to mark others via the UI.
6 --> 7 -->
7 <meta charset="utf-8"> 8 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 10
10 <link rel="stylesheet" href="../../../web/base.css"> 11 <link rel="stylesheet" href="../../../web/base.css">
11 <script src="../../packages/polymer/testing/testing.js"></script> 12 <script src="../../packages/polymer/testing/testing.js"></script>
12 <title>Dart • TodoMVC</title> 13 <title>Dart • TodoMVC</title>
(...skipping 202 matching lines...) Expand 10 before | Expand all | Expand 10 after
215 <form on-submit="addTodo"> 216 <form on-submit="addTodo">
216 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo"> 217 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o n-change="addTodo">
217 </form> 218 </form>
218 </header> 219 </header>
219 <section id="main"> 220 <section id="main">
220 <input id="toggle-all" type="checkbox"> 221 <input id="toggle-all" type="checkbox">
221 <label for="toggle-all"></label> 222 <label for="toggle-all"></label>
222 <ul id="todo-list"> 223 <ul id="todo-list">
223 <template repeat="{{app.visibleTodos}}"></template> 224 <template repeat="{{app.visibleTodos}}"></template>
224 <li is="todo-row" todo="{{}}"><shadow-root> 225 <li is="todo-row" todo="{{}}"><shadow-root>
225 <style scoped=""> 226 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item {
226 .todo-item { 227 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo ttom-style: dotted; border-bottom-color: rgb(204, 204, 204);
227 position: relative;
228 font-size: 24px;
229 border-bottom: 1px dotted #ccc;
230 } 228 }
231 229
232 .todo-item.editing { 230 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing {
233 border-bottom: none; 231 » border-bottom-style: none; padding: 0px;
234 padding: 0;
235 } 232 }
236 233
237 /* 234 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co mpleted [is="editable-label"] {
238 TODO(jmesserly): the ".todo-item label" selector does not work with real 235 » color: rgb(169, 169, 169); text-decoration: line-through;
239 ShadowRoot because it crosses the shadow boundary.
240 */
241 .todo-item.completed [is=editable-label] {
242 color: #a9a9a9;
243 text-decoration: line-through;
244 } 236 }
245 237
246 .todo-item .toggle { 238 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
247 text-align: center; 239 » text-align: center; width: 40px; height: auto; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none;
248 width: 40px;
249 /* auto, since non-WebKit browsers don't support input styling */
250 height: auto;
251 position: absolute;
252 top: 0;
253 bottom: 0;
254 margin: auto 0;
255 border: none; /* Mobile Safari */
256 -webkit-appearance: none;
257 /*-moz-appearance: none;*/
258 -ms-appearance: none;
259 -o-appearance: none;
260 appearance: none;
261 } 240 }
262 241
263 .todo-item .toggle:after { 242 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after {
264 content: '✔'; 243 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2 17); text-shadow: rgb(191, 191, 191) 0px -1px 0px;
265 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
266 font-size: 20px;
267 color: #d9d9d9;
268 text-shadow: 0 -1px 0 #bfbfbf;
269 } 244 }
270 245
271 .todo-item .toggle:checked:after { 246 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che cked::after {
272 color: #85ada7; 247 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px; bottom: 1px; position: relative;
273 text-shadow: 0 1px 0 #669991;
274 bottom: 1px;
275 position: relative;
276 }
277 .todo-item .destroy {
278 display: none;
279 position: absolute;
280 top: 0;
281 right: 10px;
282 bottom: 0;
283 width: 40px;
284 height: 40px;
285 margin: auto 0;
286 font-size: 22px;
287 color: #a88a8a;
288 -webkit-transition: all 0.2s;
289 -moz-transition: all 0.2s;
290 -ms-transition: all 0.2s;
291 -o-transition: all 0.2s;
292 transition: all 0.2s;
293 } 248 }
294 249
295 .todo-item .destroy:hover { 250 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy {
296 text-shadow: 0 0 1px #000, 251 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138 , 138); transition: all 0.2s; -webkit-transition: all 0.2s;
297 0 0 10px rgba(199, 107, 107, 0.8);
298 -webkit-transform: scale(1.3);
299 -moz-transform: scale(1.3);
300 -ms-transform: scale(1.3);
301 -o-transform: scale(1.3);
302 transform: scale(1.3);
303 } 252 }
304 253
305 .todo-item .destroy:after { 254 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover {
306 content: '✖'; 255 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px 10px; -webkit-transform: scale(1.3);
307 } 256 }
308 257
309 .todo-item:hover .destroy { 258 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after {
310 display: block; 259 » content: '✖';
311 } 260 }
312 261
313 .todo-item.editing .destroy, 262 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy {
314 .todo-item.editing .toggle { 263 » display: block;
315 display: none;
316 } 264 }
317 265
318 .todo-item.editing:last-child { 266 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy, todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle {
319 margin-bottom: -1px; 267 » display: none;
320 } 268 }
321 269
322 /* 270 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch ild {
323 Hack to remove background from Mobile Safari. 271 » margin-bottom: -1px;
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 }
333 } 272 }
334 </style> 273
274 @media screen and (-webkit-min-device-pixel-ratio: 0) {
275 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
276 » background-image: none; background-position: initial initial; background -repeat: initial initial;
277 }
278
279 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle {
280 » height: 40px;
281 }
282
283
284 }
285
286 </style>
335 <div class="todo-item"> 287 <div class="todo-item">
336 <input class="toggle" type="checkbox"> 288 <input class="toggle" type="checkbox">
337 <editable-label id="label" value="{{todo.task}}"><shadow-root> 289 <editable-label id="label" value="{{todo.task}}"><shadow-root>
338 <template bind="" if="{{!editing}}"></template> 290 <template bind="" if="{{!editing}}"></template>
339 <label class="edit-label" on-double-click="edit">one (unchecked)</label> 291 <label class="edit-label" on-double-click="edit">one (unchecked)</label>
340 292
341 <template bind="" if="{{editing}}"></template> 293 <template bind="" if="{{editing}}"></template>
342 </shadow-root></editable-label> 294 </shadow-root></editable-label>
343 <button class="destroy" on-click="removeTodo"></button> 295 <button class="destroy" on-click="removeTodo"></button>
344 </div> 296 </div>
345 </shadow-root></li> 297 </shadow-root></li>
346 298
347 <li is="todo-row" todo="{{}}"><shadow-root> 299 <li is="todo-row" todo="{{}}"><shadow-root>
348 <style scoped=""> 300 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item {
349 .todo-item { 301 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo ttom-style: dotted; border-bottom-color: rgb(204, 204, 204);
350 position: relative;
351 font-size: 24px;
352 border-bottom: 1px dotted #ccc;
353 } 302 }
354 303
355 .todo-item.editing { 304 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing {
356 border-bottom: none; 305 » border-bottom-style: none; padding: 0px;
357 padding: 0;
358 } 306 }
359 307
360 /* 308 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co mpleted [is="editable-label"] {
361 TODO(jmesserly): the ".todo-item label" selector does not work with real 309 » color: rgb(169, 169, 169); text-decoration: line-through;
362 ShadowRoot because it crosses the shadow boundary.
363 */
364 .todo-item.completed [is=editable-label] {
365 color: #a9a9a9;
366 text-decoration: line-through;
367 } 310 }
368 311
369 .todo-item .toggle { 312 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
370 text-align: center; 313 » text-align: center; width: 40px; height: auto; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none;
371 width: 40px;
372 /* auto, since non-WebKit browsers don't support input styling */
373 height: auto;
374 position: absolute;
375 top: 0;
376 bottom: 0;
377 margin: auto 0;
378 border: none; /* Mobile Safari */
379 -webkit-appearance: none;
380 /*-moz-appearance: none;*/
381 -ms-appearance: none;
382 -o-appearance: none;
383 appearance: none;
384 } 314 }
385 315
386 .todo-item .toggle:after { 316 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after {
387 content: '✔'; 317 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2 17); text-shadow: rgb(191, 191, 191) 0px -1px 0px;
388 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
389 font-size: 20px;
390 color: #d9d9d9;
391 text-shadow: 0 -1px 0 #bfbfbf;
392 } 318 }
393 319
394 .todo-item .toggle:checked:after { 320 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che cked::after {
395 color: #85ada7; 321 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px; bottom: 1px; position: relative;
396 text-shadow: 0 1px 0 #669991;
397 bottom: 1px;
398 position: relative;
399 }
400 .todo-item .destroy {
401 display: none;
402 position: absolute;
403 top: 0;
404 right: 10px;
405 bottom: 0;
406 width: 40px;
407 height: 40px;
408 margin: auto 0;
409 font-size: 22px;
410 color: #a88a8a;
411 -webkit-transition: all 0.2s;
412 -moz-transition: all 0.2s;
413 -ms-transition: all 0.2s;
414 -o-transition: all 0.2s;
415 transition: all 0.2s;
416 } 322 }
417 323
418 .todo-item .destroy:hover { 324 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy {
419 text-shadow: 0 0 1px #000, 325 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138 , 138); transition: all 0.2s; -webkit-transition: all 0.2s;
420 0 0 10px rgba(199, 107, 107, 0.8);
421 -webkit-transform: scale(1.3);
422 -moz-transform: scale(1.3);
423 -ms-transform: scale(1.3);
424 -o-transform: scale(1.3);
425 transform: scale(1.3);
426 } 326 }
427 327
428 .todo-item .destroy:after { 328 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover {
429 content: '✖'; 329 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px 10px; -webkit-transform: scale(1.3);
430 } 330 }
431 331
432 .todo-item:hover .destroy { 332 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after {
433 display: block; 333 » content: '✖';
434 } 334 }
435 335
436 .todo-item.editing .destroy, 336 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy {
437 .todo-item.editing .toggle { 337 » display: block;
438 display: none;
439 } 338 }
440 339
441 .todo-item.editing:last-child { 340 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy, todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle {
442 margin-bottom: -1px; 341 » display: none;
443 } 342 }
444 343
445 /* 344 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch ild {
446 Hack to remove background from Mobile Safari. 345 » margin-bottom: -1px;
447 Can't use it globally since it destroys checkboxes in Firefox and Opera
448 */
449 @media screen and (-webkit-min-device-pixel-ratio:0) {
450 .todo-item .toggle {
451 background: none;
452 }
453 #todo-item .toggle {
454 height: 40px;
455 }
456 } 346 }
457 </style> 347
348 @media screen and (-webkit-min-device-pixel-ratio: 0) {
349 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
350 » background-image: none; background-position: initial initial; background -repeat: initial initial;
351 }
352
353 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle {
354 » height: 40px;
355 }
356
357
358 }
359
360 </style>
458 <div class="todo-item"> 361 <div class="todo-item">
459 <input class="toggle" type="checkbox"> 362 <input class="toggle" type="checkbox">
460 <editable-label id="label" value="{{todo.task}}"><shadow-root> 363 <editable-label id="label" value="{{todo.task}}"><shadow-root>
461 <template bind="" if="{{!editing}}"></template> 364 <template bind="" if="{{!editing}}"></template>
462 <label class="edit-label" on-double-click="edit">two (unchecked)</label> 365 <label class="edit-label" on-double-click="edit">two (unchecked)</label>
463 366
464 <template bind="" if="{{editing}}"></template> 367 <template bind="" if="{{editing}}"></template>
465 </shadow-root></editable-label> 368 </shadow-root></editable-label>
466 <button class="destroy" on-click="removeTodo"></button> 369 <button class="destroy" on-click="removeTodo"></button>
467 </div> 370 </div>
468 </shadow-root></li> 371 </shadow-root></li>
469 372
470 <li is="todo-row" todo="{{}}"><shadow-root> 373 <li is="todo-row" todo="{{}}"><shadow-root>
471 <style scoped=""> 374 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item {
472 .todo-item { 375 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo ttom-style: dotted; border-bottom-color: rgb(204, 204, 204);
473 position: relative;
474 font-size: 24px;
475 border-bottom: 1px dotted #ccc;
476 } 376 }
477 377
478 .todo-item.editing { 378 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing {
479 border-bottom: none; 379 » border-bottom-style: none; padding: 0px;
480 padding: 0;
481 } 380 }
482 381
483 /* 382 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co mpleted [is="editable-label"] {
484 TODO(jmesserly): the ".todo-item label" selector does not work with real 383 » color: rgb(169, 169, 169); text-decoration: line-through;
485 ShadowRoot because it crosses the shadow boundary.
486 */
487 .todo-item.completed [is=editable-label] {
488 color: #a9a9a9;
489 text-decoration: line-through;
490 } 384 }
491 385
492 .todo-item .toggle { 386 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
493 text-align: center; 387 » text-align: center; width: 40px; height: auto; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none;
494 width: 40px;
495 /* auto, since non-WebKit browsers don't support input styling */
496 height: auto;
497 position: absolute;
498 top: 0;
499 bottom: 0;
500 margin: auto 0;
501 border: none; /* Mobile Safari */
502 -webkit-appearance: none;
503 /*-moz-appearance: none;*/
504 -ms-appearance: none;
505 -o-appearance: none;
506 appearance: none;
507 } 388 }
508 389
509 .todo-item .toggle:after { 390 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after {
510 content: '✔'; 391 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2 17); text-shadow: rgb(191, 191, 191) 0px -1px 0px;
511 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
512 font-size: 20px;
513 color: #d9d9d9;
514 text-shadow: 0 -1px 0 #bfbfbf;
515 } 392 }
516 393
517 .todo-item .toggle:checked:after { 394 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che cked::after {
518 color: #85ada7; 395 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px; bottom: 1px; position: relative;
519 text-shadow: 0 1px 0 #669991;
520 bottom: 1px;
521 position: relative;
522 }
523 .todo-item .destroy {
524 display: none;
525 position: absolute;
526 top: 0;
527 right: 10px;
528 bottom: 0;
529 width: 40px;
530 height: 40px;
531 margin: auto 0;
532 font-size: 22px;
533 color: #a88a8a;
534 -webkit-transition: all 0.2s;
535 -moz-transition: all 0.2s;
536 -ms-transition: all 0.2s;
537 -o-transition: all 0.2s;
538 transition: all 0.2s;
539 } 396 }
540 397
541 .todo-item .destroy:hover { 398 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy {
542 text-shadow: 0 0 1px #000, 399 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138 , 138); transition: all 0.2s; -webkit-transition: all 0.2s;
543 0 0 10px rgba(199, 107, 107, 0.8);
544 -webkit-transform: scale(1.3);
545 -moz-transform: scale(1.3);
546 -ms-transform: scale(1.3);
547 -o-transform: scale(1.3);
548 transform: scale(1.3);
549 } 400 }
550 401
551 .todo-item .destroy:after { 402 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover {
552 content: '✖'; 403 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px 10px; -webkit-transform: scale(1.3);
553 } 404 }
554 405
555 .todo-item:hover .destroy { 406 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after {
556 display: block; 407 » content: '✖';
557 } 408 }
558 409
559 .todo-item.editing .destroy, 410 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy {
560 .todo-item.editing .toggle { 411 » display: block;
561 display: none;
562 } 412 }
563 413
564 .todo-item.editing:last-child { 414 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy, todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle {
565 margin-bottom: -1px; 415 » display: none;
566 } 416 }
567 417
568 /* 418 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch ild {
569 Hack to remove background from Mobile Safari. 419 » margin-bottom: -1px;
570 Can't use it globally since it destroys checkboxes in Firefox and Opera
571 */
572 @media screen and (-webkit-min-device-pixel-ratio:0) {
573 .todo-item .toggle {
574 background: none;
575 }
576 #todo-item .toggle {
577 height: 40px;
578 }
579 } 420 }
580 </style> 421
422 @media screen and (-webkit-min-device-pixel-ratio: 0) {
423 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
424 » background-image: none; background-position: initial initial; background -repeat: initial initial;
425 }
426
427 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle {
428 » height: 40px;
429 }
430
431
432 }
433
434 </style>
581 <div class="todo-item completed"> 435 <div class="todo-item completed">
582 <input class="toggle" type="checkbox"> 436 <input class="toggle" type="checkbox">
583 <editable-label id="label" value="{{todo.task}}"><shadow-root> 437 <editable-label id="label" value="{{todo.task}}"><shadow-root>
584 <template bind="" if="{{!editing}}"></template> 438 <template bind="" if="{{!editing}}"></template>
585 <label class="edit-label" on-double-click="edit">three (checked)</label> 439 <label class="edit-label" on-double-click="edit">three (checked)</label>
586 440
587 <template bind="" if="{{editing}}"></template> 441 <template bind="" if="{{editing}}"></template>
588 </shadow-root></editable-label> 442 </shadow-root></editable-label>
589 <button class="destroy" on-click="removeTodo"></button> 443 <button class="destroy" on-click="removeTodo"></button>
590 </div> 444 </div>
591 </shadow-root></li> 445 </shadow-root></li>
592 446
593 <li is="todo-row" todo="{{}}"><shadow-root> 447 <li is="todo-row" todo="{{}}"><shadow-root>
594 <style scoped=""> 448 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item {
595 .todo-item { 449 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo ttom-style: dotted; border-bottom-color: rgb(204, 204, 204);
596 position: relative;
597 font-size: 24px;
598 border-bottom: 1px dotted #ccc;
599 } 450 }
600 451
601 .todo-item.editing { 452 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing {
602 border-bottom: none; 453 » border-bottom-style: none; padding: 0px;
603 padding: 0;
604 } 454 }
605 455
606 /* 456 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co mpleted [is="editable-label"] {
607 TODO(jmesserly): the ".todo-item label" selector does not work with real 457 » color: rgb(169, 169, 169); text-decoration: line-through;
608 ShadowRoot because it crosses the shadow boundary.
609 */
610 .todo-item.completed [is=editable-label] {
611 color: #a9a9a9;
612 text-decoration: line-through;
613 } 458 }
614 459
615 .todo-item .toggle { 460 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
616 text-align: center; 461 » text-align: center; width: 40px; height: auto; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none;
617 width: 40px;
618 /* auto, since non-WebKit browsers don't support input styling */
619 height: auto;
620 position: absolute;
621 top: 0;
622 bottom: 0;
623 margin: auto 0;
624 border: none; /* Mobile Safari */
625 -webkit-appearance: none;
626 /*-moz-appearance: none;*/
627 -ms-appearance: none;
628 -o-appearance: none;
629 appearance: none;
630 } 462 }
631 463
632 .todo-item .toggle:after { 464 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after {
633 content: '✔'; 465 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2 17); text-shadow: rgb(191, 191, 191) 0px -1px 0px;
634 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
635 font-size: 20px;
636 color: #d9d9d9;
637 text-shadow: 0 -1px 0 #bfbfbf;
638 } 466 }
639 467
640 .todo-item .toggle:checked:after { 468 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che cked::after {
641 color: #85ada7; 469 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px; bottom: 1px; position: relative;
642 text-shadow: 0 1px 0 #669991;
643 bottom: 1px;
644 position: relative;
645 }
646 .todo-item .destroy {
647 display: none;
648 position: absolute;
649 top: 0;
650 right: 10px;
651 bottom: 0;
652 width: 40px;
653 height: 40px;
654 margin: auto 0;
655 font-size: 22px;
656 color: #a88a8a;
657 -webkit-transition: all 0.2s;
658 -moz-transition: all 0.2s;
659 -ms-transition: all 0.2s;
660 -o-transition: all 0.2s;
661 transition: all 0.2s;
662 } 470 }
663 471
664 .todo-item .destroy:hover { 472 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy {
665 text-shadow: 0 0 1px #000, 473 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138 , 138); transition: all 0.2s; -webkit-transition: all 0.2s;
666 0 0 10px rgba(199, 107, 107, 0.8);
667 -webkit-transform: scale(1.3);
668 -moz-transform: scale(1.3);
669 -ms-transform: scale(1.3);
670 -o-transform: scale(1.3);
671 transform: scale(1.3);
672 } 474 }
673 475
674 .todo-item .destroy:after { 476 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover {
675 content: '✖'; 477 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px 10px; -webkit-transform: scale(1.3);
676 } 478 }
677 479
678 .todo-item:hover .destroy { 480 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after {
679 display: block; 481 » content: '✖';
680 } 482 }
681 483
682 .todo-item.editing .destroy, 484 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy {
683 .todo-item.editing .toggle { 485 » display: block;
684 display: none;
685 } 486 }
686 487
687 .todo-item.editing:last-child { 488 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy, todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle {
688 margin-bottom: -1px; 489 » display: none;
689 } 490 }
690 491
691 /* 492 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch ild {
692 Hack to remove background from Mobile Safari. 493 » margin-bottom: -1px;
693 Can't use it globally since it destroys checkboxes in Firefox and Opera
694 */
695 @media screen and (-webkit-min-device-pixel-ratio:0) {
696 .todo-item .toggle {
697 background: none;
698 }
699 #todo-item .toggle {
700 height: 40px;
701 }
702 } 494 }
703 </style> 495
496 @media screen and (-webkit-min-device-pixel-ratio: 0) {
497 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle {
498 » background-image: none; background-position: initial initial; background -repeat: initial initial;
499 }
500
501 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle {
502 » height: 40px;
503 }
504
505
506 }
507
508 </style>
704 <div class="todo-item completed"> 509 <div class="todo-item completed">
705 <input class="toggle" type="checkbox"> 510 <input class="toggle" type="checkbox">
706 <editable-label id="label" value="{{todo.task}}"><shadow-root> 511 <editable-label id="label" value="{{todo.task}}"><shadow-root>
707 <template bind="" if="{{!editing}}"></template> 512 <template bind="" if="{{!editing}}"></template>
708 <label class="edit-label" on-double-click="edit">four (checked)</label> 513 <label class="edit-label" on-double-click="edit">four (checked)</label>
709 514
710 <template bind="" if="{{editing}}"></template> 515 <template bind="" if="{{editing}}"></template>
711 </shadow-root></editable-label> 516 </shadow-root></editable-label>
712 <button class="destroy" on-click="removeTodo"></button> 517 <button class="destroy" on-click="removeTodo"></button>
713 </div> 518 </div>
(...skipping 26 matching lines...) Expand all
740 or 545 or
741 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc"> view the source</a>. 546 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc"> view the source</a>.
742 </p> 547 </p>
743 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> 548 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
744 </footer> 549 </footer>
745 </shadow-root></todo-app> 550 </shadow-root></todo-app>
746 551
747 552
748 553
749 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s cript> 554 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s cript>
555 <script type="text/javascript" src="packages/browser/interop.js"></script>
750 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart"> </script></body></html> 556 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart"> </script></body></html>
OLDNEW
« no previous file with comments | « samples/third_party/todomvc/test/expected/todomvc_mainpage_test.html.txt ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698