| OLD | NEW |
|---|
| (Empty) |
| 1 Content-Type: text/plain | |
| 2 <html lang="en"><head><style shadowcssshim="">style { display: none !important;
} | |
| 3 </style><style shadowcssshim="">template { display: none; }</style> | |
| 4 <!-- | |
| 5 This test runs the TodoMVC app and evaluates that it renders correctly if a | |
| 6 single item is present in the todo list. | |
| 7 --> | |
| 8 <meta charset="utf-8"> | |
| 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| 10 | |
| 11 <link rel="stylesheet" href="../../../web/base.css"> | |
| 12 <script src="../../packages/polymer/testing/testing.js"></script> | |
| 13 <title>Dart • TodoMVC</title> | |
| 14 <style>template, | |
| 15 thead[template], | |
| 16 tbody[template], | |
| 17 tfoot[template], | |
| 18 th[template], | |
| 19 tr[template], | |
| 20 td[template], | |
| 21 caption[template], | |
| 22 colgroup[template], | |
| 23 col[template], | |
| 24 option[template] { | |
| 25 display: none; | |
| 26 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> | |
| 27 <template> | |
| 28 <style scoped=""> | |
| 29 .todo-item { | |
| 30 position: relative; | |
| 31 font-size: 24px; | |
| 32 border-bottom: 1px dotted #ccc; | |
| 33 } | |
| 34 | |
| 35 .todo-item.editing { | |
| 36 border-bottom: none; | |
| 37 padding: 0; | |
| 38 } | |
| 39 | |
| 40 /* | |
| 41 TODO(jmesserly): the ".todo-item label" selector does not work with real | |
| 42 ShadowRoot because it crosses the shadow boundary. | |
| 43 */ | |
| 44 .todo-item.completed [is=editable-label] { | |
| 45 color: #a9a9a9; | |
| 46 text-decoration: line-through; | |
| 47 } | |
| 48 | |
| 49 .todo-item .toggle { | |
| 50 text-align: center; | |
| 51 width: 40px; | |
| 52 /* auto, since non-WebKit browsers don't support input styling */ | |
| 53 height: auto; | |
| 54 position: absolute; | |
| 55 top: 0; | |
| 56 bottom: 0; | |
| 57 margin: auto 0; | |
| 58 border: none; /* Mobile Safari */ | |
| 59 -webkit-appearance: none; | |
| 60 /*-moz-appearance: none;*/ | |
| 61 -ms-appearance: none; | |
| 62 -o-appearance: none; | |
| 63 appearance: none; | |
| 64 } | |
| 65 | |
| 66 .todo-item .toggle:after { | |
| 67 content: '✔'; | |
| 68 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ | |
| 69 font-size: 20px; | |
| 70 color: #d9d9d9; | |
| 71 text-shadow: 0 -1px 0 #bfbfbf; | |
| 72 } | |
| 73 | |
| 74 .todo-item .toggle:checked:after { | |
| 75 color: #85ada7; | |
| 76 text-shadow: 0 1px 0 #669991; | |
| 77 bottom: 1px; | |
| 78 position: relative; | |
| 79 } | |
| 80 .todo-item .destroy { | |
| 81 display: none; | |
| 82 position: absolute; | |
| 83 top: 0; | |
| 84 right: 10px; | |
| 85 bottom: 0; | |
| 86 width: 40px; | |
| 87 height: 40px; | |
| 88 margin: auto 0; | |
| 89 font-size: 22px; | |
| 90 color: #a88a8a; | |
| 91 -webkit-transition: all 0.2s; | |
| 92 -moz-transition: all 0.2s; | |
| 93 -ms-transition: all 0.2s; | |
| 94 -o-transition: all 0.2s; | |
| 95 transition: all 0.2s; | |
| 96 } | |
| 97 | |
| 98 .todo-item .destroy:hover { | |
| 99 text-shadow: 0 0 1px #000, | |
| 100 0 0 10px rgba(199, 107, 107, 0.8); | |
| 101 -webkit-transform: scale(1.3); | |
| 102 -moz-transform: scale(1.3); | |
| 103 -ms-transform: scale(1.3); | |
| 104 -o-transform: scale(1.3); | |
| 105 transform: scale(1.3); | |
| 106 } | |
| 107 | |
| 108 .todo-item .destroy:after { | |
| 109 content: '✖'; | |
| 110 } | |
| 111 | |
| 112 .todo-item:hover .destroy { | |
| 113 display: block; | |
| 114 } | |
| 115 | |
| 116 .todo-item.editing .destroy, | |
| 117 .todo-item.editing .toggle { | |
| 118 display: none; | |
| 119 } | |
| 120 | |
| 121 .todo-item.editing:last-child { | |
| 122 margin-bottom: -1px; | |
| 123 } | |
| 124 | |
| 125 /* | |
| 126 Hack to remove background from Mobile Safari. | |
| 127 Can't use it globally since it destroys checkboxes in Firefox and Opera | |
| 128 */ | |
| 129 @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| 130 .todo-item .toggle { | |
| 131 background: none; | |
| 132 } | |
| 133 #todo-item .toggle { | |
| 134 height: 40px; | |
| 135 } | |
| 136 } | |
| 137 </style> | |
| 138 <div class="todo-item"> | |
| 139 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | |
| 140 <editable-label id="label" value="{{todo.task}}"></editable-label> | |
| 141 <button class="destroy" on-click="removeTodo"></button> | |
| 142 </div> | |
| 143 </template> | |
| 144 | |
| 145 </polymer-element> | |
| 146 <polymer-element name="todo-app"> | |
| 147 <template> | |
| 148 <section id="todoapp"> | |
| 149 <header id="header"> | |
| 150 <h1 class="title">todos</h1> | |
| 151 <form on-submit="addTodo"> | |
| 152 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | |
| 153 </form> | |
| 154 </header> | |
| 155 <section id="main"> | |
| 156 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | |
| 157 <label for="toggle-all"></label> | |
| 158 <ul id="todo-list"> | |
| 159 <template repeat="{{app.visibleTodos}}"> | |
| 160 <li is="todo-row" todo="{{}}"></li> | |
| 161 </template> | |
| 162 </ul> | |
| 163 </section> | |
| 164 <template bind="" if="{{app.todos.length > 0}}"> | |
| 165 <footer id="footer"> | |
| 166 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | |
| 167 <ul is="router-options" id="filters"> | |
| 168 <li> <a href="#/">All</a> </li> | |
| 169 <li> <a href="#/active">Active</a> </li> | |
| 170 <li> <a href="#/completed">Completed</a> </li> | |
| 171 </ul> | |
| 172 <template bind="" if="{{app.hasCompleteTodos}}"> | |
| 173 <button id="clear-completed" on-click="clear"> | |
| 174 Clear completed ({{app.doneCount}}) | |
| 175 </button> | |
| 176 </template> | |
| 177 </footer> | |
| 178 </template> | |
| 179 </section> | |
| 180 <footer id="info"> | |
| 181 <p>Double-click to edit a todo.</p> | |
| 182 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> | |
| 183 <p> | |
| 184 Learn more about | |
| 185 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | |
| 186 or | |
| 187 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | |
| 188 </p> | |
| 189 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | |
| 190 </footer> | |
| 191 </template> | |
| 192 | |
| 193 </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> | |
| 213 <section id="todoapp"> | |
| 214 <header id="header"> | |
| 215 <h1 class="title">todos</h1> | |
| 216 <form on-submit="addTodo"> | |
| 217 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | |
| 218 </form> | |
| 219 </header> | |
| 220 <section id="main"> | |
| 221 <input id="toggle-all" type="checkbox"> | |
| 222 <label for="toggle-all"></label> | |
| 223 <ul id="todo-list"> | |
| 224 <template repeat="{{app.visibleTodos}}"></template> | |
| 225 <li is="todo-row" todo="{{}}"><shadow-root> | |
| 226 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | |
| 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"> | |
| 288 <input class="toggle" type="checkbox"> | |
| 289 <editable-label id="label" value="{{todo.task}}"><shadow-root> | |
| 290 <template bind="" if="{{!editing}}"></template> | |
| 291 <label class="edit-label" on-double-click="edit">hola</label> | |
| 292 | |
| 293 <template bind="" if="{{editing}}"></template> | |
| 294 </shadow-root></editable-label> | |
| 295 <button class="destroy" on-click="removeTodo"></button> | |
| 296 </div> | |
| 297 </shadow-root></li> | |
| 298 | |
| 299 </ul> | |
| 300 </section> | |
| 301 <template bind="" if="{{app.todos.length > 0}}"></template> | |
| 302 <footer id="footer"> | |
| 303 <span id="todo-count"><strong>1</strong></span> | |
| 304 <ul is="router-options" id="filters"><shadow-root><content></content></s
hadow-root> | |
| 305 <li> <a href="#/" class="selected">All</a> </li> | |
| 306 <li> <a href="#/active" class="">Active</a> </li> | |
| 307 <li> <a href="#/completed" class="">Completed</a> </li> | |
| 308 </ul> | |
| 309 <template bind="" if="{{app.hasCompleteTodos}}"></template> | |
| 310 </footer> | |
| 311 | |
| 312 </section> | |
| 313 <footer id="info"> | |
| 314 <p>Double-click to edit a todo.</p> | |
| 315 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> | |
| 316 <p> | |
| 317 Learn more about | |
| 318 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | |
| 319 or | |
| 320 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | |
| 321 </p> | |
| 322 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | |
| 323 </footer> | |
| 324 </shadow-root></todo-app> | |
| 325 | |
| 326 | |
| 327 | |
| 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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23539003:
Turn on Polymer TodoMVC tests on Dart buildbots (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart