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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 20863002: Introduce boot.js: this finally makes it possible to load and run Todomvc (Closed) Base URL: git@github.com:dart-lang/web-ui.git@master
Patch Set: Created 7 years, 5 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/component/news/web/news-component.html ('k') | example/todomvc/test/expected/todomvc_mainpage2_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_listorder_test.html.txt
diff --git a/example/todomvc/test/expected/todomvc_listorder_test.html.txt b/example/todomvc/test/expected/todomvc_listorder_test.html.txt
index dbaa145cb68e02aad4bbbd07aa43f2dc38156f88..7c3d79532fcace755ff737f0e4b7b9c6c3a6e658 100644
--- a/example/todomvc/test/expected/todomvc_listorder_test.html.txt
+++ b/example/todomvc/test/expected/todomvc_listorder_test.html.txt
@@ -11,10 +11,10 @@ wrong order when using lists and ifs together.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <link rel="stylesheet" href="../web/base.css">
+ <link rel="stylesheet" href="../../../web/base.css">
<script src="../../packages/polymer/testing/testing.js"></script>
<title>Dart • TodoMVC</title>
-<link rel="stylesheet" type="text/css" href="todomvc_listorder_test.html.css"><style>template,
+<style>template,
thead[template],
tbody[template],
tfoot[template],
@@ -30,10 +30,95 @@ option[template] {
<body><polymer-element name="todo-row" extends="li" attributes="todo">
<template>
- <div class="todo-row_todo-item">
- <input class="todo-row_toggle" type="checkbox" checked="{{todo.done}}">
+ <style>
+.todo-item {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+.todo-item.editing {
+ border-bottom: none;
+ padding: 0;
+}
+.todo-item.completed [is=editable-label] {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+.todo-item .toggle {
+ text-align: center;
+ width: 40px;
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.todo-item .toggle:after {
+ content: "✔";
+ line-height: 43px;
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+.todo-item .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+.todo-item .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -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);
+ -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: "✖";
+}
+.todo-item:hover .destroy {
+ display: block;
+}
+.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;
+}
+}
+</style><div class="todo-item">
+ <input class="toggle" type="checkbox" checked="{{todo.done}}">
<div is="editable-label" id="label" value="{{todo.task}}"></div>
- <button class="todo-row_destroy" on-click="removeTodo"></button>
+ <button class="destroy" on-click="removeTodo"></button>
</div>
</template>
@@ -121,8 +206,93 @@ option[template] {
</template>
<li is="todo-row" todo="{{}}"><shadow-root>
- <div class="todo-row_todo-item">
- <input class="todo-row_toggle" type="checkbox">
+ <style>
+.todo-item {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+.todo-item.editing {
+ border-bottom: none;
+ padding: 0;
+}
+.todo-item.completed [is=editable-label] {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+.todo-item .toggle {
+ text-align: center;
+ width: 40px;
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.todo-item .toggle:after {
+ content: "✔";
+ line-height: 43px;
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+.todo-item .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+.todo-item .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -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);
+ -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: "✖";
+}
+.todo-item:hover .destroy {
+ display: block;
+}
+.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;
+}
+}
+</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>
@@ -135,14 +305,99 @@ option[template] {
</form>
</template>
</shadow-root></div>
- <button class="todo-row_destroy" on-click="removeTodo"></button>
+ <button class="destroy" on-click="removeTodo"></button>
</div>
</shadow-root></li>
- <li is="todo-row" todo="{{}}"><shadow-root>
+ <li is="todo-row" todo="{{}}"><shadow-root>
- <div class="todo-row_todo-item todo-row_completed">
- <input class="todo-row_toggle" type="checkbox">
+ <style>
+.todo-item {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+.todo-item.editing {
+ border-bottom: none;
+ padding: 0;
+}
+.todo-item.completed [is=editable-label] {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+.todo-item .toggle {
+ text-align: center;
+ width: 40px;
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.todo-item .toggle:after {
+ content: "✔";
+ line-height: 43px;
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+.todo-item .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+.todo-item .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -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);
+ -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: "✖";
+}
+.todo-item:hover .destroy {
+ display: block;
+}
+.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;
+}
+}
+</style><div class="todo-item completed">
+ <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>
@@ -155,14 +410,99 @@ option[template] {
</form>
</template>
</shadow-root></div>
- <button class="todo-row_destroy" on-click="removeTodo"></button>
+ <button class="destroy" on-click="removeTodo"></button>
</div>
</shadow-root></li>
-
+
<li is="todo-row" todo="{{}}"><shadow-root>
- <div class="todo-row_todo-item">
- <input class="todo-row_toggle" type="checkbox">
+ <style>
+.todo-item {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+.todo-item.editing {
+ border-bottom: none;
+ padding: 0;
+}
+.todo-item.completed [is=editable-label] {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+.todo-item .toggle {
+ text-align: center;
+ width: 40px;
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.todo-item .toggle:after {
+ content: "✔";
+ line-height: 43px;
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+.todo-item .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+.todo-item .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -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);
+ -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: "✖";
+}
+.todo-item:hover .destroy {
+ display: block;
+}
+.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;
+}
+}
+</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>
@@ -175,7 +515,7 @@ option[template] {
</form>
</template>
</shadow-root></div>
- <button class="todo-row_destroy" on-click="removeTodo"></button>
+ <button class="destroy" on-click="removeTodo"></button>
</div>
</shadow-root></li>
« no previous file with comments | « example/component/news/web/news-component.html ('k') | example/todomvc/test/expected/todomvc_mainpage2_test.html.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698