axe-core/test/integration/full/contrast/shadow-dom.js

Accessibility engine for automated Web UI testing

describe('color-contrast shadow dom test', function () {
	'use strict';

	var shadowSupported = axe.testUtils.shadowSupport.v1;

	before(function() {
		var  fixture = document.querySelector('#fixture');
		if (shadowSupported) {
			var  shadow = fixture.attachShadow({mode: 'open'});
			shadow.innerHTML = '<button style="background-color:red;color:white;">Go!</button>' +
			'<span style="color:#ccc;">Text</span>' +
			'<div><label style="color:#ccc;">Text<input type="text"></label></div>' +
			'<div style="background-color:black; height:20px;">' +
				'<div style="color:#666; position:absolute;">Text</div>' +
			'</div>';
		}
	});

	describe('violations', function () {
		(shadowSupported ? it : xit)('should find issues in shadow tree', function (done) {
			axe.run('#fixture', { runOnly: { type: 'rule', values: ['color-contrast'] } }, function (err, results) {
				assert.isNull(err);
				assert.lengthOf(results.violations, 1);
				assert.lengthOf(results.violations[0].nodes, 2);
				assert.equal(results.violations[0].nodes[1].any[0].data.bgColor, '#000000');
				assert.lengthOf(results.incomplete, 0);
				done();
			});
		});
	});

});