PROTOTYPE: Generic custom CSS property parsing

chrome/browser/resources/vr_shell/vr_shell_ui.css

Index: chrome/browser/resources/vr_shell/vr_shell_ui.css
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.css b/chrome/browser/resources/vr_shell/vr_shell_ui.css
index c89f16f147416a12475bd208fc450b4fcf377ae4..9d259613c1a806b15018fb98b16340666d91c952 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.css
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.css
@@ -21,6 +21,23 @@ html {
   margin: 2px;
 }
 
+#content-quad-element {

[cjgrant, 2017/02/15 16:34:27]

The content quad isn't on the sprite sheet, so we have to add a dummy element.

+  --sizeY: 1.6;
+  --sizeX: 2.5;
+  width: 50px;
+  height: 50px;
+  background-color: red;
+  --tranX: 0;
+  --tranY: 0;
+  --tranZ: -2.0;
+}
+
+#content-quad-element.menu {
+  --tranX: 0;

[cjgrant, 2017/02/15 16:34:27]

This specifies a different quad position if we're in menu mode.

+  --tranY: 0;
+  --tranZ: -4.0;
+}
+
 .webvr-message-box {
   align-items: center;
   display: flex;
@@ -86,6 +103,12 @@ html {
   opacity: 0.8;
   transition: opacity 150ms ease-in-out;
   width: 96px;
+  --custom-var: "cat";
+}
+
+.round-button .button:hover {

[cjgrant, 2017/02/15 16:34:27]

LOL, disregard the cats and dogs. :)

+  background-color: red;
+  --custom-var: "dog";
 }
 
 .round-button .caption {