diff --git a/lib/checks/mobile/css-orientation-lock.js b/lib/checks/mobile/css-orientation-lock.js index 0bf44d9243..60d92c5f54 100644 --- 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 index 93ba8fc058..7d66892d31 100644 --- 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 index 75878a3041..b6823945c0 100644 --- 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 index 576bdb4c32..ded94c39af 100644 --- 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); + } } };