| OLD | NEW |
|---|
| (Empty) |
| 1 Content-Type: text/plain | |
| 2 <html lang="en"><head> | |
| 3 <!-- | |
| 4 This test runs the TodoMVC app and evaluates that it renders correctly if a | |
| 5 single item is present in the todo list. | |
| 6 --> | |
| 7 <meta charset="utf-8"> | |
| 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| 9 | |
| 10 <link rel="stylesheet" href="../web/base.css"> | |
| 11 <script src="packages/polymer/testing/testing.js"></script> | |
| 12 <title>Dart • TodoMVC</title> | |
| 13 <style>template, | |
| 14 thead[template], | |
| 15 tbody[template], | |
| 16 tfoot[template], | |
| 17 th[template], | |
| 18 tr[template], | |
| 19 td[template], | |
| 20 caption[template], | |
| 21 colgroup[template], | |
| 22 col[template], | |
| 23 option[template] { | |
| 24 display: none; | |
| 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
"> | |
| 43 <template> | |
| 44 <style scoped=""> | |
| 45 .todo-item { | |
| 46 position: relative; | |
| 47 font-size: 24px; | |
| 48 border-bottom: 1px dotted #ccc; | |
| 49 } | |
| 50 | |
| 51 .todo-item.editing { | |
| 52 border-bottom: none; | |
| 53 padding: 0; | |
| 54 } | |
| 55 | |
| 56 /* | |
| 57 TODO(jmesserly): the ".todo-item label" selector does not work with real | |
| 58 ShadowRoot because it crosses the shadow boundary. | |
| 59 */ | |
| 60 .todo-item.completed [is=editable-label] { | |
| 61 color: #a9a9a9; | |
| 62 text-decoration: line-through; | |
| 63 } | |
| 64 | |
| 65 .todo-item .toggle { | |
| 66 text-align: center; | |
| 67 width: 40px; | |
| 68 /* auto, since non-WebKit browsers don't support input styling */ | |
| 69 height: auto; | |
| 70 position: absolute; | |
| 71 top: 0; | |
| 72 bottom: 0; | |
| 73 margin: auto 0; | |
| 74 border: none; /* Mobile Safari */ | |
| 75 -webkit-appearance: none; | |
| 76 /*-moz-appearance: none;*/ | |
| 77 -ms-appearance: none; | |
| 78 -o-appearance: none; | |
| 79 appearance: none; | |
| 80 } | |
| 81 | |
| 82 .todo-item .toggle:after { | |
| 83 content: '✔'; | |
| 84 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ | |
| 85 font-size: 20px; | |
| 86 color: #d9d9d9; | |
| 87 text-shadow: 0 -1px 0 #bfbfbf; | |
| 88 } | |
| 89 | |
| 90 .todo-item .toggle:checked:after { | |
| 91 color: #85ada7; | |
| 92 text-shadow: 0 1px 0 #669991; | |
| 93 bottom: 1px; | |
| 94 position: relative; | |
| 95 } | |
| 96 .todo-item .destroy { | |
| 97 display: none; | |
| 98 position: absolute; | |
| 99 top: 0; | |
| 100 right: 10px; | |
| 101 bottom: 0; | |
| 102 width: 40px; | |
| 103 height: 40px; | |
| 104 margin: auto 0; | |
| 105 font-size: 22px; | |
| 106 color: #a88a8a; | |
| 107 -webkit-transition: all 0.2s; | |
| 108 -moz-transition: all 0.2s; | |
| 109 -ms-transition: all 0.2s; | |
| 110 -o-transition: all 0.2s; | |
| 111 transition: all 0.2s; | |
| 112 } | |
| 113 | |
| 114 .todo-item .destroy:hover { | |
| 115 text-shadow: 0 0 1px #000, | |
| 116 0 0 10px rgba(199, 107, 107, 0.8); | |
| 117 -webkit-transform: scale(1.3); | |
| 118 -moz-transform: scale(1.3); | |
| 119 -ms-transform: scale(1.3); | |
| 120 -o-transform: scale(1.3); | |
| 121 transform: scale(1.3); | |
| 122 } | |
| 123 | |
| 124 .todo-item .destroy:after { | |
| 125 content: '✖'; | |
| 126 } | |
| 127 | |
| 128 .todo-item:hover .destroy { | |
| 129 display: block; | |
| 130 } | |
| 131 | |
| 132 .todo-item.editing .destroy, | |
| 133 .todo-item.editing .toggle { | |
| 134 display: none; | |
| 135 } | |
| 136 | |
| 137 .todo-item.editing:last-child { | |
| 138 margin-bottom: -1px; | |
| 139 } | |
| 140 | |
| 141 /* | |
| 142 Hack to remove background from Mobile Safari. | |
| 143 Can't use it globally since it destroys checkboxes in Firefox and Opera | |
| 144 */ | |
| 145 @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| 146 .todo-item .toggle { | |
| 147 background: none; | |
| 148 } | |
| 149 #todo-item .toggle { | |
| 150 height: 40px; | |
| 151 } | |
| 152 } | |
| 153 </style> | |
| 154 <div class="todo-item"> | |
| 155 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | |
| 156 <editable-label id="label" value="{{todo.task}}"></editable-label> | |
| 157 <button class="destroy" on-click="removeTodo"></button> | |
| 158 </div> | |
| 159 </template> | |
| 160 | |
| 161 </polymer-element><polymer-element name="todo-app"> | |
| 162 <template> | |
| 163 <section id="todoapp"> | |
| 164 <header id="header"> | |
| 165 <h1 class="title">todos</h1> | |
| 166 <form on-submit="addTodo"> | |
| 167 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | |
| 168 </form> | |
| 169 </header> | |
| 170 <section id="main"> | |
| 171 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | |
| 172 <label for="toggle-all"></label> | |
| 173 <ul id="todo-list"> | |
| 174 <template repeat="{{app.visibleTodos}}"> | |
| 175 <li is="todo-row" todo="{{}}"></li> | |
| 176 </template> | |
| 177 </ul> | |
| 178 </section> | |
| 179 <template bind="" if="{{app.todos.length > 0}}"> | |
| 180 <footer id="footer"> | |
| 181 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | |
| 182 <ul is="router-options" id="filters"> | |
| 183 <li> <a href="#/">All</a> </li> | |
| 184 <li> <a href="#/active">Active</a> </li> | |
| 185 <li> <a href="#/completed">Completed</a> </li> | |
| 186 </ul> | |
| 187 <template bind="" if="{{app.hasCompleteTodos}}"> | |
| 188 <button id="clear-completed" on-click="clear"> | |
| 189 Clear completed ({{app.doneCount}}) | |
| 190 </button> | |
| 191 </template> | |
| 192 </footer> | |
| 193 </template> | |
| 194 </section> | |
| 195 <footer id="info"> | |
| 196 <p>Double-click to edit a todo.</p> | |
| 197 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> | |
| 198 <p> | |
| 199 Learn more about | |
| 200 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | |
| 201 or | |
| 202 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | |
| 203 </p> | |
| 204 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | |
| 205 </footer> | |
| 206 </template> | |
| 207 | |
| 208 </polymer-element> | |
| 209 <todo-app><shadow-root> | |
| 210 <section id="todoapp"> | |
| 211 <header id="header"> | |
| 212 <h1 class="title">todos</h1> | |
| 213 <form on-submit="addTodo"> | |
| 214 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | |
| 215 </form> | |
| 216 </header> | |
| 217 <section id="main"> | |
| 218 <input id="toggle-all" type="checkbox"> | |
| 219 <label for="toggle-all"></label> | |
| 220 <ul id="todo-list"> | |
| 221 <template repeat="{{app.visibleTodos}}"></template> | |
| 222 <li is="todo-row" todo="{{}}"><shadow-root> | |
| 223 <style scoped="">/* style hidden by testing.js */</style> | |
| 224 <div class="todo-item"> | |
| 225 <input class="toggle" type="checkbox"> | |
| 226 <editable-label id="label" value="{{todo.task}}"><shadow-root> | |
| 227 <template bind="" if="{{!editing}}"></template> | |
| 228 <label class="edit-label" on-double-click="edit">hola</label> | |
| 229 | |
| 230 <template bind="" if="{{editing}}"></template> | |
| 231 </shadow-root></editable-label> | |
| 232 <button class="destroy" on-click="removeTodo"></button> | |
| 233 </div> | |
| 234 </shadow-root></li> | |
| 235 | |
| 236 </ul> | |
| 237 </section> | |
| 238 <template bind="" if="{{app.todos.length > 0}}"></template> | |
| 239 <footer id="footer"> | |
| 240 <span id="todo-count"><strong>1</strong></span> | |
| 241 <ul is="router-options" id="filters"><shadow-root><content></content></s
hadow-root> | |
| 242 <li> <a href="#/" class="selected">All</a> </li> | |
| 243 <li> <a href="#/active" class="">Active</a> </li> | |
| 244 <li> <a href="#/completed" class="">Completed</a> </li> | |
| 245 </ul> | |
| 246 <template bind="" if="{{app.hasCompleteTodos}}"></template> | |
| 247 </footer> | |
| 248 | |
| 249 </section> | |
| 250 <footer id="info"> | |
| 251 <p>Double-click to edit a todo.</p> | |
| 252 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> | |
| 253 <p> | |
| 254 Learn more about | |
| 255 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | |
| 256 or | |
| 257 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | |
| 258 </p> | |
| 259 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | |
| 260 </footer> | |
| 261 </shadow-root></todo-app> | |
| 262 | |
| 263 | |
| 264 | |
| 265 <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