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 <link rel="stylesheet" type="text/css" href="todomvc_listorder_test.html.css"><s
tyle>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> | 30 <body><polymer-element name="todo-row" extends="li" attributes="todo"> |
31 <span is="todo-app"><shadow-root> <section id="todoapp"> | 31 <template> |
| 32 |
| 33 <div class="todo-row_todo-item"> |
| 34 <input class="todo-row_toggle" type="checkbox" checked="{{todo.done}}"> |
| 35 <div is="editable-label" id="label" value="{{todo.task}}"></div> |
| 36 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 37 </div> |
| 38 </template> |
| 39 |
| 40 </polymer-element> |
| 41 <polymer-element name="todo-app"> |
| 42 <template> |
| 43 <section id="todoapp"> |
32 <header id="header"> | 44 <header id="header"> |
33 <h1 class="title">todos</h1> | 45 <h1 class="title">todos</h1> |
34 <form on-submit="addTodo"> | 46 <form on-submit="addTodo"> |
| 47 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 48 </form> |
| 49 </header> |
| 50 <section id="main"> |
| 51 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| 52 <label for="toggle-all"></label> |
| 53 <ul id="todo-list"> |
| 54 <template repeat="{{app.visibleTodos}}"> |
| 55 <li is="todo-row" todo="{{}}"></li> |
| 56 </template> |
| 57 </ul> |
| 58 </section> |
| 59 <template bind="" if="{{app.hasTodos}}"> |
| 60 <footer id="footer"> |
| 61 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 62 <ul is="router-options" id="filters"> |
| 63 <li> <a href="#/">All</a> </li> |
| 64 <li> <a href="#/active">Active</a> </li> |
| 65 <li> <a href="#/completed">Completed</a> </li> |
| 66 </ul> |
| 67 <template bind="" if="{{app.hasCompleteTodos}}"> |
| 68 <button id="clear-completed" on-click="clear"> |
| 69 Clear completed ({{app.doneCount}}) |
| 70 </button> |
| 71 </template> |
| 72 </footer> |
| 73 </template> |
| 74 </section> |
| 75 <footer id="info"> |
| 76 <p>Double-click to edit a todo.</p> |
| 77 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> |
| 78 <p> |
| 79 Learn more about |
| 80 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 81 or |
| 82 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 83 </p> |
| 84 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 85 </footer> |
| 86 </template> |
| 87 |
| 88 </polymer-element> |
| 89 <polymer-element name="router-options" extends="ul"> |
| 90 <template><content></content></template> |
| 91 |
| 92 </polymer-element> |
| 93 <polymer-element name="editable-label" extends="div" attributes="value"> |
| 94 <template> |
| 95 <template bind="" if="{{notEditing}}"> |
| 96 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 97 </template> |
| 98 <template bind="" if="{{editing}}"> |
| 99 <form on-submit="update"> |
| 100 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 101 </form> |
| 102 </template> |
| 103 </template> |
| 104 |
| 105 </polymer-element> |
| 106 |
| 107 <span is="todo-app"><shadow-root> |
| 108 <section id="todoapp"> |
| 109 <header id="header"> |
| 110 <h1 class="title">todos</h1> |
| 111 <form on-submit="addTodo"> |
35 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 112 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
36 </form> | 113 </form> |
37 </header> | 114 </header> |
38 <section id="main"> | 115 <section id="main"> |
39 <input id="toggle-all" type="checkbox"> | 116 <input id="toggle-all" type="checkbox"> |
40 <label for="toggle-all"></label> | 117 <label for="toggle-all"></label> |
41 <ul id="todo-list"> | 118 <ul id="todo-list"> |
42 <template repeat="{{app.visibleTodos}}"> | 119 <template repeat="{{app.visibleTodos}}"> |
43 <li is="todo-row" todo="{{}}"></li> | 120 <li is="todo-row" todo="{{}}"></li> |
44 </template> | 121 </template> |
45 <li is="todo-row" todo="{{}}"><shadow-root> | 122 <li is="todo-row" todo="{{}}"><shadow-root> |
| 123 |
46 <div class="todo-row_todo-item"> | 124 <div class="todo-row_todo-item"> |
47 <input class="todo-row_toggle" type="checkbox"> | 125 <input class="todo-row_toggle" type="checkbox"> |
48 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 126 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 127 <template bind="" if="{{notEditing}}"> |
49 <label class="edit-label" on-double-click="edit">{{value}}</label> | 128 <label class="edit-label" on-double-click="edit">{{value}}</label> |
50 </template> | 129 </template> |
51 <label class="edit-label" on-double-click="edit">one (unchecked)</label> | 130 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
52 | 131 |
53 <template bind="" if="{{editing}}"> | 132 <template bind="" if="{{editing}}"> |
54 <form on-submit="update"> | 133 <form on-submit="update"> |
55 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 134 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
56 </form> | 135 </form> |
57 </template> | 136 </template> |
58 </shadow-root></div> | 137 </shadow-root></div> |
59 <button class="todo-row_destroy" on-click="removeTodo"></button> | 138 <button class="todo-row_destroy" on-click="removeTodo"></button> |
60 </div> | 139 </div> |
61 </shadow-root></li> | 140 </shadow-root></li> |
62 | 141 |
63 <li is="todo-row" todo="{{}}"><shadow-root> | 142 <li is="todo-row" todo="{{}}"><shadow-root> |
| 143 |
64 <div class="todo-row_todo-item todo-row_completed"> | 144 <div class="todo-row_todo-item todo-row_completed"> |
65 <input class="todo-row_toggle" type="checkbox"> | 145 <input class="todo-row_toggle" type="checkbox"> |
66 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 146 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 147 <template bind="" if="{{notEditing}}"> |
67 <label class="edit-label" on-double-click="edit">{{value}}</label> | 148 <label class="edit-label" on-double-click="edit">{{value}}</label> |
68 </template> | 149 </template> |
69 <label class="edit-label" on-double-click="edit">two (checked)</label> | 150 <label class="edit-label" on-double-click="edit">two (checked)</label> |
70 | 151 |
71 <template bind="" if="{{editing}}"> | 152 <template bind="" if="{{editing}}"> |
72 <form on-submit="update"> | 153 <form on-submit="update"> |
73 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 154 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
74 </form> | 155 </form> |
75 </template> | 156 </template> |
76 </shadow-root></div> | 157 </shadow-root></div> |
77 <button class="todo-row_destroy" on-click="removeTodo"></button> | 158 <button class="todo-row_destroy" on-click="removeTodo"></button> |
78 </div> | 159 </div> |
79 </shadow-root></li> | 160 </shadow-root></li> |
80 | 161 |
81 <li is="todo-row" todo="{{}}"><shadow-root> | 162 <li is="todo-row" todo="{{}}"><shadow-root> |
| 163 |
82 <div class="todo-row_todo-item"> | 164 <div class="todo-row_todo-item"> |
83 <input class="todo-row_toggle" type="checkbox"> | 165 <input class="todo-row_toggle" type="checkbox"> |
84 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 166 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 167 <template bind="" if="{{notEditing}}"> |
85 <label class="edit-label" on-double-click="edit">{{value}}</label> | 168 <label class="edit-label" on-double-click="edit">{{value}}</label> |
86 </template> | 169 </template> |
87 <label class="edit-label" on-double-click="edit">three (unchecked)</label> | 170 <label class="edit-label" on-double-click="edit">three (unchecked)</label> |
88 | 171 |
89 <template bind="" if="{{editing}}"> | 172 <template bind="" if="{{editing}}"> |
90 <form on-submit="update"> | 173 <form on-submit="update"> |
91 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 174 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
92 </form> | 175 </form> |
93 </template> | 176 </template> |
94 </shadow-root></div> | 177 </shadow-root></div> |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
138 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 221 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
139 </p> | 222 </p> |
140 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 223 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
141 </footer> | 224 </footer> |
142 </shadow-root></span> | 225 </shadow-root></span> |
143 | 226 |
144 | 227 |
145 | 228 |
146 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 229 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
147 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> | 230 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> |
OLD | NEW |