Merge pull request w3c#78 from jihyerish/polyfill-spatnav-contain-pro…

…perty Polyfill spatnav contain property
frivoal · Jul 1, 2018 · b7c5002 · b7c5002
2 parents a57757b + d794e28
commit b7c5002
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/polyfill/spatnav-api.js b/polyfill/spatnav-api.js
@@ -19,6 +19,20 @@
     this._options = options;
   }
 
+  /**
+  * CSS.registerProperty() from the Properties and Values API
+  * Reference: https://drafts.css-houdini.org/css-properties-values-api/#the-registerproperty-function
+  */
+  if (window.CSS && CSS.registerProperty) {
+    console.log("registerProperty is available");
+    CSS.registerProperty({
+      name: '--spatial-navigation-contain',
+      syntax: 'auto | contain',
+      inherits: false,
+      initialValue: 'auto'
+    });
+  }
+
   /**
   * Gives a CSS custom property value applied at the element
   * @function

diff --git a/sample/heuristic_scrollable.html b/sample/heuristic_scrollable.html
@@ -13,7 +13,7 @@
 	<script src="../polyfill/spatnav-api.js"></script>
 </head>
 <body>
-  <div tabindex="0" class="container c1" style="overflow-y: scroll;">
+  <div class="container c1" tabindex="0" style="overflow-y: scroll;">
 		<div tabindex="0" class="box b2" style="left: 70px; top: 30px"></div>
 		<div tabindex="0" class="box b2" style="left: 50px; top: 90px"></div>
 		<div tabindex="0" class="box b2" style="left: 130px; top: 267px"></div>