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