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