fix: CSSOM generation for shadowRoot in Safari

lib/core/utils/preload-cssom.js

@@ -10,12 +10,12 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 	/**
 	 * Make an axios get request to fetch a given resource and resolve
 	 * @method getExternalStylesheet
-	 * @private
 	 * @param {Object} param an object with properties to configure the external XHR
 	 * @property {Object} param.resolve resolve callback on queue
 	 * @property {Object} param.reject reject callback on queue
 	 * @property {String} param.url string representing the url of the resource to load
 	 * @property {Number} param.timeout timeout to about network call
+	 * @private
 	 */
 	function getExternalStylesheet({ resolve, reject, url }) {
 		axe.imports
@@ -38,11 +38,38 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 
 	const q = axe.utils.queue();
 
-	// handle .styleSheets non existent on certain shadowDOM root
-	const rootStyleSheets = root.styleSheets
-		? Array.from(root.styleSheets)
-		: null;
-	if (!rootStyleSheets) {
+	let styleSheets = null;
+
+	if (!root.styleSheets) {
+		/**
+		 * In Safari: (Issue: https://github.com/dequelabs/axe-core/issues/1082)
+		 * As per the issue, shadowRoot does not return their styleShets,
+		 * So the content of any `style` tag is parsed to construct shadowDOM cssom.
+		 *
+		 * Steps:
+		 * - root(document).styleSheets does not return on `shadowContent/ shadowRoot`.
+		 * - Hence lookup all `<style>` tag(s) with in the shadowRoot and convert to styleSheet dynamically
+		 * - Pass these converted styleSheets to parse and construct cssom of shadowRoot(s)
+		 */
+		styleSheets = Array.from(root.children)
+			.filter(node => {
+				return node.nodeName.toUpperCase() === 'STYLE';
+			})
+			.map(node => {
+				const sheet = convertTextToStylesheetFn({
+					data: node.textContent
+					// no need to pass shadowId, root and isExternal
+					// as only interested in converting given data to sheet
+				});
+				return sheet.sheet;
+			});
+	} else {
+		// retrieve stylesheets as an []
+		styleSheets = Array.from(root.styleSheets);
+	}
+
+	// if no root styleSheets then return
+	if (!styleSheets || !styleSheets.length) {
 		return q;
 	}
 
@@ -51,7 +78,7 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 	let sheetHrefs = [];
 
 	// filter out sheets, that should not be accounted for...
-	const sheets = rootStyleSheets.filter(sheet => {
+	const sheets = styleSheets.filter(sheet => {
 		// FILTER > sheets with the same href (if exists)
 		let sheetAlreadyExists = false;
 		if (sheet.href) {
@@ -135,6 +162,7 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 			});
 		}
 	}, []);
+
 	// return
 	return q;
 }

test/integration/full/css-orientation-lock/violations.js

@@ -39,6 +39,14 @@ describe('css-orientation-lock violations test', function() {
 		}
 	});
 
