PROTOTYPE: Generic custom CSS property parsing

chrome/browser/resources/vr_shell/vr_shell_ui.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html {
   background-color: rgba(255, 255, 255, 0);
 }
 
 #ui {
   left: 0;
   position: absolute;
   top: 0;
   transform-origin: left top;
   width: 1920px;
 }
 
 /* This class manages the position of elements on the texture page.
  * Each UI element should have a bounding div of this class. */
 .ui-element {
   float: left;
   margin: 2px;
 }
 
+#content-quad-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;
+  --tranY: 0;
+  --tranZ: -4.0;
+}
+
 .webvr-message-box {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
 #webvr-not-secure-permanent .webvr-not-secure-icon {
   display: inline-block;
   margin: 20px 0;
@@ skipping 45 matching lines @@
   background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: 10%;
   height: 96px;
   margin: auto auto;
   opacity: 0.8;
   transition: opacity 150ms ease-in-out;
   width: 96px;
+  --custom-var: "cat";
+}
+
+.round-button .button:hover {
+  background-color: red;
+  --custom-var: "dog";
 }
 
 .round-button .caption {
   color: white;
   font-size: 24px;
   max-width: 192px;
   opacity: 0;
   overflow: hidden;
   text-align: center;
   transition: opacity 150ms ease-in-out;
@@ skipping 183 matching lines @@
   outline: none; /* Do not show an outline when focused. */
   overflow: hidden;
   white-space: nowrap;
   width: 100%;
 }
 
 #omnibox-clear-button {
   background: url(../../../../ui/webui/resources/images/x-hover.png) no-repeat center center;
   width: 18px;
 }