#694 followup: pat-inject scrolling fixes

src/core/utils.js

@@ -459,12 +459,13 @@ define([
         return $relatives;
     }
 
-    function getCSSValue(el, property, asFloat) {
+    function getCSSValue(el, property, asPixels) {
         /* Return a CSS property value for a given DOM node.
-         * Optionally parse as float.
+         * For length-values, relative values are converted to pixels.
+         * Optionally parse as pixels, if applicable.
         */
         var value = window.getComputedStyle(el).getPropertyValue(property);
-        if (asFloat) {
+        if (asPixels) {
             value = parseFloat(value) || 0.0;
         }
         return value;

src/pat/inject/index.html

@@ -255,10 +255,20 @@ <h3>Inject autosubmit with form using GET and POST</h3>
     }
 
     .poems article * {
+      text-align: center;
+      margin-bottom: 1em;
+    }
+
+    .poems article article p {
       text-align: center;
       margin-bottom: 2em;
     }
 
+    .poems article article {
+      text-align: center;
+      margin-bottom: 3em;
+    }
+
     .poems article {
       margin-bottom: 4em;
     }

src/pat/inject/inject.js

@@ -529,12 +529,12 @@ define([
                     left = Math.abs(
                         scroll_target.getBoundingClientRect().left
                         - scroll_container_ref.getBoundingClientRect().left
-                        - utils.getCSSValue(scroll_container, 'border-left', true)
+                        - utils.getCSSValue(scroll_container, 'border-left-width', true)
                     );
                     top = Math.abs(
                         scroll_target.getBoundingClientRect().top
                         - scroll_container_ref.getBoundingClientRect().top
-                        - utils.getCSSValue(scroll_container, 'border-top', true)
+                        - utils.getCSSValue(scroll_container, 'border-top-width', true)
                     );
 
                 }

tests/specs/core/utils.js

@@ -365,31 +365,40 @@ define(["underscore", "pat-utils"], function(_, utils) {
     });
 
     describe("getCSSValue", function() {
-        it("returns values for properties of a html node", function() {
+        it("Return values for CSS properties of a HTML node", function() {
 
             var el1 = document.createElement('div');
             var el2 = document.createElement('div');
+            el1.appendChild(el2);
 
             // Need to attach element to body to make CSS calculation work.
             document.body.appendChild(el1);
 
             el1.style['font-size'] = '12px';
-            el1.style['margin-top'] = '26px';
+            el1.style['margin-top'] = '1em';
+            el1.style.border = '1em solid black';
             el1.style.position = 'relative';
-
-            el2.style['margin-bottom'] = '10px';
-
-            el1.appendChild(el2);
+            el2.style['margin-bottom'] = '2em';
 
             expect(utils.getCSSValue(el1, 'font-size')).toBe('12px');
             expect(utils.getCSSValue(el1, 'font-size', true)).toBe(12.0);
             expect(utils.getCSSValue(el2, 'font-size')).toBe('12px');
 
+            // ``em`` are parsed to pixel values.
+            // shorthand property sets like ``border`` are split up into their
+            // individual properties, like ``border-top-width``.
+            expect(utils.getCSSValue(el1, 'border-top-width')).toBe('12px');
+            expect(utils.getCSSValue(el1, 'border-top-style')).toBe('solid');
+            expect(utils.getCSSValue(el1, 'border-top-color')).toBe('rgb(0, 0, 0)');
+
             expect(utils.getCSSValue(el1, 'position')).toBe('relative');
 
-            expect(utils.getCSSValue(el1, 'margin-top', true)).toBe(26.0);
+            // again, relative length-type values are converted to absolute pixels.
+            expect(utils.getCSSValue(el1, 'margin-top')).toBe('12px');
+            expect(utils.getCSSValue(el1, 'margin-top', true)).toBe(12.0);
             expect(utils.getCSSValue(el2, 'margin-top', true)).toBe(0.0);
-            expect(utils.getCSSValue(el2, 'margin-bottom', true)).toBe(10.0);
+            expect(utils.getCSSValue(el2, 'margin-bottom')).toBe('24px');
+            expect(utils.getCSSValue(el2, 'margin-bottom', true)).toBe(24.0);
 
         });
     });