Add demo_page.html to cr_elements/v0_8

ui/webui/resources/cr_elements/v0_8/demo_element.html

Index: ui/webui/resources/cr_elements/v0_8/demo_element.html
diff --git a/ui/webui/resources/cr_elements/v0_8/demo_element.html b/ui/webui/resources/cr_elements/v0_8/demo_element.html
new file mode 100644
index 0000000000000000000000000000000000000000..62d5045c0e6d0352ac7359fb7914e7c0e0c4351b
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v0_8/demo_element.html
@@ -0,0 +1,49 @@
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_checkbox/cr_checkbox.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_network_icon/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_toggle_button/cr_toggle_button.html">
+
+<dom-module id="cr-demo-element">
+  <template>
+    <div>
+      <h3>cr-button</h3>
+      <cr-button>Button</cr-button>
+      <cr-button raised>Raised Button</cr-button>
+    </div>
+    <div>
+      <h3>cr-checkbox</h3>
+      <cr-checkbox checked="{{checkboxChecked}}">Checkbox</cr-checkbox>
+    </div>
+    <div>
+      <h3>cr-collapse</h3>
+      <paper-toggle-button checked="{{collapseOpened}}">
+        Toggle Collapse
+      </paper-toggle-button>
+      <cr-collapse opened="{{collapseOpened}}">
+        <div>
+          <span>Collapsable section</span>
+        </div>
+      </cr-collapse>
+    </div>
+    <div>
+      <h3>cr-input</h3>
+      <cr-input label="Input" value="{{inputValue}}"></cr-input>
+      <span>Input.value={{inputValue}}</span>

[michaelpg, 2015/05/15 04:29:13]

This isn't supported, {{bindingAnnotations}} need to be the only content of an
element (it basically binds to element.textContent). Wrap it in another span for
example.

Sorry I didn't catch this before.

[stevenjb, 2015/05/15 06:47:00]

Aha. It worked on .5, but I wouldn't be surprised if that was actually a bug.

[michaelpg, 2015/05/15 07:14:22]

No, it WAI in 0.5 but is no longer supported in 0.8 (or 0.9) for performance
reasons. So anywhere we had a line like 34 we have to wrap the annotation in a
tag like <span>.

+    </div>
+    <div>
+      <h3>cr-network-icon</h3>
+      <cr-network-icon></cr-network-icon>
+    </div>
+    <div>
+      <h3>cr-toggle-button</h3>
+      <div horizontal layout>
+        <span>Toggle Button</span>
+        <cr-toggle-button></cr-toggle-button>
+      </div>
+    </div>
+  </template>
+  <script src="demo_element.js"></script>
+</dom-module>