Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(444)

Side by Side Diff: samples/third_party/todomvc/test/expected/todomvc_mainpage2_test.html.txt

Issue 23224003: move polymer.dart into dart svn (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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 800x491 4 This test runs the TodoMVC app and evaluates that it renders correctly if a
5 RenderBlock {HTML} at (0,0) size 800x491 5 single item is present in the todo list.
6 RenderBody {BODY} at (125,130) size 550x345 [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 550x122 10 <link rel="stylesheet" href="../../../web/base.css">
11 RenderBlock (anonymous) at (0,162) 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,187) 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,361) 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 (125,130) size 550x122 55 bottom: 0;
56 RenderBlock (relative positioned) {SECTION} at (0,0) size 550x122 [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 (166,131) size 4x120 60 -ms-appearance: none;
61 RenderBlock (positioned) at (41,1) size 4x120 [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 (126,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 (126,259) size 548x23 layerType: background only 67 line-height: 43px; /* 40 + a couple of pixels visual adjustment */
68 layer at (126,151) 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 (126,259) size 548x23 layerType: foreground only 71 }
72 RenderBlock (positioned) zI: 1 {FOOTER} at (1,129) 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: "1" 76 bottom: 1px;
77 layer at (126,259) 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 (126,131) size 548x16 102 -ms-transform: scale(1.3);
103 RenderBlock (positioned) zI: 2 at (1,1) size 548x16 [border: none (1px solid # 6C615C) none] 103 -o-transform: scale(1.3);
104 RenderText zI: 2 at (0,0) size 0x0 104 transform: scale(1.3);
105 layer at (126,146) size 548x54 105 }
106 RenderTextControl zI: 2 {INPUT} at (0,0) size 548x54 [bgcolor=#00000005] 106
107 layer at (186,162) size 472x22 107 .todo-item .destroy:after {
108 RenderBlock {DIV} at (60,16) size 472x22 [color=#A9A9A9] 108 content: '✖';
109 RenderText {#text} at (0,1) size 220x19 109 }
110 text run at (0,1) width 220: "What needs to be done?" 110
111 layer at (186,162) size 472x22 111 .todo-item:hover .destroy {
112 RenderBlock {DIV} at (60,16) size 472x22 112 display: block;
113 layer at (126,200) size 548x51 113 }
114 RenderBlock (relative positioned) zI: 2 {SECTION} at (1,70) size 548x51 [borde r: (1px dotted #ADADAD) none] 114
115 RenderBlock {UL} at (0,1) size 548x50 115 .todo-item.editing .destroy,
116 RenderListItem {LI} at (0,0) size 548x50 116 .todo-item.editing .toggle {
117 layer at (115,148) size 65x41 117 display: none;
118 RenderBlock (positioned) {INPUT} at (-11,-52) size 65x41 [color=#000000] 118 }
119 RenderInline (generated) at (0,0) size 67x38 [color=#D9D9D9] 119
120 RenderText at (25,0) size 17x31 120 .todo-item.editing:last-child {
121 text run at (25,0) width 17: "\x{BB}" 121 margin-bottom: -1px;
122 layer at (126,201) size 548x50 122 }
123 RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1p x dotted #CCCCCC) none] 123
124 RenderBlock {DIV} at (0,0) size 548x49 124 /*
125 RenderBlock {LABEL} at (60,15) size 40x19 125 Hack to remove background from Mobile Safari.
126 RenderText {#text} at (0,0) size 40x18 126 Can't use it globally since it destroys checkboxes in Firefox and Opera
127 text run at (0,0) width 40: "hola" 127 */
128 RenderText {#text} at (0,0) size 0x0 128 @media screen and (-webkit-min-device-pixel-ratio:0) {
129 RenderText {#text} at (0,0) size 0x0 129 .todo-item .toggle {
130 RenderText {#text} at (0,0) size 0x0 130 background: none;
131 layer at (126,201) size 40x49 131 }
132 RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000] 132 #todo-item .toggle {
133 RenderInline (generated) at (0,0) size 18x22 [color=#D9D9D9] 133 height: 40px;
134 RenderText at (11,10) size 18x22 134 }
135 text run at (11,10) width 18: "\x{2714}" 135 }
136 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 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 &gt; 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 <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">hola</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 </ul>
348 </section>
349 <template bind="" if="{{app.todos.length &gt; 0}}"></template>
350 <footer id="footer">
351 <span id="todo-count"><strong>1</strong></span>
352 <ul is="router-options" id="filters"><shadow-root><content></content></s hadow-root>
353 <li> <a href="#/" class="selected">All</a> </li>
354 <li> <a href="#/active" class="">Active</a> </li>
355 <li> <a href="#/completed" class="">Completed</a> </li>
356 </ul>
357 <template bind="" if="{{app.hasCompleteTodos}}"></template>
358 </footer>
359
360 </section>
361 <footer id="info">
362 <p>Double-click to edit a todo.</p>
363 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p>
364 <p>
365 Learn more about
366 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We b Components</a>
367 or
368 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc"> view the source</a>.
369 </p>
370 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
371 </footer>
372 </shadow-root></todo-app>
373
374
375
376 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s cript>
377 <script type="application/dart" src="todomvc_mainpage2_test.html_bootstrap.dart" ></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698