| OLD | NEW |
|---|
| 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, adds a few elements, marks some as done, and | 4 This test runs the TodoMVC app, adds a few elements, marks some as done, and |
| 5 switches from back and forth between "Active" and "All". This will make some | 5 switches from back and forth between "Active" and "All". This will make some |
| 6 nodes to be hidden and readded to the page. | 6 nodes to be hidden and readded to the page. |
| 7 | 7 |
| 8 This is a regression test for a bug in dwc that made the nodes appear in the | 8 This is a regression test for a bug in dwc that made the nodes appear in the |
| 9 wrong order when using lists and ifs together. | 9 wrong order when using lists and ifs together. |
| 10 --> | 10 --> |
| 11 <meta charset="utf-8"> | 11 <meta charset="utf-8"> |
| 12 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 12 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 13 | 13 |
| 14 <link rel="stylesheet" href="../web/base.css"> | 14 <link rel="stylesheet" href="../../../web/base.css"> |
| 15 <script src="../../packages/polymer/testing/testing.js"></script> | 15 <script src="../../packages/polymer/testing/testing.js"></script> |
| 16 <title>Dart • TodoMVC</title> | 16 <title>Dart • TodoMVC</title> |
| 17 <link rel="stylesheet" type="text/css" href="todomvc_listorder_test.html.css"><s
tyle>template, | 17 <style>template, |
| 18 thead[template], | 18 thead[template], |
| 19 tbody[template], | 19 tbody[template], |
| 20 tfoot[template], | 20 tfoot[template], |
| 21 th[template], | 21 th[template], |
| 22 tr[template], | 22 tr[template], |
| 23 td[template], | 23 td[template], |
| 24 caption[template], | 24 caption[template], |
| 25 colgroup[template], | 25 colgroup[template], |
| 26 col[template], | 26 col[template], |
| 27 option[template] { | 27 option[template] { |
| 28 display: none; | 28 display: none; |
| 29 }</style></head> | 29 }</style></head> |
| 30 <body><polymer-element name="todo-row" extends="li" attributes="todo"> | 30 <body><polymer-element name="todo-row" extends="li" attributes="todo"> |
| 31 <template> | 31 <template> |
| 32 | 32 |
| 33 <div class="todo-row_todo-item"> | 33 <style> |
| 34 <input class="todo-row_toggle" type="checkbox" checked="{{todo.done}}"> | 34 .todo-item { |
| 35 position: relative; |
| 36 font-size: 24px; |
| 37 border-bottom: 1px dotted #ccc; |
| 38 } |
| 39 .todo-item.editing { |
| 40 border-bottom: none; |
| 41 padding: 0; |
| 42 } |
| 43 .todo-item.completed [is=editable-label] { |
| 44 color: #a9a9a9; |
| 45 text-decoration: line-through; |
| 46 } |
| 47 .todo-item .toggle { |
| 48 text-align: center; |
| 49 width: 40px; |
| 50 height: auto; |
| 51 position: absolute; |
| 52 top: 0; |
| 53 bottom: 0; |
| 54 margin: auto 0; |
| 55 border: none; |
| 56 -webkit-appearance: none; |
| 57 -ms-appearance: none; |
| 58 -o-appearance: none; |
| 59 appearance: none; |
| 60 } |
| 61 .todo-item .toggle:after { |
| 62 content: "✔"; |
| 63 line-height: 43px; |
| 64 font-size: 20px; |
| 65 color: #d9d9d9; |
| 66 text-shadow: 0 -1px 0 #bfbfbf; |
| 67 } |
| 68 .todo-item .toggle:checked:after { |
| 69 color: #85ada7; |
| 70 text-shadow: 0 1px 0 #669991; |
| 71 bottom: 1px; |
| 72 position: relative; |
| 73 } |
| 74 .todo-item .destroy { |
| 75 display: none; |
| 76 position: absolute; |
| 77 top: 0; |
| 78 right: 10px; |
| 79 bottom: 0; |
| 80 width: 40px; |
| 81 height: 40px; |
| 82 margin: auto 0; |
| 83 font-size: 22px; |
| 84 color: #a88a8a; |
| 85 -webkit-transition: all 0.2s; |
| 86 -moz-transition: all 0.2s; |
| 87 -ms-transition: all 0.2s; |
| 88 -o-transition: all 0.2s; |
| 89 transition: all 0.2s; |
| 90 } |
| 91 .todo-item .destroy:hover { |
| 92 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); |
| 93 -webkit-transform: scale(1.3); |
| 94 -moz-transform: scale(1.3); |
| 95 -ms-transform: scale(1.3); |
| 96 -o-transform: scale(1.3); |
| 97 transform: scale(1.3); |
| 98 } |
| 99 .todo-item .destroy:after { |
| 100 content: "✖"; |
| 101 } |
| 102 .todo-item:hover .destroy { |
| 103 display: block; |
| 104 } |
| 105 .todo-item.editing .destroy, .todo-item.editing .toggle { |
| 106 display: none; |
| 107 } |
| 108 .todo-item.editing:last-child { |
| 109 margin-bottom: -1px; |
| 110 } @media screen AND (-webkit-min-device-pixel-ratio:0) { |
| 111 .todo-item .toggle { |
| 112 background: none; |
| 113 } |
| 114 #todo-item .toggle { |
| 115 height: 40px; |
| 116 } |
| 117 } |
| 118 </style><div class="todo-item"> |
| 119 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 35 <div is="editable-label" id="label" value="{{todo.task}}"></div> | 120 <div is="editable-label" id="label" value="{{todo.task}}"></div> |
| 36 <button class="todo-row_destroy" on-click="removeTodo"></button> | 121 <button class="destroy" on-click="removeTodo"></button> |
| 37 </div> | 122 </div> |
| 38 </template> | 123 </template> |
| 39 | 124 |
| 40 </polymer-element> | 125 </polymer-element> |
| 41 <polymer-element name="todo-app"> | 126 <polymer-element name="todo-app"> |
| 42 <template> | 127 <template> |
| 43 <section id="todoapp"> | 128 <section id="todoapp"> |
| 44 <header id="header"> | 129 <header id="header"> |
| 45 <h1 class="title">todos</h1> | 130 <h1 class="title">todos</h1> |
| 46 <form on-submit="addTodo"> | 131 <form on-submit="addTodo"> |
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 114 </header> | 199 </header> |
| 115 <section id="main"> | 200 <section id="main"> |
| 116 <input id="toggle-all" type="checkbox"> | 201 <input id="toggle-all" type="checkbox"> |
| 117 <label for="toggle-all"></label> | 202 <label for="toggle-all"></label> |
| 118 <ul id="todo-list"> | 203 <ul id="todo-list"> |
| 119 <template repeat="{{app.visibleTodos}}"> | 204 <template repeat="{{app.visibleTodos}}"> |
| 120 <li is="todo-row" todo="{{}}"></li> | 205 <li is="todo-row" todo="{{}}"></li> |
| 121 </template> | 206 </template> |
| 122 <li is="todo-row" todo="{{}}"><shadow-root> | 207 <li is="todo-row" todo="{{}}"><shadow-root> |
| 123 | 208 |
| 124 <div class="todo-row_todo-item"> | 209 <style> |
| 125 <input class="todo-row_toggle" type="checkbox"> | 210 .todo-item { |
| 211 position: relative; |
| 212 font-size: 24px; |
| 213 border-bottom: 1px dotted #ccc; |
| 214 } |
| 215 .todo-item.editing { |
| 216 border-bottom: none; |
| 217 padding: 0; |
| 218 } |
| 219 .todo-item.completed [is=editable-label] { |
| 220 color: #a9a9a9; |
| 221 text-decoration: line-through; |
| 222 } |
| 223 .todo-item .toggle { |
| 224 text-align: center; |
| 225 width: 40px; |
| 226 height: auto; |
| 227 position: absolute; |
| 228 top: 0; |
| 229 bottom: 0; |
| 230 margin: auto 0; |
| 231 border: none; |
| 232 -webkit-appearance: none; |
| 233 -ms-appearance: none; |
| 234 -o-appearance: none; |
| 235 appearance: none; |
| 236 } |
| 237 .todo-item .toggle:after { |
| 238 content: "✔"; |
| 239 line-height: 43px; |
| 240 font-size: 20px; |
| 241 color: #d9d9d9; |
| 242 text-shadow: 0 -1px 0 #bfbfbf; |
| 243 } |
| 244 .todo-item .toggle:checked:after { |
| 245 color: #85ada7; |
| 246 text-shadow: 0 1px 0 #669991; |
| 247 bottom: 1px; |
| 248 position: relative; |
| 249 } |
| 250 .todo-item .destroy { |
| 251 display: none; |
| 252 position: absolute; |
| 253 top: 0; |
| 254 right: 10px; |
| 255 bottom: 0; |
| 256 width: 40px; |
| 257 height: 40px; |
| 258 margin: auto 0; |
| 259 font-size: 22px; |
| 260 color: #a88a8a; |
| 261 -webkit-transition: all 0.2s; |
| 262 -moz-transition: all 0.2s; |
| 263 -ms-transition: all 0.2s; |
| 264 -o-transition: all 0.2s; |
| 265 transition: all 0.2s; |
| 266 } |
| 267 .todo-item .destroy:hover { |
| 268 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); |
| 269 -webkit-transform: scale(1.3); |
| 270 -moz-transform: scale(1.3); |
| 271 -ms-transform: scale(1.3); |
| 272 -o-transform: scale(1.3); |
| 273 transform: scale(1.3); |
| 274 } |
| 275 .todo-item .destroy:after { |
| 276 content: "✖"; |
| 277 } |
| 278 .todo-item:hover .destroy { |
| 279 display: block; |
| 280 } |
| 281 .todo-item.editing .destroy, .todo-item.editing .toggle { |
| 282 display: none; |
| 283 } |
| 284 .todo-item.editing:last-child { |
| 285 margin-bottom: -1px; |
| 286 } @media screen AND (-webkit-min-device-pixel-ratio:0) { |
| 287 .todo-item .toggle { |
| 288 background: none; |
| 289 } |
| 290 #todo-item .toggle { |
| 291 height: 40px; |
| 292 } |
| 293 } |
| 294 </style><div class="todo-item"> |
| 295 <input class="toggle" type="checkbox"> |
| 126 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 296 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 127 <template bind="" if="{{notEditing}}"> | 297 <template bind="" if="{{notEditing}}"> |
| 128 <label class="edit-label" on-double-click="edit">{{value}}</label> | 298 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 129 </template> | 299 </template> |
| 130 <label class="edit-label" on-double-click="edit">one (unchecked)</label> | 300 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
| 131 | 301 |
| 132 <template bind="" if="{{editing}}"> | 302 <template bind="" if="{{editing}}"> |
| 133 <form on-submit="update"> | 303 <form on-submit="update"> |
| 134 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 304 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 135 </form> | 305 </form> |
| 136 </template> | 306 </template> |
| 137 </shadow-root></div> | 307 </shadow-root></div> |
| 138 <button class="todo-row_destroy" on-click="removeTodo"></button> | 308 <button class="destroy" on-click="removeTodo"></button> |
| 139 </div> | 309 </div> |
| 140 </shadow-root></li> | 310 </shadow-root></li> |
| 141 | 311 |
| 142 <li is="todo-row" todo="{{}}"><shadow-root> | 312 <li is="todo-row" todo="{{}}"><shadow-root> |
| 143 | 313 |
| 144 <div class="todo-row_todo-item todo-row_completed"> | 314 <style> |
| 145 <input class="todo-row_toggle" type="checkbox"> | 315 .todo-item { |
| 316 position: relative; |
| 317 font-size: 24px; |
| 318 border-bottom: 1px dotted #ccc; |
| 319 } |
| 320 .todo-item.editing { |
| 321 border-bottom: none; |
| 322 padding: 0; |
| 323 } |
| 324 .todo-item.completed [is=editable-label] { |
| 325 color: #a9a9a9; |
| 326 text-decoration: line-through; |
| 327 } |
| 328 .todo-item .toggle { |
| 329 text-align: center; |
| 330 width: 40px; |
| 331 height: auto; |
| 332 position: absolute; |
| 333 top: 0; |
| 334 bottom: 0; |
| 335 margin: auto 0; |
| 336 border: none; |
| 337 -webkit-appearance: none; |
| 338 -ms-appearance: none; |
| 339 -o-appearance: none; |
| 340 appearance: none; |
| 341 } |
| 342 .todo-item .toggle:after { |
| 343 content: "✔"; |
| 344 line-height: 43px; |
| 345 font-size: 20px; |
| 346 color: #d9d9d9; |
| 347 text-shadow: 0 -1px 0 #bfbfbf; |
| 348 } |
| 349 .todo-item .toggle:checked:after { |
| 350 color: #85ada7; |
| 351 text-shadow: 0 1px 0 #669991; |
| 352 bottom: 1px; |
| 353 position: relative; |
| 354 } |
| 355 .todo-item .destroy { |
| 356 display: none; |
| 357 position: absolute; |
| 358 top: 0; |
| 359 right: 10px; |
| 360 bottom: 0; |
| 361 width: 40px; |
| 362 height: 40px; |
| 363 margin: auto 0; |
| 364 font-size: 22px; |
| 365 color: #a88a8a; |
| 366 -webkit-transition: all 0.2s; |
| 367 -moz-transition: all 0.2s; |
| 368 -ms-transition: all 0.2s; |
| 369 -o-transition: all 0.2s; |
| 370 transition: all 0.2s; |
| 371 } |
| 372 .todo-item .destroy:hover { |
| 373 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); |
| 374 -webkit-transform: scale(1.3); |
| 375 -moz-transform: scale(1.3); |
| 376 -ms-transform: scale(1.3); |
| 377 -o-transform: scale(1.3); |
| 378 transform: scale(1.3); |
| 379 } |
| 380 .todo-item .destroy:after { |
| 381 content: "✖"; |
| 382 } |
| 383 .todo-item:hover .destroy { |
| 384 display: block; |
| 385 } |
| 386 .todo-item.editing .destroy, .todo-item.editing .toggle { |
| 387 display: none; |
| 388 } |
| 389 .todo-item.editing:last-child { |
| 390 margin-bottom: -1px; |
| 391 } @media screen AND (-webkit-min-device-pixel-ratio:0) { |
| 392 .todo-item .toggle { |
| 393 background: none; |
| 394 } |
| 395 #todo-item .toggle { |
| 396 height: 40px; |
| 397 } |
| 398 } |
| 399 </style><div class="todo-item completed"> |
| 400 <input class="toggle" type="checkbox"> |
| 146 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 401 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 147 <template bind="" if="{{notEditing}}"> | 402 <template bind="" if="{{notEditing}}"> |
| 148 <label class="edit-label" on-double-click="edit">{{value}}</label> | 403 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 149 </template> | 404 </template> |
| 150 <label class="edit-label" on-double-click="edit">two (checked)</label> | 405 <label class="edit-label" on-double-click="edit">two (checked)</label> |
| 151 | 406 |
| 152 <template bind="" if="{{editing}}"> | 407 <template bind="" if="{{editing}}"> |
| 153 <form on-submit="update"> | 408 <form on-submit="update"> |
| 154 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 409 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 155 </form> | 410 </form> |
| 156 </template> | 411 </template> |
| 157 </shadow-root></div> | 412 </shadow-root></div> |
| 158 <button class="todo-row_destroy" on-click="removeTodo"></button> | 413 <button class="destroy" on-click="removeTodo"></button> |
| 159 </div> | 414 </div> |
| 160 </shadow-root></li> | 415 </shadow-root></li> |
| 161 | 416 |
| 162 <li is="todo-row" todo="{{}}"><shadow-root> | 417 <li is="todo-row" todo="{{}}"><shadow-root> |
| 163 | 418 |
| 164 <div class="todo-row_todo-item"> | 419 <style> |
| 165 <input class="todo-row_toggle" type="checkbox"> | 420 .todo-item { |
| 421 position: relative; |
| 422 font-size: 24px; |
| 423 border-bottom: 1px dotted #ccc; |
| 424 } |
| 425 .todo-item.editing { |
| 426 border-bottom: none; |
| 427 padding: 0; |
| 428 } |
| 429 .todo-item.completed [is=editable-label] { |
| 430 color: #a9a9a9; |
| 431 text-decoration: line-through; |
| 432 } |
| 433 .todo-item .toggle { |
| 434 text-align: center; |
| 435 width: 40px; |
| 436 height: auto; |
| 437 position: absolute; |
| 438 top: 0; |
| 439 bottom: 0; |
| 440 margin: auto 0; |
| 441 border: none; |
| 442 -webkit-appearance: none; |
| 443 -ms-appearance: none; |
| 444 -o-appearance: none; |
| 445 appearance: none; |
| 446 } |
| 447 .todo-item .toggle:after { |
| 448 content: "✔"; |
| 449 line-height: 43px; |
| 450 font-size: 20px; |
| 451 color: #d9d9d9; |
| 452 text-shadow: 0 -1px 0 #bfbfbf; |
| 453 } |
| 454 .todo-item .toggle:checked:after { |
| 455 color: #85ada7; |
| 456 text-shadow: 0 1px 0 #669991; |
| 457 bottom: 1px; |
| 458 position: relative; |
| 459 } |
| 460 .todo-item .destroy { |
| 461 display: none; |
| 462 position: absolute; |
| 463 top: 0; |
| 464 right: 10px; |
| 465 bottom: 0; |
| 466 width: 40px; |
| 467 height: 40px; |
| 468 margin: auto 0; |
| 469 font-size: 22px; |
| 470 color: #a88a8a; |
| 471 -webkit-transition: all 0.2s; |
| 472 -moz-transition: all 0.2s; |
| 473 -ms-transition: all 0.2s; |
| 474 -o-transition: all 0.2s; |
| 475 transition: all 0.2s; |
| 476 } |
| 477 .todo-item .destroy:hover { |
| 478 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); |
| 479 -webkit-transform: scale(1.3); |
| 480 -moz-transform: scale(1.3); |
| 481 -ms-transform: scale(1.3); |
| 482 -o-transform: scale(1.3); |
| 483 transform: scale(1.3); |
| 484 } |
| 485 .todo-item .destroy:after { |
| 486 content: "✖"; |
| 487 } |
| 488 .todo-item:hover .destroy { |
| 489 display: block; |
| 490 } |
| 491 .todo-item.editing .destroy, .todo-item.editing .toggle { |
| 492 display: none; |
| 493 } |
| 494 .todo-item.editing:last-child { |
| 495 margin-bottom: -1px; |
| 496 } @media screen AND (-webkit-min-device-pixel-ratio:0) { |
| 497 .todo-item .toggle { |
| 498 background: none; |
| 499 } |
| 500 #todo-item .toggle { |
| 501 height: 40px; |
| 502 } |
| 503 } |
| 504 </style><div class="todo-item"> |
| 505 <input class="toggle" type="checkbox"> |
| 166 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 506 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 167 <template bind="" if="{{notEditing}}"> | 507 <template bind="" if="{{notEditing}}"> |
| 168 <label class="edit-label" on-double-click="edit">{{value}}</label> | 508 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 169 </template> | 509 </template> |
| 170 <label class="edit-label" on-double-click="edit">three (unchecked)</label> | 510 <label class="edit-label" on-double-click="edit">three (unchecked)</label> |
| 171 | 511 |
| 172 <template bind="" if="{{editing}}"> | 512 <template bind="" if="{{editing}}"> |
| 173 <form on-submit="update"> | 513 <form on-submit="update"> |
| 174 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 514 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 175 </form> | 515 </form> |
| 176 </template> | 516 </template> |
| 177 </shadow-root></div> | 517 </shadow-root></div> |
| 178 <button class="todo-row_destroy" on-click="removeTodo"></button> | 518 <button class="destroy" on-click="removeTodo"></button> |
| 179 </div> | 519 </div> |
| 180 </shadow-root></li> | 520 </shadow-root></li> |
| 181 | 521 |
| 182 </ul> | 522 </ul> |
| 183 </section> | 523 </section> |
| 184 <template bind="" if="{{app.hasTodos}}"> | 524 <template bind="" if="{{app.hasTodos}}"> |
| 185 <footer id="footer"> | 525 <footer id="footer"> |
| 186 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | 526 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 187 <ul is="router-options" id="filters"> | 527 <ul is="router-options" id="filters"> |
| 188 <li> <a href="#/">All</a> </li> | 528 <li> <a href="#/">All</a> </li> |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 221 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 561 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 222 </p> | 562 </p> |
| 223 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 563 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 224 </footer> | 564 </footer> |
| 225 </shadow-root></span> | 565 </shadow-root></span> |
| 226 | 566 |
| 227 | 567 |
| 228 | 568 |
| 229 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 569 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
| 230 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> | 570 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 20863002:
Introduce boot.js: this finally makes it possible to load and run Todomvc (Closed)
Base URL: git@github.com:dart-lang/web-ui.git@master