interestfor 1.0.6 → 1.0.7

package/README.md

@@ -119,6 +119,11 @@ polyfill (optionally minified) or the native feature. You can run tests directly
 from this repo,
 [here](https://mfreed7.github.io/interestfor/test/test.html).
 
+## Browser Compatibility
+
+This polyfill uses all standard APIs, and is therefore compatible with all
+modern browsers, including Safari and Firefox.
+
 ## Improvements / Bugs
 
 If you find issues with the polyfill, feel free to file them [here](https://github.com/mfreed7/interestfor/issues).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interestfor",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A polyfill for the `interestfor` API",
   "keywords": "interestfor, interesttarget, polyfill, hover-triggering",
   "homepage": "https://github.com/mfreed7/interestfor#readme",

package/src/interestfor.js

@@ -227,12 +227,15 @@
         if (!isPlainHint(target)) {
           invoker.setAttribute("aria-expanded", "true");
         }
-        const anchorName = `--interest-anchor-${Math.random()
-          .toString(36)
-          .substring(2)}`;
-        invoker.style.anchorName = anchorName;
-        target.style.positionAnchor = anchorName;
-        data.anchorName = anchorName;
+        if (getComputedStyle(invoker).anchorName === 'none' &&
+            getComputedStyle(target).positionAnchor === 'auto') {
+          const anchorName = `--interest-anchor-${Math.random()
+            .toString(36)
+            .substring(2)}`;
+          invoker.style.anchorName = anchorName;
+          target.style.positionAnchor = anchorName;
+          data.anchorName = anchorName;
+        }
         break;
       default:
         throw new Error("Invalid state");

package/test/basic_test.html

@@ -20,4 +20,7 @@
   [popover].interest-target {
     background-color: lightblue;
   }
+  [popover] {
+    position-area: right center;
+  }
 </style>