v1.0.6 - Show anchor at left of text if possible.

Rob--W · Nov 7, 2014 · 8607582 · 8607582
1 parent 116f423
commit 8607582
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Display #Anchors",
     "description": "Displays anchors for all content in the current web page without breaking the layout.",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "manifest_version": 2,
     "background": {
         "scripts": ["background.js"],

diff --git a/extension/toggle-anchors.js b/extension/toggle-anchors.js
@@ -83,7 +83,7 @@ function getAnchor(anchorValue, elem) {
     } else {
         var paddingLeft = parseFloat(currentStyle.getPropertyValue('padding-left')) || 0;
         var borderLeft = parseFloat(currentStyle.getPropertyValue('border-left-width')) || 0;
-        var visibleHorizontalSpace = elem.offsetWidth - paddingLeft - borderLeft;
+        var visibleHorizontalSpace = elem.offsetLeft + elem.offsetWidth - paddingLeft - borderLeft;
         if (visibleHorizontalSpace < MINIMUM_REQ_WIDTH_PX) {
             anchor.style.left = '0';
             anchor.style.right = 'auto';

diff --git a/test/clipped-container.html b/test/clipped-container.html
@@ -27,6 +27,14 @@ <h3><span><a id="some-anchor" name="some-anchor"></a>C. </span>Header with ancho
 <div>
     <h3 id="static-header">Static header</h3>
 </div>
+
+<!-- Static inline element of width 0. Anchor should be displayed at the left of the list item. -->
+<div>
+    <ul>
+        <li style="padding-left:5px"><a id="before-li"></a> List item</li>
+    </ul>
+</div>
+
 <div class="filler"></div>
 <link rel="stylesheet" href="../extension/toggle-anchors.css">
 <script src="../extension/toggle-anchors.js"></script>
@@ -48,19 +56,37 @@ <h3 id="static-header">Static header</h3>
     var elemAtPos = document.elementFromPoint(Math.max(0, rect.left), Math.max(0, rect.top + 2));
     assertEqual(elemAtPos, ahrefElement);
 }
+/**
+ * @param {Element} elem - Parent node of <:a.href:> element
+ */
+function assertAnchorIsAtLeft(elem) {
+    var elemLeftOffset = elem.getBoundingClientRect().left;
+    var ahrefElement = elem.querySelector('\\:a\\.href\\:');
+    var anchorNodeShadow = ahrefElement.shadowRoot || ahrefElement.webkitShadowRoot;
+    var shadowLeftOffset = anchorNodeShadow.querySelector('a').getBoundingClientRect().left;
+
+    console.assert(shadowLeftOffset < elemLeftOffset,
+            '<:a.href:> must be at the left of the target element, ' +
+            shadowLeftOffset + ' < ' + elemLeftOffset);
+}
 
 var anchors = document.querySelectorAll('\\:a\\.href\\:');
 // Sanity check
-assertEqual(anchors.length, 3);
+assertEqual(anchors.length, 4);
 assertEqual(anchors[0].parentNode, document.getElementById('some-anchor'));
 assertEqual(anchors[1].parentNode, document.getElementById('visible-anchor'));
 assertEqual(anchors[2].parentNode, document.getElementById('static-header'));
+assertEqual(anchors[3].parentNode, document.getElementById('before-li'));
 
 
 // Assert visibility of element. If any of the following test fail, then the :a.href: > a element is not visible.
 assertAnchorVisible(anchors[0]);
 assertAnchorVisible(anchors[1]);
 assertAnchorVisible(anchors[2]);
+assertAnchorVisible(anchors[3]);
+
+// Anchor must be displayed at the left of the list item.
+assertAnchorIsAtLeft(document.getElementById('before-li'));
 
 if (!location.hash) document.body.scrollTop = 0;
 </script>