Guard against className being null/undefined

cq-prolyfill.js

@@ -1221,7 +1221,7 @@ function filterRulesByElementAndProp(rules, element, prop) {
 	if (element.id) {
 		foundRules = foundRules.concat(rules['#' + element.id] || []);
 	}
-	element.className.split(/\s+/).forEach(function(className) {
+	getClassName(element).split(/\s+/).forEach(function(className) {
 		foundRules = foundRules.concat(rules['.' + className] || []);
 	});
 	foundRules = foundRules
@@ -1388,6 +1388,22 @@ function createCacheMap() {
 	};
 }
 
+/**
+ * @param  {Element} element
+ * @return {string}
+ */
+function getClassName(element) {
+	return element.getAttribute('class') || '';
+}
+
+/**
+ * @param {Element} element
+ * @param {string}  className
+ */
+function setClassName(element, className) {
+	element.setAttribute('class', className);
+}
+
 /**
  * @param {Element} element
  * @param {string}  className
@@ -1396,7 +1412,7 @@ function hasClass(element, className) {
 	if (element.classList) {
 		return element.classList.contains(className);
 	}
-	return !!element.className.match(new RegExp(
+	return !!getClassName(element).match(new RegExp(
 		'(?:^|\\s+)'
 		+ className.replace(REGEXP_ESCAPE_REGEXP, '\\$&')
 		+ '($|\\s+)'
@@ -1412,7 +1428,7 @@ function addClass(element, className) {
 		element.classList.add(className);
 	}
 	else if (!hasClass(element, className)) {
-		element.className += ' ' + className;
+		setClassName(element, getClassName(element) + ' ' + className)
 	}
 }
 
@@ -1425,14 +1441,14 @@ function removeClass(element, className) {
 		element.classList.remove(className);
 	}
 	else {
-		element.className = element.className.replace(
+		setClassName(element, getClassName(element).replace(
 			new RegExp(
 				'(?:^|\\s+)'
 				+ className.replace(REGEXP_ESCAPE_REGEXP, '\\$&')
 				+ '($|\\s+)'
 			),
 			'$1'
-		);
+		));
 	}
 }
 

tests-functional.js

@@ -35,7 +35,7 @@ QUnit.test('Simple width and height Query', function(assert) {
 		+ '<div class="maxW"></div>'
 		+ '<div class="minW"></div>'
 		+ '<div class="maxH"></div>'
-		+ '<div class="minH"></div>';
+		+ '<svg><g class="minH"></g></svg>';
 	fixture.appendChild(element);
 	var minW = element.querySelector('.minW');
 	var maxW = element.querySelector('.maxW');

tests.js

@@ -763,7 +763,8 @@ QUnit.test('filterRulesByElementAndProp', function(assert) {
 	style.innerHTML = '.myel, .notmyel { width: 1px }'
 		+ '.notmyel { width: 2px }'
 		+ '.myel { height: 3px }'
-		+ '@media screen { div.myel { width: 4px } }';
+		+ '@media screen { div.myel { width: 4px } }'
+		+ '@media (min-width: 0) { g.myel { width: 5px } }';
 
 	fixture.appendChild(style);
 	fixture.appendChild(element);
@@ -777,6 +778,16 @@ QUnit.test('filterRulesByElementAndProp', function(assert) {
 	assert.equal(rules[1]._selector, 'div.myel', 'Second selector');
 	assert.equal(rules[1]._rule.style.width, '4px', 'Property');
 
+	element.className = '';
+	element.innerHTML = '<svg><g class="myel"></g></svg>';
+
+	var rules = filterRulesByElementAndProp(styleCache.width, element.querySelector('.myel'), 'width');
+	assert.equal(rules.length, 2, 'Two rules');
+	assert.equal(rules[0]._selector, '.myel', 'First selector');
+	assert.equal(rules[0]._rule.style.width, '1px', 'Property');
+	assert.equal(rules[1]._selector, 'g.myel', 'Second selector');
+	assert.equal(rules[1]._rule.style.width, '5px', 'Property');
+
 });
 
 /*global elementMatchesSelector*/
@@ -792,6 +803,12 @@ QUnit.test('elementMatchesSelector', function(assert) {
 	assert.notOk(elementMatchesSelector(element, '#1'), 'Invalid selector');
 	assert.notOk(elementMatchesSelector(element, '::-webkit- *'), 'Safari bug with special semivalid selector'); // Issue #26
 
+	element.innerHTML = '<svg><g class=":container(width>=100px)"></g></svg>';
+	var svgElement = element.querySelector('g');
+
+	assert.ok(elementMatchesSelector(svgElement, 'g'), 'Simple selector');
+	assert.ok(elementMatchesSelector(svgElement, '.\\:container\\(width\\>\\=100px\\)'), 'Escaped query');
+
 });
 
 /*global sortRulesBySpecificity, getSpecificity*/
@@ -911,28 +928,34 @@ QUnit.test('createCacheMap', function(assert) {
 
 });
 
-/*global addClass, removeClass*/
+/*global addClass, removeClass, getClassName*/
 QUnit.test('addClass, removeClass', function(assert) {
 
 	var element = document.createElement('div');
+	element.innerHTML = '<svg><g>';
+	var svgElement = element.querySelector('g');
+
+	[element, svgElement].forEach(function(element) {
+
+		addClass(element, 'foo');
+		assert.equal(getClassName(element).trim(), 'foo', 'Add class foo');
+		addClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), 'foo bar', 'Add class bar');
+		addClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), 'foo bar', 'Add class bar again');
+		addClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), 'foo bar :container(width>=100px)', 'Add container query class');
+		addClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), 'foo bar :container(width>=100px)', 'Add container query class again');
+
+		removeClass(element, 'foo');
+		assert.equal(getClassName(element).trim(), 'bar :container(width>=100px)', 'Remove class foo');
+		removeClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), ':container(width>=100px)', 'Remove class bar');
+		removeClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), '', 'Remove container query class');
 
-	addClass(element, 'foo');
-	assert.equal(element.className.trim(), 'foo', 'Add class foo');
-	addClass(element, 'bar');
-	assert.equal(element.className.trim(), 'foo bar', 'Add class bar');
-	addClass(element, 'bar');
-	assert.equal(element.className.trim(), 'foo bar', 'Add class bar again');
-	addClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), 'foo bar :container(width>=100px)', 'Add container query class');
-	addClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), 'foo bar :container(width>=100px)', 'Add container query class again');
-
-	removeClass(element, 'foo');
-	assert.equal(element.className.trim(), 'bar :container(width>=100px)', 'Remove class foo');
-	removeClass(element, 'bar');
-	assert.equal(element.className.trim(), ':container(width>=100px)', 'Remove class bar');
-	removeClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), '', 'Remove container query class');
+	});
 
 });