diff --git a/src/core/utils.js b/src/core/utils.js index bc65031a1..972ab0277 100644 --- a/src/core/utils.js +++ b/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; diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html index 814a4470b..416f061c6 100644 --- a/src/pat/inject/index.html +++ b/src/pat/inject/index.html @@ -255,10 +255,20 @@

Inject autosubmit with form using GET and POST

} .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; } diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js index 174819e67..b6da43280 100644 --- a/src/pat/inject/inject.js +++ b/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) ); } diff --git a/tests/specs/core/utils.js b/tests/specs/core/utils.js index 7d46a2c77..09b51333e 100644 --- a/tests/specs/core/utils.js +++ b/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); }); });