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);
});
});