test: fix tests failing in IE11 (#1570)

* test: fix broken tests * add -ms-transform * IE11 does not add space between media query properties * dont string compare css strings * remove broken IE11 test comment
dequelabs · May 16, 2019 · 2102eca · 2102eca
1 parent 35261ef
commit 2102eca
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 41 deletions.
diff --git a/lib/checks/mobile/css-orientation-lock.js b/lib/checks/mobile/css-orientation-lock.js
@@ -61,8 +61,8 @@ Object.keys(rulesGroupByDocumentFragment).forEach(key => {
 		// eg: screen and (max-width: 767px) and (min-width: 320px) and (orientation: landscape)
 		const cssText = r.cssText;
 		return (
-			/orientation:\s+landscape/i.test(cssText) ||
-			/orientation:\s+portrait/i.test(cssText)
+			/orientation:\s*landscape/i.test(cssText) ||
+			/orientation:\s*portrait/i.test(cssText)
 		);
 	});
 	if (!orientationRules || !orientationRules.length) {
@@ -87,8 +87,12 @@ Object.keys(rulesGroupByDocumentFragment).forEach(key => {
 				return;
 			}
 
-			// check if transform style exists
-			const transformStyleValue = cssRule.style.transform || false;
+			// check if transform style exists (don't forget vendor prefixes)
+			const transformStyleValue =
+				cssRule.style.transform ||
+				cssRule.style.webkitTransform ||
+				cssRule.style.msTransform ||
+				false;
 			// transformStyleValue -> is the value applied to property
 			// eg: "rotate(-90deg)"
 			if (!transformStyleValue) {

diff --git a/test/checks/mobile/css-orientation-lock.js b/test/checks/mobile/css-orientation-lock.js
@@ -6,8 +6,6 @@ describe('css-orientation-lock tests', function() {
 	var dynamicDoc = document.implementation.createHTMLDocument(
 		'Dynamic document for CSS Orientation Lock tests'
 	);
-	var isIE11 = axe.testUtils.isIE11;
-	var isPhantom = window.PHANTOMJS ? true : false;
 
 	afterEach(function() {
 		checks['css-orientation-lock'] = origCheck;
@@ -23,11 +21,11 @@ describe('css-orientation-lock tests', function() {
 		MEDIA_STYLE_ORIENTATION_WITHOUT_TRANSFORM:
 			'@media screen and (min-width: 1px) and (max-width: 2000px) and (orientation: portrait) { #mocha { color: red; } }',
 		MEDIA_STYLE_ORIENTATION_WITH_TRANSFORM_NOT_ROTATE:
-			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { #mocha { transform: translateX(10px); } }',
+			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { #mocha { transform: translateX(10px); -webkit-transform: translateX(10px); } }',
 		MEDIA_STYLE_ORIENTATION_WITH_TRANSFORM_ROTATE_180:
-			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { body { transform: rotate(180deg); } }',
+			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { body { transform: rotate(180deg); -webkit-transform: rotate(180deg); } }',
 		MEDIA_STYLE_ORIENTATION_WITH_TRANSFORM_ROTATE_90:
-			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { #mocha { transform: rotate(270deg); } }'
+			'@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { #mocha { transform: rotate(270deg); -webkit-transform: rotate(270deg); } }'
 	};
 
 	function getSheet(data) {
@@ -220,30 +218,26 @@ describe('css-orientation-lock tests', function() {
 		assert.isTrue(actual);
 	});
 
-	// This currently breaks in IE11
-	(isIE11 || isPhantom ? it.skip : it)(
-		'returns false if TRANSFORM style applied is ROTATE, and is divisible by 90 and not divisible by 180',
-		function() {
-			var actual = checks['css-orientation-lock'].evaluate.call(
-				checkContext,
-				document,
-				{},
-				undefined,
-				{
-					cssom: [
-						{
-							shadowId: undefined,
-							root: document,
-							sheet: getSheet(
-								SHEET_DATA.MEDIA_STYLE_ORIENTATION_WITH_TRANSFORM_ROTATE_90
-							)
-						}
-					]
-				}
-			);
-			assert.isFalse(actual);
-		}
-	);
+	it('returns false if TRANSFORM style applied is ROTATE, and is divisible by 90 and not divisible by 180', function() {
+		var actual = checks['css-orientation-lock'].evaluate.call(
+			checkContext,
+			document,
+			{},
+			undefined,
+			{
+				cssom: [
+					{
+						shadowId: undefined,
+						root: document,
+						sheet: getSheet(
+							SHEET_DATA.MEDIA_STYLE_ORIENTATION_WITH_TRANSFORM_ROTATE_90
+						)
+					}
+				]
+			}
+		);
+		assert.isFalse(actual);
+	});
 
 	// Note:
 	// external stylesheets is tested in integration tests

diff --git a/test/core/utils/parse-crossorigin-stylesheet.js b/test/core/utils/parse-crossorigin-stylesheet.js
@@ -54,10 +54,8 @@ describe('axe.utils.parseCrossOriginStylesheet', function() {
 				);
 				done();
 			})
-			.catch(function() {
-				done(
-					new Error('Expected axe.utils.parseCrossOriginStylesheet to resolve.')
-				);
+			.catch(function(err) {
+				done(err);
 			});
 	});
 

diff --git a/test/testutils.js b/test/testutils.js
@@ -338,10 +338,25 @@ testUtils.assertStylesheet = function assertStylesheet(
 		assert.isTrue(cssText.includes(selectorText));
 	} else {
 		assert.equal(sheet.cssRules[0].selectorText, selectorText);
-		assert.equal(
-			sheet.cssRules[0].cssText.replace(/\s/g, ''),
-			cssText.replace(/\s/g, '')
-		);
+
+		// compare the selector properties
+		var styleEl = document.createElement('style');
+		styleEl.type = 'text/css';
+		styleEl.innerHTML = cssText;
+		document.body.appendChild(styleEl);
+
+		var testSheet = document.styleSheets[document.styleSheets.length - 1];
+		var sheetRule = sheet.cssRules[0];
+		var testRule = testSheet.cssRules[0];
+
+		try {
+			for (var i = 0; i < testRule.style.length; i++) {
+				var property = testRule.style[i];
+				assert.equal(sheetRule.style[property], testRule.style[property]);
+			}
+		} finally {
+			styleEl.parentNode.removeChild(styleEl);
+		}
 	}
 };