| OLD | NEW |
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 <html lang="en"><head><style shadowcssshim="">style { display: none !important;
} | 2 <html lang="en"><head> |
| 3 </style><style shadowcssshim="">template { display: none; }</style> | |
| 4 <!-- | 3 <!-- |
| 5 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 |
| 6 single item is present in the todo list. | 5 single item is present in the todo list. |
| 7 --> | 6 --> |
| 8 <meta charset="utf-8"> | 7 <meta charset="utf-8"> |
| 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 10 | 9 |
| 11 <link rel="stylesheet" href="../../../web/base.css"> | 10 <link rel="stylesheet" href="../web/base.css"> |
| 12 <script src="../../packages/polymer/testing/testing.js"></script> | 11 <script src="packages/polymer/testing/testing.js"></script> |
| 13 <title>Dart • TodoMVC</title> | 12 <title>Dart • TodoMVC</title> |
| 14 <style>template, | 13 <style>template, |
| 15 thead[template], | 14 thead[template], |
| 16 tbody[template], | 15 tbody[template], |
| 17 tfoot[template], | 16 tfoot[template], |
| 18 th[template], | 17 th[template], |
| 19 tr[template], | 18 tr[template], |
| 20 td[template], | 19 td[template], |
| 21 caption[template], | 20 caption[template], |
| 22 colgroup[template], | 21 colgroup[template], |
| 23 col[template], | 22 col[template], |
| 24 option[template] { | 23 option[template] { |
| 25 display: none; | 24 display: none; |
| 26 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> | 25 }</style></head><body><script src="packages/shadow_dom/shadow_dom.min.js"></scri
pt> |
| 26 <script src="packages/browser/interop.js"></script> |
| 27 <polymer-element name="router-options" extends="ul"> |
| 28 <template><content></content></template> |
| 29 |
| 30 </polymer-element><polymer-element name="editable-label" attributes="value"> |
| 31 <template> |
| 32 <template bind="" if="{{!editing}}"> |
| 33 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 34 </template> |
| 35 <template bind="" if="{{editing}}"> |
| 36 <form on-submit="update"> |
| 37 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 38 </form> |
| 39 </template> |
| 40 </template> |
| 41 |
| 42 </polymer-element><polymer-element name="todo-row" extends="li" attributes="todo
"> |
| 27 <template> | 43 <template> |
| 28 <style scoped=""> | 44 <style scoped=""> |
| 29 .todo-item { | 45 .todo-item { |
| 30 position: relative; | 46 position: relative; |
| 31 font-size: 24px; | 47 font-size: 24px; |
| 32 border-bottom: 1px dotted #ccc; | 48 border-bottom: 1px dotted #ccc; |
| 33 } | 49 } |
| 34 | 50 |
| 35 .todo-item.editing { | 51 .todo-item.editing { |
| 36 border-bottom: none; | 52 border-bottom: none; |
| (...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 135 } | 151 } |
| 136 } | 152 } |
| 137 </style> | 153 </style> |
| 138 <div class="todo-item"> | 154 <div class="todo-item"> |
| 139 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | 155 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 140 <editable-label id="label" value="{{todo.task}}"></editable-label> | 156 <editable-label id="label" value="{{todo.task}}"></editable-label> |
| 141 <button class="destroy" on-click="removeTodo"></button> | 157 <button class="destroy" on-click="removeTodo"></button> |
| 142 </div> | 158 </div> |
| 143 </template> | 159 </template> |
| 144 | 160 |
| 145 </polymer-element> | 161 </polymer-element><polymer-element name="todo-app"> |
| 146 <polymer-element name="todo-app"> | |
| 147 <template> | 162 <template> |
| 148 <section id="todoapp"> | 163 <section id="todoapp"> |
| 149 <header id="header"> | 164 <header id="header"> |
| 150 <h1 class="title">todos</h1> | 165 <h1 class="title">todos</h1> |
| 151 <form on-submit="addTodo"> | 166 <form on-submit="addTodo"> |
| 152 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 167 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 153 </form> | 168 </form> |
| 154 </header> | 169 </header> |
| 155 <section id="main"> | 170 <section id="main"> |
| 156 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | 171 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| (...skipping 27 matching lines...) Expand all Loading... |
| 184 Learn more about | 199 Learn more about |
| 185 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | 200 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 186 or | 201 or |
| 187 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 202 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 188 </p> | 203 </p> |
| 189 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 204 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 190 </footer> | 205 </footer> |
| 191 </template> | 206 </template> |
| 192 | 207 |
| 193 </polymer-element> | 208 </polymer-element> |
| 194 <polymer-element name="router-options" extends="ul"> | |
| 195 <template><content></content></template> | |
| 196 | |
| 197 </polymer-element> | |
| 198 <polymer-element name="editable-label" attributes="value"> | |
| 199 <template> | |
| 200 <template bind="" if="{{!editing}}"> | |
| 201 <label class="edit-label" on-double-click="edit">{{value}}</label> | |
| 202 </template> | |
| 203 <template bind="" if="{{editing}}"> | |
| 204 <form on-submit="update"> | |
| 205 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | |
| 206 </form> | |
| 207 </template> | |
| 208 </template> | |
| 209 | |
| 210 </polymer-element> | |
| 211 | |
| 212 <todo-app><shadow-root> | 209 <todo-app><shadow-root> |
| 213 <section id="todoapp"> | 210 <section id="todoapp"> |
| 214 <header id="header"> | 211 <header id="header"> |
| 215 <h1 class="title">todos</h1> | 212 <h1 class="title">todos</h1> |
| 216 <form on-submit="addTodo"> | 213 <form on-submit="addTodo"> |
| 217 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 214 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 218 </form> | 215 </form> |
| 219 </header> | 216 </header> |
| 220 <section id="main"> | 217 <section id="main"> |
| 221 <input id="toggle-all" type="checkbox"> | 218 <input id="toggle-all" type="checkbox"> |
| 222 <label for="toggle-all"></label> | 219 <label for="toggle-all"></label> |
| 223 <ul id="todo-list"> | 220 <ul id="todo-list"> |
| 224 <template repeat="{{app.visibleTodos}}"></template> | 221 <template repeat="{{app.visibleTodos}}"></template> |
| 225 <li is="todo-row" todo="{{}}"><shadow-root> | 222 <li is="todo-row" todo="{{}}"><shadow-root> |
| 226 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | 223 <style scoped="">/* style hidden by testing.js */</style> |
| 227 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo
ttom-style: dotted; border-bottom-color: rgb(204, 204, 204); | |
| 228 } | |
| 229 | |
| 230 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing { | |
| 231 » border-bottom-style: none; padding: 0px; | |
| 232 } | |
| 233 | |
| 234 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co
mpleted [is="editable-label"] { | |
| 235 » color: rgb(169, 169, 169); text-decoration: line-through; | |
| 236 } | |
| 237 | |
| 238 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 239 » text-align: center; width: 40px; height: auto; position: absolute; top:
0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none; | |
| 240 } | |
| 241 | |
| 242 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after { | |
| 243 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2
17); text-shadow: rgb(191, 191, 191) 0px -1px 0px; | |
| 244 } | |
| 245 | |
| 246 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che
cked::after { | |
| 247 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px;
bottom: 1px; position: relative; | |
| 248 } | |
| 249 | |
| 250 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy { | |
| 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; | |
| 252 } | |
| 253 | |
| 254 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover { | |
| 255 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px
10px; -webkit-transform: scale(1.3); | |
| 256 } | |
| 257 | |
| 258 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after { | |
| 259 » content: '✖'; | |
| 260 } | |
| 261 | |
| 262 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy { | |
| 263 » display: block; | |
| 264 } | |
| 265 | |
| 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 { | |
| 267 » display: none; | |
| 268 } | |
| 269 | |
| 270 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch
ild { | |
| 271 » margin-bottom: -1px; | |
| 272 } | |
| 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> | |
| 287 <div class="todo-item"> | 224 <div class="todo-item"> |
| 288 <input class="toggle" type="checkbox"> | 225 <input class="toggle" type="checkbox"> |
| 289 <editable-label id="label" value="{{todo.task}}"><shadow-root> | 226 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 290 <template bind="" if="{{!editing}}"></template> | 227 <template bind="" if="{{!editing}}"></template> |
| 291 <label class="edit-label" on-double-click="edit">hola</label> | 228 <label class="edit-label" on-double-click="edit">hola</label> |
| 292 | 229 |
| 293 <template bind="" if="{{editing}}"></template> | 230 <template bind="" if="{{editing}}"></template> |
| 294 </shadow-root></editable-label> | 231 </shadow-root></editable-label> |
| 295 <button class="destroy" on-click="removeTodo"></button> | 232 <button class="destroy" on-click="removeTodo"></button> |
| 296 </div> | 233 </div> |
| (...skipping 21 matching lines...) Expand all Loading... |
| 318 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | 255 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 319 or | 256 or |
| 320 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 257 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 321 </p> | 258 </p> |
| 322 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 259 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 323 </footer> | 260 </footer> |
| 324 </shadow-root></todo-app> | 261 </shadow-root></todo-app> |
| 325 | 262 |
| 326 | 263 |
| 327 | 264 |
| 328 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | |
| 329 <script type="text/javascript" src="packages/browser/interop.js"></script> | |
| 330 <script type="application/dart" src="todomvc_mainpage2_test.html_bootstrap.dart"
></script></body></html> | 265 <script type="application/dart" src="todomvc_mainpage2_test.html_bootstrap.dart"
></script></body></html> |
| OLD | NEW |