+	function assertViolatedSelectors(relatedNodes, violatedSelectors) {
+		relatedNodes.forEach(function(node) {
+			var target = node.target[0];
+			var className = Array.isArray(target) ? target.reverse()[0] : target;
+			assert.isTrue(violatedSelectors.indexOf(className) !== -1);
+		});
+	}
+
 	it('returns VIOLATIONS if preload is set to TRUE', function(done) {
 		// the sheets included in the html, have styles for transform and rotate, hence the violation
 		axe.run(
@@ -57,18 +65,17 @@ describe('css-orientation-lock violations test', function() {
 				assert.property(res, 'violations');
 				assert.lengthOf(res.violations, 1);
 
-				// assert the node and related nodes
+				// assert the node
 				var checkedNode = res.violations[0].nodes[0];
 				assert.isTrue(/html/i.test(checkedNode.html));
 
+				// assert the relatedNodes
 				var checkResult = checkedNode.all[0];
 				assert.lengthOf(checkResult.relatedNodes, 2);
-				var violatedSelectors = ['.someDiv', '.thatDiv'];
-				checkResult.relatedNodes.forEach(function(node) {
-					var target = node.target[0];
-					var className = Array.isArray(target) ? target.reverse()[0] : target;
-					assert.isTrue(violatedSelectors.indexOf(className) !== -1);
-				});
+				assertViolatedSelectors(checkResult.relatedNodes, [
+					'.someDiv',
+					'.thatDiv'
+				]);
 
 				done();
 			}
@@ -101,12 +108,19 @@ describe('css-orientation-lock violations test', function() {
 					assert.property(res, 'violations');
 					assert.lengthOf(res.violations, 1);
 
-					// assert the node and related nodes
+					// assert the node
 					var checkedNode = res.violations[0].nodes[0];
+					assert.isTrue(/html/i.test(checkedNode.html));
+
+					// assert the relatedNodes
 					var checkResult = checkedNode.all[0];
+					assert.lengthOf(checkResult.relatedNodes, 3);
+					assertViolatedSelectors(checkResult.relatedNodes, [
+						'.someDiv',
+						'.thatDiv',
+						'.shadowDiv'
+					]);
 
-					// Issue - https://github.com/dequelabs/axe-core/issues/1082
-					assert.isAtLeast(checkResult.relatedNodes.length, 2);
 					done();
 				}
 			);

test/integration/full/preload-cssom/preload-cssom.html

@@ -18,6 +18,7 @@
 	<iframe id="frame1" src="frames/level1.html"></iframe>
 	<div id="mocha"></div>
 	<div id="shadow-fixture"></div>
+	<div id="shadow-fixture2"></div>
 	<div class="blue">blue on parent page</div>
 	<script src="/test/testutils.js"></script>
 	<script src="preload-cssom.js"></script>

test/integration/full/preload-cssom/preload-cssom.js

@@ -237,7 +237,7 @@ describe('preload cssom integration test', function() {
 					.then(function(results) {
 						var sheets = results[0];
 						// verify count
-						assert.isAtLeast(sheets.length, 4);
+						assert.lengthOf(sheets, 7);
 						// verify that the last non external sheet with shadowId has green selector
 						var nonExternalsheetsWithShadowId = sheets
 							.filter(function(s) {
@@ -246,20 +246,60 @@ describe('preload cssom integration test', function() {
 							.filter(function(s) {
 								return s.shadowId;
 							});
+						assertStylesheet(
+							nonExternalsheetsWithShadowId[
+								nonExternalsheetsWithShadowId.length - 1
+							].sheet,
+							'.green',
+							'.green{background-color:green;}'
+						);
 
-						// Issue - https://github.com/dequelabs/axe-core/issues/1082
-						if (
-							nonExternalsheetsWithShadowId &&
-							nonExternalsheetsWithShadowId.length
-						) {
-							assertStylesheet(
-								nonExternalsheetsWithShadowId[
-									nonExternalsheetsWithShadowId.length - 1
-								].sheet,
-								'.green',
-								'.green{background-color:green;}'
-							);
-						}
+						done();
+					})
+					.catch(done);
+			}
+		);
+
+		(shadowSupported ? it : xit)(
+			'should return styles from shadow dom',
+			function(done) {
+				var fixture = document.getElementById('shadow-fixture2');
+				var shadow = fixture.attachShadow({ mode: 'open' });
+				shadow.innerHTML =
+					'<style>@import "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"; @import "preload-cssom-shadow-blue.css"; .green { background-color: green; }</style>' +
+					'<div class="initialism">Some text</div>' +
+					'<style>.notGreen { background-color: orange; }</style>' +
+					'<div class="green">green</div>' +
+					'<div class="red">red</div>' +
+					'<div class="duplicateGreen">red</div>' +
+					'<h1>Heading</h1>';
+				getPreload(fixture)
+					.then(function(results) {
+						var sheets = results[0];
+						// verify count
+						assert.lengthOf(sheets, 8);
+						// verify that the last non external sheet with shadowId has green selector
+						var nonExternalsheetsWithShadowId = sheets
+							.filter(function(s) {
+								return !s.isExternal;
+							})
+							.filter(function(s) {
+								return s.shadowId;
+							});
+						assertStylesheet(
+							nonExternalsheetsWithShadowId[
+								nonExternalsheetsWithShadowId.length - 2
+							].sheet,
+							'.green',
+							'.green{background-color:green;}'
+						);
+						assertStylesheet(
+							nonExternalsheetsWithShadowId[
+								nonExternalsheetsWithShadowId.length - 1
+							].sheet,
+							'.notGreen',
+							'.notGreen{background-color:orange;}'
+						);
 						done();
 					})
 					.catch(done);