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