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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: example/todomvc/test/expected/todomvc_mainpage2_test.html.txt

Issue 22962005: Merge pull request #581 from kevmoo/polymer (Closed) Base URL: https://github.com/dart-lang/web-ui.git@polymer
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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « example/todomvc/test/expected/todomvc_listorder_test.html.txt ('k') | example/todomvc/test/expected/todomvc_mainpage_test.html.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: example/todomvc/test/expected/todomvc_mainpage2_test.html.txt
diff --git a/example/todomvc/test/expected/todomvc_mainpage2_test.html.txt b/example/todomvc/test/expected/todomvc_mainpage2_test.html.txt
index 20517e93fb96af1fbfca68da1aa4963d78c6d352..a60a257b74dde0123a1293b730dd033d21b42ef0 100644
--- a/example/todomvc/test/expected/todomvc_mainpage2_test.html.txt
+++ b/example/todomvc/test/expected/todomvc_mainpage2_test.html.txt
@@ -24,42 +24,52 @@ option[template] {
display: none;
}</style></head><body><polymer-element name="todo-row" extends="li" attributes="todo">
<template>
-
- <style>
+ <style scoped="">
.todo-item {
position: relative;
font-size: 24px;
border-bottom: 1px dotted #ccc;
}
+
.todo-item.editing {
border-bottom: none;
padding: 0;
}
+
+/*
+TODO(jmesserly): the ".todo-item label" selector does not work with real
+ShadowRoot because it crosses the shadow boundary.
+*/
.todo-item.completed [is=editable-label] {
color: #a9a9a9;
text-decoration: line-through;
}
+
.todo-item .toggle {
text-align: center;
width: 40px;
+ /* auto, since non-WebKit browsers don't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
- border: none;
+ border: none; /* Mobile Safari */
-webkit-appearance: none;
+ /*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
+
.todo-item .toggle:after {
- content: "✔";
- line-height: 43px;
+ content: '✔';
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
+
.todo-item .toggle:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
@@ -83,36 +93,50 @@ option[template] {
-o-transition: all 0.2s;
transition: all 0.2s;
}
+
.todo-item .destroy:hover {
- text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8);
+ text-shadow: 0 0 1px #000,
+ 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
+
.todo-item .destroy:after {
- content: "✖";
+ content: '✖';
}
+
.todo-item:hover .destroy {
display: block;
}
-.todo-item.editing .destroy, .todo-item.editing .toggle {
+
+.todo-item.editing .destroy,
+.todo-item.editing .toggle {
display: none;
}
+
.todo-item.editing:last-child {
margin-bottom: -1px;
-} @media screen AND (-webkit-min-device-pixel-ratio:0) {
-.todo-item .toggle {
- background: none;
-}
-#todo-item .toggle {
- height: 40px;
}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ .todo-item .toggle {
+ background: none;
+ }
+ #todo-item .toggle {
+ height: 40px;
+ }
}
-</style><div class="todo-item">
+ </style>
+ <div class="todo-item">
<input class="toggle" type="checkbox" checked="{{todo.done}}">
- <div is="editable-label" id="label" value="{{todo.task}}"></div>
+ <span is="editable-label" id="label" value="{{todo.task}}"></span>
<button class="destroy" on-click="removeTodo"></button>
</div>
</template>
@@ -136,7 +160,7 @@ option[template] {
</template>
</ul>
</section>
- <template bind="" if="{{app.hasTodos}}">
+ <template bind="" if="{{app.todos.length &gt; 0}}">
<footer id="footer">
<span id="todo-count"><strong>{{app.remaining}}</strong></span>
<ul is="router-options" id="filters">
@@ -170,9 +194,9 @@ option[template] {
<template><content></content></template>
</polymer-element>
-<polymer-element name="editable-label" extends="div" attributes="value">
+<polymer-element name="editable-label" attributes="value">
<template>
- <template bind="" if="{{notEditing}}">
+ <template bind="" if="{{!editing}}">
<label class="edit-label" on-double-click="edit">{{value}}</label>
</template>
<template bind="" if="{{editing}}">
@@ -196,46 +220,54 @@ option[template] {
<input id="toggle-all" type="checkbox">
<label for="toggle-all"></label>
<ul id="todo-list">
- <template repeat="{{app.visibleTodos}}">
- <li is="todo-row" todo="{{}}"></li>
- </template>
+ <template repeat="{{app.visibleTodos}}"></template>
<li is="todo-row" todo="{{}}"><shadow-root>
-
- <style>
+ <style scoped="">
.todo-item {
position: relative;
font-size: 24px;
border-bottom: 1px dotted #ccc;
}
+
.todo-item.editing {
border-bottom: none;
padding: 0;
}
+
+/*
+TODO(jmesserly): the ".todo-item label" selector does not work with real
+ShadowRoot because it crosses the shadow boundary.
+*/
.todo-item.completed [is=editable-label] {
color: #a9a9a9;
text-decoration: line-through;
}
+
.todo-item .toggle {
text-align: center;
width: 40px;
+ /* auto, since non-WebKit browsers don't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
- border: none;
+ border: none; /* Mobile Safari */
-webkit-appearance: none;
+ /*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
+
.todo-item .toggle:after {
- content: "✔";
- line-height: 43px;
+ content: '✔';
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
+
.todo-item .toggle:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
@@ -259,68 +291,62 @@ option[template] {
-o-transition: all 0.2s;
transition: all 0.2s;
}
+
.todo-item .destroy:hover {
- text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8);
+ text-shadow: 0 0 1px #000,
+ 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
+
.todo-item .destroy:after {
- content: "✖";
+ content: '✖';
}
+
.todo-item:hover .destroy {
display: block;
}
-.todo-item.editing .destroy, .todo-item.editing .toggle {
+
+.todo-item.editing .destroy,
+.todo-item.editing .toggle {
display: none;
}
+
.todo-item.editing:last-child {
margin-bottom: -1px;
-} @media screen AND (-webkit-min-device-pixel-ratio:0) {
-.todo-item .toggle {
- background: none;
-}
-#todo-item .toggle {
- height: 40px;
}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ .todo-item .toggle {
+ background: none;
+ }
+ #todo-item .toggle {
+ height: 40px;
+ }
}
-</style><div class="todo-item">
+ </style>
+ <div class="todo-item">
<input class="toggle" type="checkbox">
- <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
- <template bind="" if="{{notEditing}}">
- <label class="edit-label" on-double-click="edit">{{value}}</label>
- </template>
+ <span is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
+ <template bind="" if="{{!editing}}"></template>
<label class="edit-label" on-double-click="edit">hola</label>
- <template bind="" if="{{editing}}">
- <form on-submit="update">
- <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeCancel">
- </form>
- </template>
- </shadow-root></div>
+ <template bind="" if="{{editing}}"></template>
+ </shadow-root></span>
<button class="destroy" on-click="removeTodo"></button>
</div>
</shadow-root></li>
</ul>
</section>
- <template bind="" if="{{app.hasTodos}}">
- <footer id="footer">
- <span id="todo-count"><strong>{{app.remaining}}</strong></span>
- <ul is="router-options" id="filters">
- <li> <a href="#/">All</a> </li>
- <li> <a href="#/active">Active</a> </li>
- <li> <a href="#/completed">Completed</a> </li>
- </ul>
- <template bind="" if="{{app.hasCompleteTodos}}">
- <button id="clear-completed" on-click="clear">
- Clear completed ({{app.doneCount}})
- </button>
- </template>
- </footer>
- </template>
+ <template bind="" if="{{app.todos.length &gt; 0}}"></template>
<footer id="footer">
<span id="todo-count"><strong>1</strong></span>
<ul is="router-options" id="filters"><shadow-root><content></content></shadow-root>
« no previous file with comments | « example/todomvc/test/expected/todomvc_listorder_test.html.txt ('k') | example/todomvc/test/expected/todomvc_mainpage_test.html.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698