Fix #18 bug with CSS calc expressions

ausi · Feb 14, 2016 · 2240f19 · 2240f19
1 parent 0ba0ef0
commit 2240f19
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/cq-prolyfill.js b/cq-prolyfill.js
@@ -925,7 +925,10 @@ function getContainer(element, prop) {
  */
 function isFixedSize(element, prop) {
 	var originalStyle = getOriginalStyle(element, prop);
-	if (originalStyle && originalStyle.match(LENGTH_REGEXP)) {
+	if (originalStyle && (
+		originalStyle.match(LENGTH_REGEXP)
+		|| originalStyle.match(/^calc\([^%]*\)$/i)
+	)) {
 		return true;
 	}
 	return false;
@@ -973,6 +976,11 @@ function isIntrinsicSize(element, prop) {
 		return false;
 	}
 
+	// Calc expression
+	if (originalStyle && originalStyle.substr(0, 5) === 'calc(') {
+		return false;
+	}
+
 	// Elements without a defined size
 	return true;
 

diff --git a/tests-functional.js b/tests-functional.js
@@ -88,6 +88,14 @@ QUnit.test('Simple width and height Query', function(assert) {
 		assert.equal(font(maxW), 'no-query', 'max-width at 201px');
 		assert.equal(font(maxH), 'no-query', 'max-height at 201px');
 
+		element.style.cssText = 'width: 400px; height: 400px';
+		element.firstChild.firstChild.firstChild.style.cssText = 'float: left; width: 51.29%; width: calc(100% / 2 + 5px); height: 51.29%; height: calc(100% / 2 + 5px)';
+		reevaluate(true);
+		assert.equal(font(maxW), 'max-width-200', 'max-width at 200px');
+		assert.equal(font(maxH), 'max-height-200', 'max-height at 200px');
+		assert.equal(font(minW), 'min-width-200', 'min-width at 200px');
+		assert.equal(font(minH), 'min-height-200', 'min-height at 200px');
+
 		done();
 
 	});

diff --git a/tests.js b/tests.js
@@ -557,6 +557,14 @@ QUnit.test('isFixedSize', function(assert) {
 	assert.equal(isFixedSize(element, 'width'), true, 'Fixed width');
 	assert.equal(isFixedSize(element, 'height'), true, 'Fixed height');
 
+	element.style.cssText = 'width: 50%; width: calc(100% / 2 + 100px); height: 50%; height: calc(100% / 2 + 100px)';
+	assert.equal(isFixedSize(element, 'width'), false, 'Percentage calc expression width');
+	assert.equal(isFixedSize(element, 'height'), false, 'Percentage calc expression height');
+
+	element.style.cssText = 'width: 50px; width: calc(100px + 10em / 2); height: 50px; height: calc(100px + 10em / 2)';
+	assert.equal(isFixedSize(element, 'width'), true, 'Fixed calc expression width');
+	assert.equal(isFixedSize(element, 'height'), true, 'Fixed calc expression height');
+
 });
 
 /*global isIntrinsicSize*/
@@ -604,6 +612,14 @@ QUnit.test('isIntrinsicSize', function(assert) {
 	assert.equal(isIntrinsicSize(element, 'width'), false, 'Display inline float left pixel width');
 	assert.equal(isIntrinsicSize(element, 'height'), false, 'Display inline float left pixel height');
 
+	element.style.cssText = 'display: inline; float: left; width: 50px; width: calc(100px / 2); height: 50px; height: calc(100px / 2)';
+	assert.equal(isIntrinsicSize(element, 'width'), false, 'Calc pixel width');
+	assert.equal(isIntrinsicSize(element, 'height'), false, 'Calc pixel height');
+
+	element.style.cssText = 'display: inline; float: left; width: 50%; width: calc(100% / 2); height: 50%; height: calc(100% / 2)';
+	assert.equal(isIntrinsicSize(element, 'width'), false, 'Calc percentage width');
+	assert.equal(isIntrinsicSize(element, 'height'), false, 'Calc percentage height');
+
 });
 
 /*global getSize*/