| OLD | NEW |
|---|
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 layer at (0,0) size 785x641 | 2 <html lang="en"><head><style>template { display: none; }</style> |
| 3 RenderView at (0,0) size 785x600 | 3 <!-- |
| 4 layer at (0,0) size 785x641 | 4 This test runs the TodoMVC app, adds a few todos, marks some as done |
| 5 RenderBlock {HTML} at (0,0) size 785x641 | 5 programatically, and clicks on a checkbox to mark others via the UI. |
| 6 RenderBody {BODY} at (117,130) size 551x495 [color=#4D4D4D] [bgcolor=#EAEAEA
] | 6 --> |
| 7 RenderBlock (anonymous) at (0,0) size 550x0 | 7 <meta charset="utf-8"> |
| 8 RenderInline {SPAN} at (0,0) size 0x0 | 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 9 RenderText {#text} at (0,0) size 0x0 | 9 |
| 10 RenderBlock (anonymous) at (0,0) size 550x272 | 10 <link rel="stylesheet" href="../../../web/base.css"> |
| 11 RenderBlock (anonymous) at (0,312) size 550x0 | 11 <script src="../../packages/polymer/testing/testing.js"></script> |
| 12 RenderInline {SPAN} at (0,0) size 0x0 | 12 <title>Dart • TodoMVC</title> |
| 13 RenderText {#text} at (0,0) size 0x0 | 13 <style>template, |
| 14 RenderBlock (anonymous) at (0,337) size 550x158 | 14 thead[template], |
| 15 RenderBlock {FOOTER} at (0,0) size 550x158 [color=#A6A6A6] | 15 tbody[template], |
| 16 RenderBlock {P} at (0,0) size 550x22 | 16 tfoot[template], |
| 17 RenderText {#text} at (135,2) size 280x18 | 17 th[template], |
| 18 text run at (135,2) width 280: "Double-click to edit a todo." | 18 tr[template], |
| 19 RenderBlock {P} at (0,38) size 550x22 | 19 td[template], |
| 20 RenderText {#text} at (160,2) size 130x18 | 20 caption[template], |
| 21 text run at (160,2) width 130: "Credits: the " | 21 colgroup[template], |
| 22 RenderInline {A} at (0,0) size 40x18 | 22 col[template], |
| 23 RenderText {#text} at (290,2) size 40x18 | 23 option[template] { |
| 24 text run at (290,2) width 40: "Dart" | 24 display: none; |
| 25 RenderText {#text} at (330,2) size 60x18 | 25 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> |
| 26 text run at (330,2) width 60: " team." | 26 <template> |
| 27 RenderBlock {P} at (0,76) size 550x44 | 27 <style scoped=""> |
| 28 RenderText {#text} at (25,2) size 170x18 | 28 .todo-item { |
| 29 text run at (25,2) width 170: "Learn more about " | 29 position: relative; |
| 30 RenderInline {A} at (0,0) size 210x18 | 30 font-size: 24px; |
| 31 RenderText {#text} at (195,2) size 210x18 | 31 border-bottom: 1px dotted #ccc; |
| 32 text run at (195,2) width 210: "Dart + Web Components" | 32 } |
| 33 RenderText {#text} at (405,2) size 40x18 | 33 |
| 34 text run at (405,2) width 10: " " | 34 .todo-item.editing { |
| 35 text run at (415,2) width 30: "or " | 35 border-bottom: none; |
| 36 RenderInline {A} at (0,0) size 285x40 | 36 padding: 0; |
| 37 RenderText {#text} at (445,2) size 285x40 | 37 } |
| 38 text run at (445,2) width 80: "view the" | 38 |
| 39 text run at (240,24) width 60: "source" | 39 /* |
| 40 RenderText {#text} at (300,24) size 10x18 | 40 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 41 text run at (300,24) width 10: "." | 41 ShadowRoot because it crosses the shadow boundary. |
| 42 RenderBlock {P} at (0,136) size 550x22 | 42 */ |
| 43 RenderText {#text} at (195,2) size 80x18 | 43 .todo-item.completed [is=editable-label] { |
| 44 text run at (195,2) width 80: "Part of " | 44 color: #a9a9a9; |
| 45 RenderInline {A} at (0,0) size 70x18 | 45 text-decoration: line-through; |
| 46 RenderText {#text} at (275,2) size 70x18 | 46 } |
| 47 text run at (275,2) width 70: "TodoMVC" | 47 |
| 48 RenderText {#text} at (345,2) size 10x18 | 48 .todo-item .toggle { |
| 49 text run at (345,2) width 10: "." | 49 text-align: center; |
| 50 RenderBlock (anonymous) at (0,511) size 550x0 | 50 width: 40px; |
| 51 RenderInline {SPAN} at (0,0) size 0x0 | 51 /* auto, since non-WebKit browsers don't support input styling */ |
| 52 RenderText {#text} at (0,0) size 0x0 | 52 height: auto; |
| 53 RenderText {#text} at (0,0) size 0x0 | 53 position: absolute; |
| 54 RenderText {#text} at (0,0) size 0x0 | 54 top: 0; |
| 55 layer at (118,130) size 550x272 | 55 bottom: 0; |
| 56 RenderBlock (relative positioned) {SECTION} at (0,0) size 550x272 [bgcolor=#FF
FFFFE6] [border: (1px solid #CCCCCC)] | 56 margin: auto 0; |
| 57 RenderBlock {HEADER} at (1,1) size 548x69 | 57 border: none; /* Mobile Safari */ |
| 58 RenderBlock {FORM} at (0,15) size 548x54 | 58 -webkit-appearance: none; |
| 59 RenderText {#text} at (0,0) size 0x0 | 59 /*-moz-appearance: none;*/ |
| 60 layer at (159,131) size 4x270 | 60 -ms-appearance: none; |
| 61 RenderBlock (positioned) at (41,1) size 4x270 [border: none (1px solid #F5D6D6
) none (1px solid #F5D6D6)] | 61 -o-appearance: none; |
| 62 RenderText at (0,0) size 0x0 | 62 appearance: none; |
| 63 layer at (119,24) size 548x22 | 63 } |
| 64 RenderBlock (positioned) {H1} at (1,-106) size 548x23 [color=#FFFFFF4C] | 64 |
| 65 RenderText {#text} at (249,2) size 50x18 | 65 .todo-item .toggle:after { |
| 66 text run at (249,2) width 50: "todos" | 66 content: '✔'; |
| 67 layer at (119,409) size 548x23 layerType: background only | 67 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 68 layer at (119,301) size 548x100 | 68 font-size: 20px; |
| 69 RenderBlock (positioned) zI: -1 at (0,-108) size 548x100 | 69 color: #d9d9d9; |
| 70 RenderText zI: -1 at (0,0) size 0x0 | 70 text-shadow: 0 -1px 0 #bfbfbf; |
| 71 layer at (119,409) size 548x23 layerType: foreground only | 71 } |
| 72 RenderBlock (positioned) zI: 1 {FOOTER} at (1,279) size 548x23 [color=#777777] | 72 |
| 73 RenderBlock (floating) {SPAN} at (15,0) size 10x23 | 73 .todo-item .toggle:checked:after { |
| 74 RenderInline {STRONG} at (0,0) size 10x18 | 74 color: #85ada7; |
| 75 RenderText {#text} at (0,3) size 10x18 | 75 text-shadow: 0 1px 0 #669991; |
| 76 text run at (0,3) width 10: "2" | 76 bottom: 1px; |
| 77 layer at (119,409) size 548x23 | 77 position: relative; |
| 78 RenderBlock (positioned) {UL} at (0,0) size 548x23 | 78 } |
| 79 RenderInline {LI} at (0,0) size 44x18 | 79 .todo-item .destroy { |
| 80 RenderText {#text} at (0,0) size 0x0 | 80 display: none; |
| 81 RenderInline {A} at (0,0) size 30x18 [color=#83756F] | 81 position: absolute; |
| 82 RenderText {#text} at (170,3) size 30x18 | 82 top: 0; |
| 83 text run at (170,3) width 30: "All" | 83 right: 10px; |
| 84 RenderText {#text} at (202,2) size 10x18 | 84 bottom: 0; |
| 85 text run at (202,2) width 10: " " | 85 width: 40px; |
| 86 RenderText {#text} at (0,0) size 0x0 | 86 height: 40px; |
| 87 RenderInline {LI} at (0,0) size 74x18 | 87 margin: auto 0; |
| 88 RenderText {#text} at (0,0) size 0x0 | 88 font-size: 22px; |
| 89 RenderInline {A} at (0,0) size 60x18 [color=#83756F] | 89 color: #a88a8a; |
| 90 RenderText {#text} at (214,2) size 60x18 | 90 -webkit-transition: all 0.2s; |
| 91 text run at (214,2) width 60: "Active" | 91 -moz-transition: all 0.2s; |
| 92 RenderText {#text} at (276,2) size 10x18 | 92 -ms-transition: all 0.2s; |
| 93 text run at (276,2) width 10: " " | 93 -o-transition: all 0.2s; |
| 94 RenderText {#text} at (0,0) size 0x0 | 94 transition: all 0.2s; |
| 95 RenderInline {LI} at (0,0) size 94x18 | 95 } |
| 96 RenderText {#text} at (0,0) size 0x0 | 96 |
| 97 RenderInline {A} at (0,0) size 90x18 [color=#83756F] | 97 .todo-item .destroy:hover { |
| 98 RenderText {#text} at (288,2) size 90x18 | 98 text-shadow: 0 0 1px #000, |
| 99 text run at (288,2) width 90: "Completed" | 99 0 0 10px rgba(199, 107, 107, 0.8); |
| 100 RenderText {#text} at (0,0) size 0x0 | 100 -webkit-transform: scale(1.3); |
| 101 RenderText {#text} at (0,0) size 0x0 | 101 -moz-transform: scale(1.3); |
| 102 layer at (442,409) size 210x20 | 102 -ms-transform: scale(1.3); |
| 103 RenderButton {BUTTON} at (323,0) size 210x20 [bgcolor=#00000019] | 103 -o-transform: scale(1.3); |
| 104 RenderBlock (anonymous) at (10,0) size 190x20 | 104 transform: scale(1.3); |
| 105 RenderText {#text} at (0,1) size 170x18 | 105 } |
| 106 text run at (0,1) width 170: "Clear completed (" | 106 |
| 107 RenderText {#text} at (170,1) size 10x18 | 107 .todo-item .destroy:after { |
| 108 text run at (170,1) width 10: "2" | 108 content: '✖'; |
| 109 RenderText {#text} at (180,1) size 10x18 | 109 } |
| 110 text run at (180,1) width 10: ")" | 110 |
| 111 layer at (119,131) size 548x16 | 111 .todo-item:hover .destroy { |
| 112 RenderBlock (positioned) zI: 2 at (1,1) size 548x16 [border: none (1px solid #
6C615C) none] | 112 display: block; |
| 113 RenderText zI: 2 at (0,0) size 0x0 | 113 } |
| 114 layer at (119,146) size 548x54 | 114 |
| 115 RenderTextControl zI: 2 {INPUT} at (0,0) size 548x54 [bgcolor=#00000005] | 115 .todo-item.editing .destroy, |
| 116 layer at (179,162) size 472x22 | 116 .todo-item.editing .toggle { |
| 117 RenderBlock {DIV} at (60,16) size 472x22 [color=#A9A9A9] | 117 display: none; |
| 118 RenderText {#text} at (0,1) size 220x19 | 118 } |
| 119 text run at (0,1) width 220: "What needs to be done?" | 119 |
| 120 layer at (179,162) size 472x22 | 120 .todo-item.editing:last-child { |
| 121 RenderBlock {DIV} at (60,16) size 472x22 | 121 margin-bottom: -1px; |
| 122 layer at (119,200) size 548x201 | 122 } |
| 123 RenderBlock (relative positioned) zI: 2 {SECTION} at (1,70) size 548x201 [bord
er: (1px dotted #ADADAD) none] | 123 |
| 124 RenderBlock {UL} at (0,1) size 548x200 | 124 /* |
| 125 RenderListItem {LI} at (0,0) size 548x50 | 125 Hack to remove background from Mobile Safari. |
| 126 RenderListItem {LI} at (0,50) size 548x50 | 126 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 127 RenderListItem {LI} at (0,100) size 548x50 | 127 */ |
| 128 RenderListItem {LI} at (0,150) size 548x50 | 128 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 129 layer at (108,148) size 65x41 | 129 .todo-item .toggle { |
| 130 RenderBlock (positioned) {INPUT} at (-11,-52) size 65x41 [color=#000000] | 130 background: none; |
| 131 RenderInline (generated) at (0,0) size 67x38 [color=#D9D9D9] | 131 } |
| 132 RenderText at (25,0) size 17x31 | 132 #todo-item .toggle { |
| 133 text run at (25,0) width 17: "\x{BB}" | 133 height: 40px; |
| 134 layer at (119,201) size 548x50 | 134 } |
| 135 RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1p
x dotted #CCCCCC) none] | 135 } |
| 136 RenderBlock {DIV} at (0,0) size 548x49 | 136 </style> |
| 137 RenderBlock {LABEL} at (60,15) size 150x19 | 137 <div class="todo-item"> |
| 138 RenderText {#text} at (0,0) size 150x18 | 138 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 139 text run at (0,0) width 150: "one (unchecked)" | 139 <editable-label id="label" value="{{todo.task}}"></editable-label> |
| 140 RenderText {#text} at (0,0) size 0x0 | 140 <button class="destroy" on-click="removeTodo"></button> |
| 141 RenderText {#text} at (0,0) size 0x0 | 141 </div> |
| 142 RenderText {#text} at (0,0) size 0x0 | 142 </template> |
| 143 layer at (119,201) size 40x49 | 143 |
| 144 RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000] | 144 </polymer-element> |
| 145 RenderInline (generated) at (0,0) size 18x22 [color=#D9D9D9] | 145 <polymer-element name="todo-app"> |
| 146 RenderText at (11,10) size 18x22 | 146 <template> |
| 147 text run at (11,10) width 18: "\x{2714}" | 147 <section id="todoapp"> |
| 148 layer at (119,251) size 548x50 | 148 <header id="header"> |
| 149 RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1p
x dotted #CCCCCC) none] | 149 <h1 class="title">todos</h1> |
| 150 RenderBlock {DIV} at (0,0) size 548x49 | 150 <form on-submit="addTodo"> |
| 151 RenderBlock {LABEL} at (60,15) size 150x19 | 151 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 152 RenderText {#text} at (0,0) size 150x18 | 152 </form> |
| 153 text run at (0,0) width 150: "two (unchecked)" | 153 </header> |
| 154 RenderText {#text} at (0,0) size 0x0 | 154 <section id="main"> |
| 155 RenderText {#text} at (0,0) size 0x0 | 155 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| 156 RenderText {#text} at (0,0) size 0x0 | 156 <label for="toggle-all"></label> |
| 157 layer at (119,251) size 40x49 | 157 <ul id="todo-list"> |
| 158 RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000] | 158 <template repeat="{{app.visibleTodos}}"> |
| 159 RenderInline (generated) at (0,0) size 18x22 [color=#D9D9D9] | 159 <li is="todo-row" todo="{{}}"></li> |
| 160 RenderText at (11,10) size 18x22 | 160 </template> |
| 161 text run at (11,10) width 18: "\x{2714}" | 161 </ul> |
| 162 layer at (119,301) size 548x50 | 162 </section> |
| 163 RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1p
x dotted #CCCCCC) none] | 163 <template bind="" if="{{app.todos.length > 0}}"> |
| 164 RenderBlock {DIV} at (0,0) size 548x49 | 164 <footer id="footer"> |
| 165 RenderBlock {LABEL} at (60,15) size 150x19 | 165 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 166 RenderText {#text} at (0,0) size 150x18 | 166 <ul is="router-options" id="filters"> |
| 167 text run at (0,0) width 150: "three (checked)" | 167 <li> <a href="#/">All</a> </li> |
| 168 RenderText {#text} at (0,0) size 0x0 | 168 <li> <a href="#/active">Active</a> </li> |
| 169 RenderText {#text} at (0,0) size 0x0 | 169 <li> <a href="#/completed">Completed</a> </li> |
| 170 RenderText {#text} at (0,0) size 0x0 | 170 </ul> |
| 171 layer at (119,301) size 40x49 | 171 <template bind="" if="{{app.hasCompleteTodos}}"> |
| 172 RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000] | 172 <button id="clear-completed" on-click="clear"> |
| 173 layer at (119,300) size 18x22 | 173 Clear completed ({{app.doneCount}}) |
| 174 RenderInline (relative positioned) at (0,0) size 18x22 [color=#85ADA7] | 174 </button> |
| 175 RenderText at (11,10) size 18x22 | 175 </template> |
| 176 text run at (11,10) width 18: "\x{2714}" | 176 </footer> |
| 177 layer at (119,351) size 548x50 | 177 </template> |
| 178 RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1p
x dotted #CCCCCC) none] | 178 </section> |
| 179 RenderBlock {DIV} at (0,0) size 548x49 | 179 <footer id="info"> |
| 180 RenderBlock {LABEL} at (60,15) size 140x19 | 180 <p>Double-click to edit a todo.</p> |
| 181 RenderText {#text} at (0,0) size 140x18 | 181 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> |
| 182 text run at (0,0) width 140: "four (checked)" | 182 <p> |
| 183 RenderText {#text} at (0,0) size 0x0 | 183 Learn more about |
| 184 RenderText {#text} at (0,0) size 0x0 | 184 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 185 RenderText {#text} at (0,0) size 0x0 | 185 or |
| 186 layer at (119,351) size 40x49 | 186 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 187 RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000] | 187 </p> |
| 188 layer at (119,350) size 18x22 | 188 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 189 RenderInline (relative positioned) at (0,0) size 18x22 [color=#85ADA7] | 189 </footer> |
| 190 RenderText at (11,10) size 18x22 | 190 </template> |
| 191 text run at (11,10) width 18: "\x{2714}" | 191 |
| 192 caret: position 0 of child 0 {DIV} of {#document-fragment} of child 1 {INPUT} of
child 3 {FORM} of child 1 {HEADER} of child 1 {SECTION} of child 1 {SPAN} of bo
dy | 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 <li is="todo-row" todo="{{}}"><shadow-root> |
| 225 <style scoped=""> |
| 226 .todo-item { |
| 227 position: relative; |
| 228 font-size: 24px; |
| 229 border-bottom: 1px dotted #ccc; |
| 230 } |
| 231 |
| 232 .todo-item.editing { |
| 233 border-bottom: none; |
| 234 padding: 0; |
| 235 } |
| 236 |
| 237 /* |
| 238 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 239 ShadowRoot because it crosses the shadow boundary. |
| 240 */ |
| 241 .todo-item.completed [is=editable-label] { |
| 242 color: #a9a9a9; |
| 243 text-decoration: line-through; |
| 244 } |
| 245 |
| 246 .todo-item .toggle { |
| 247 text-align: center; |
| 248 width: 40px; |
| 249 /* auto, since non-WebKit browsers don't support input styling */ |
| 250 height: auto; |
| 251 position: absolute; |
| 252 top: 0; |
| 253 bottom: 0; |
| 254 margin: auto 0; |
| 255 border: none; /* Mobile Safari */ |
| 256 -webkit-appearance: none; |
| 257 /*-moz-appearance: none;*/ |
| 258 -ms-appearance: none; |
| 259 -o-appearance: none; |
| 260 appearance: none; |
| 261 } |
| 262 |
| 263 .todo-item .toggle:after { |
| 264 content: '✔'; |
| 265 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 266 font-size: 20px; |
| 267 color: #d9d9d9; |
| 268 text-shadow: 0 -1px 0 #bfbfbf; |
| 269 } |
| 270 |
| 271 .todo-item .toggle:checked:after { |
| 272 color: #85ada7; |
| 273 text-shadow: 0 1px 0 #669991; |
| 274 bottom: 1px; |
| 275 position: relative; |
| 276 } |
| 277 .todo-item .destroy { |
| 278 display: none; |
| 279 position: absolute; |
| 280 top: 0; |
| 281 right: 10px; |
| 282 bottom: 0; |
| 283 width: 40px; |
| 284 height: 40px; |
| 285 margin: auto 0; |
| 286 font-size: 22px; |
| 287 color: #a88a8a; |
| 288 -webkit-transition: all 0.2s; |
| 289 -moz-transition: all 0.2s; |
| 290 -ms-transition: all 0.2s; |
| 291 -o-transition: all 0.2s; |
| 292 transition: all 0.2s; |
| 293 } |
| 294 |
| 295 .todo-item .destroy:hover { |
| 296 text-shadow: 0 0 1px #000, |
| 297 0 0 10px rgba(199, 107, 107, 0.8); |
| 298 -webkit-transform: scale(1.3); |
| 299 -moz-transform: scale(1.3); |
| 300 -ms-transform: scale(1.3); |
| 301 -o-transform: scale(1.3); |
| 302 transform: scale(1.3); |
| 303 } |
| 304 |
| 305 .todo-item .destroy:after { |
| 306 content: '✖'; |
| 307 } |
| 308 |
| 309 .todo-item:hover .destroy { |
| 310 display: block; |
| 311 } |
| 312 |
| 313 .todo-item.editing .destroy, |
| 314 .todo-item.editing .toggle { |
| 315 display: none; |
| 316 } |
| 317 |
| 318 .todo-item.editing:last-child { |
| 319 margin-bottom: -1px; |
| 320 } |
| 321 |
| 322 /* |
| 323 Hack to remove background from Mobile Safari. |
| 324 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 325 */ |
| 326 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 327 .todo-item .toggle { |
| 328 background: none; |
| 329 } |
| 330 #todo-item .toggle { |
| 331 height: 40px; |
| 332 } |
| 333 } |
| 334 </style> |
| 335 <div class="todo-item"> |
| 336 <input class="toggle" type="checkbox"> |
| 337 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 338 <template bind="" if="{{!editing}}"></template> |
| 339 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
| 340 |
| 341 <template bind="" if="{{editing}}"></template> |
| 342 </shadow-root></editable-label> |
| 343 <button class="destroy" on-click="removeTodo"></button> |
| 344 </div> |
| 345 </shadow-root></li> |
| 346 |
| 347 <li is="todo-row" todo="{{}}"><shadow-root> |
| 348 <style scoped=""> |
| 349 .todo-item { |
| 350 position: relative; |
| 351 font-size: 24px; |
| 352 border-bottom: 1px dotted #ccc; |
| 353 } |
| 354 |
| 355 .todo-item.editing { |
| 356 border-bottom: none; |
| 357 padding: 0; |
| 358 } |
| 359 |
| 360 /* |
| 361 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 362 ShadowRoot because it crosses the shadow boundary. |
| 363 */ |
| 364 .todo-item.completed [is=editable-label] { |
| 365 color: #a9a9a9; |
| 366 text-decoration: line-through; |
| 367 } |
| 368 |
| 369 .todo-item .toggle { |
| 370 text-align: center; |
| 371 width: 40px; |
| 372 /* auto, since non-WebKit browsers don't support input styling */ |
| 373 height: auto; |
| 374 position: absolute; |
| 375 top: 0; |
| 376 bottom: 0; |
| 377 margin: auto 0; |
| 378 border: none; /* Mobile Safari */ |
| 379 -webkit-appearance: none; |
| 380 /*-moz-appearance: none;*/ |
| 381 -ms-appearance: none; |
| 382 -o-appearance: none; |
| 383 appearance: none; |
| 384 } |
| 385 |
| 386 .todo-item .toggle:after { |
| 387 content: '✔'; |
| 388 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 389 font-size: 20px; |
| 390 color: #d9d9d9; |
| 391 text-shadow: 0 -1px 0 #bfbfbf; |
| 392 } |
| 393 |
| 394 .todo-item .toggle:checked:after { |
| 395 color: #85ada7; |
| 396 text-shadow: 0 1px 0 #669991; |
| 397 bottom: 1px; |
| 398 position: relative; |
| 399 } |
| 400 .todo-item .destroy { |
| 401 display: none; |
| 402 position: absolute; |
| 403 top: 0; |
| 404 right: 10px; |
| 405 bottom: 0; |
| 406 width: 40px; |
| 407 height: 40px; |
| 408 margin: auto 0; |
| 409 font-size: 22px; |
| 410 color: #a88a8a; |
| 411 -webkit-transition: all 0.2s; |
| 412 -moz-transition: all 0.2s; |
| 413 -ms-transition: all 0.2s; |
| 414 -o-transition: all 0.2s; |
| 415 transition: all 0.2s; |
| 416 } |
| 417 |
| 418 .todo-item .destroy:hover { |
| 419 text-shadow: 0 0 1px #000, |
| 420 0 0 10px rgba(199, 107, 107, 0.8); |
| 421 -webkit-transform: scale(1.3); |
| 422 -moz-transform: scale(1.3); |
| 423 -ms-transform: scale(1.3); |
| 424 -o-transform: scale(1.3); |
| 425 transform: scale(1.3); |
| 426 } |
| 427 |
| 428 .todo-item .destroy:after { |
| 429 content: '✖'; |
| 430 } |
| 431 |
| 432 .todo-item:hover .destroy { |
| 433 display: block; |
| 434 } |
| 435 |
| 436 .todo-item.editing .destroy, |
| 437 .todo-item.editing .toggle { |
| 438 display: none; |
| 439 } |
| 440 |
| 441 .todo-item.editing:last-child { |
| 442 margin-bottom: -1px; |
| 443 } |
| 444 |
| 445 /* |
| 446 Hack to remove background from Mobile Safari. |
| 447 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 448 */ |
| 449 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 450 .todo-item .toggle { |
| 451 background: none; |
| 452 } |
| 453 #todo-item .toggle { |
| 454 height: 40px; |
| 455 } |
| 456 } |
| 457 </style> |
| 458 <div class="todo-item"> |
| 459 <input class="toggle" type="checkbox"> |
| 460 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 461 <template bind="" if="{{!editing}}"></template> |
| 462 <label class="edit-label" on-double-click="edit">two (unchecked)</label> |
| 463 |
| 464 <template bind="" if="{{editing}}"></template> |
| 465 </shadow-root></editable-label> |
| 466 <button class="destroy" on-click="removeTodo"></button> |
| 467 </div> |
| 468 </shadow-root></li> |
| 469 |
| 470 <li is="todo-row" todo="{{}}"><shadow-root> |
| 471 <style scoped=""> |
| 472 .todo-item { |
| 473 position: relative; |
| 474 font-size: 24px; |
| 475 border-bottom: 1px dotted #ccc; |
| 476 } |
| 477 |
| 478 .todo-item.editing { |
| 479 border-bottom: none; |
| 480 padding: 0; |
| 481 } |
| 482 |
| 483 /* |
| 484 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 485 ShadowRoot because it crosses the shadow boundary. |
| 486 */ |
| 487 .todo-item.completed [is=editable-label] { |
| 488 color: #a9a9a9; |
| 489 text-decoration: line-through; |
| 490 } |
| 491 |
| 492 .todo-item .toggle { |
| 493 text-align: center; |
| 494 width: 40px; |
| 495 /* auto, since non-WebKit browsers don't support input styling */ |
| 496 height: auto; |
| 497 position: absolute; |
| 498 top: 0; |
| 499 bottom: 0; |
| 500 margin: auto 0; |
| 501 border: none; /* Mobile Safari */ |
| 502 -webkit-appearance: none; |
| 503 /*-moz-appearance: none;*/ |
| 504 -ms-appearance: none; |
| 505 -o-appearance: none; |
| 506 appearance: none; |
| 507 } |
| 508 |
| 509 .todo-item .toggle:after { |
| 510 content: '✔'; |
| 511 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 512 font-size: 20px; |
| 513 color: #d9d9d9; |
| 514 text-shadow: 0 -1px 0 #bfbfbf; |
| 515 } |
| 516 |
| 517 .todo-item .toggle:checked:after { |
| 518 color: #85ada7; |
| 519 text-shadow: 0 1px 0 #669991; |
| 520 bottom: 1px; |
| 521 position: relative; |
| 522 } |
| 523 .todo-item .destroy { |
| 524 display: none; |
| 525 position: absolute; |
| 526 top: 0; |
| 527 right: 10px; |
| 528 bottom: 0; |
| 529 width: 40px; |
| 530 height: 40px; |
| 531 margin: auto 0; |
| 532 font-size: 22px; |
| 533 color: #a88a8a; |
| 534 -webkit-transition: all 0.2s; |
| 535 -moz-transition: all 0.2s; |
| 536 -ms-transition: all 0.2s; |
| 537 -o-transition: all 0.2s; |
| 538 transition: all 0.2s; |
| 539 } |
| 540 |
| 541 .todo-item .destroy:hover { |
| 542 text-shadow: 0 0 1px #000, |
| 543 0 0 10px rgba(199, 107, 107, 0.8); |
| 544 -webkit-transform: scale(1.3); |
| 545 -moz-transform: scale(1.3); |
| 546 -ms-transform: scale(1.3); |
| 547 -o-transform: scale(1.3); |
| 548 transform: scale(1.3); |
| 549 } |
| 550 |
| 551 .todo-item .destroy:after { |
| 552 content: '✖'; |
| 553 } |
| 554 |
| 555 .todo-item:hover .destroy { |
| 556 display: block; |
| 557 } |
| 558 |
| 559 .todo-item.editing .destroy, |
| 560 .todo-item.editing .toggle { |
| 561 display: none; |
| 562 } |
| 563 |
| 564 .todo-item.editing:last-child { |
| 565 margin-bottom: -1px; |
| 566 } |
| 567 |
| 568 /* |
| 569 Hack to remove background from Mobile Safari. |
| 570 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 571 */ |
| 572 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 573 .todo-item .toggle { |
| 574 background: none; |
| 575 } |
| 576 #todo-item .toggle { |
| 577 height: 40px; |
| 578 } |
| 579 } |
| 580 </style> |
| 581 <div class="todo-item completed"> |
| 582 <input class="toggle" type="checkbox"> |
| 583 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 584 <template bind="" if="{{!editing}}"></template> |
| 585 <label class="edit-label" on-double-click="edit">three (checked)</label> |
| 586 |
| 587 <template bind="" if="{{editing}}"></template> |
| 588 </shadow-root></editable-label> |
| 589 <button class="destroy" on-click="removeTodo"></button> |
| 590 </div> |
| 591 </shadow-root></li> |
| 592 |
| 593 <li is="todo-row" todo="{{}}"><shadow-root> |
| 594 <style scoped=""> |
| 595 .todo-item { |
| 596 position: relative; |
| 597 font-size: 24px; |
| 598 border-bottom: 1px dotted #ccc; |
| 599 } |
| 600 |
| 601 .todo-item.editing { |
| 602 border-bottom: none; |
| 603 padding: 0; |
| 604 } |
| 605 |
| 606 /* |
| 607 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 608 ShadowRoot because it crosses the shadow boundary. |
| 609 */ |
| 610 .todo-item.completed [is=editable-label] { |
| 611 color: #a9a9a9; |
| 612 text-decoration: line-through; |
| 613 } |
| 614 |
| 615 .todo-item .toggle { |
| 616 text-align: center; |
| 617 width: 40px; |
| 618 /* auto, since non-WebKit browsers don't support input styling */ |
| 619 height: auto; |
| 620 position: absolute; |
| 621 top: 0; |
| 622 bottom: 0; |
| 623 margin: auto 0; |
| 624 border: none; /* Mobile Safari */ |
| 625 -webkit-appearance: none; |
| 626 /*-moz-appearance: none;*/ |
| 627 -ms-appearance: none; |
| 628 -o-appearance: none; |
| 629 appearance: none; |
| 630 } |
| 631 |
| 632 .todo-item .toggle:after { |
| 633 content: '✔'; |
| 634 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 635 font-size: 20px; |
| 636 color: #d9d9d9; |
| 637 text-shadow: 0 -1px 0 #bfbfbf; |
| 638 } |
| 639 |
| 640 .todo-item .toggle:checked:after { |
| 641 color: #85ada7; |
| 642 text-shadow: 0 1px 0 #669991; |
| 643 bottom: 1px; |
| 644 position: relative; |
| 645 } |
| 646 .todo-item .destroy { |
| 647 display: none; |
| 648 position: absolute; |
| 649 top: 0; |
| 650 right: 10px; |
| 651 bottom: 0; |
| 652 width: 40px; |
| 653 height: 40px; |
| 654 margin: auto 0; |
| 655 font-size: 22px; |
| 656 color: #a88a8a; |
| 657 -webkit-transition: all 0.2s; |
| 658 -moz-transition: all 0.2s; |
| 659 -ms-transition: all 0.2s; |
| 660 -o-transition: all 0.2s; |
| 661 transition: all 0.2s; |
| 662 } |
| 663 |
| 664 .todo-item .destroy:hover { |
| 665 text-shadow: 0 0 1px #000, |
| 666 0 0 10px rgba(199, 107, 107, 0.8); |
| 667 -webkit-transform: scale(1.3); |
| 668 -moz-transform: scale(1.3); |
| 669 -ms-transform: scale(1.3); |
| 670 -o-transform: scale(1.3); |
| 671 transform: scale(1.3); |
| 672 } |
| 673 |
| 674 .todo-item .destroy:after { |
| 675 content: '✖'; |
| 676 } |
| 677 |
| 678 .todo-item:hover .destroy { |
| 679 display: block; |
| 680 } |
| 681 |
| 682 .todo-item.editing .destroy, |
| 683 .todo-item.editing .toggle { |
| 684 display: none; |
| 685 } |
| 686 |
| 687 .todo-item.editing:last-child { |
| 688 margin-bottom: -1px; |
| 689 } |
| 690 |
| 691 /* |
| 692 Hack to remove background from Mobile Safari. |
| 693 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 694 */ |
| 695 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 696 .todo-item .toggle { |
| 697 background: none; |
| 698 } |
| 699 #todo-item .toggle { |
| 700 height: 40px; |
| 701 } |
| 702 } |
| 703 </style> |
| 704 <div class="todo-item completed"> |
| 705 <input class="toggle" type="checkbox"> |
| 706 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 707 <template bind="" if="{{!editing}}"></template> |
| 708 <label class="edit-label" on-double-click="edit">four (checked)</label> |
| 709 |
| 710 <template bind="" if="{{editing}}"></template> |
| 711 </shadow-root></editable-label> |
| 712 <button class="destroy" on-click="removeTodo"></button> |
| 713 </div> |
| 714 </shadow-root></li> |
| 715 |
| 716 </ul> |
| 717 </section> |
| 718 <template bind="" if="{{app.todos.length > 0}}"></template> |
| 719 <footer id="footer"> |
| 720 <span id="todo-count"><strong>2</strong></span> |
| 721 <ul is="router-options" id="filters"><shadow-root><content></content></s
hadow-root> |
| 722 <li> <a href="#/" class="selected">All</a> </li> |
| 723 <li> <a href="#/active" class="">Active</a> </li> |
| 724 <li> <a href="#/completed" class="">Completed</a> </li> |
| 725 </ul> |
| 726 <template bind="" if="{{app.hasCompleteTodos}}"></template> |
| 727 <button id="clear-completed" on-click="clear"> |
| 728 Clear completed (2) |
| 729 </button> |
| 730 |
| 731 </footer> |
| 732 |
| 733 </section> |
| 734 <footer id="info"> |
| 735 <p>Double-click to edit a todo.</p> |
| 736 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> |
| 737 <p> |
| 738 Learn more about |
| 739 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 740 or |
| 741 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 742 </p> |
| 743 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 744 </footer> |
| 745 </shadow-root></todo-app> |
| 746 |
| 747 |
| 748 |
| 749 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
| 750 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart">
</script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23224003:
move polymer.dart into dart svn (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart