diff --git a/build/tasks/test-webdriver.js b/build/tasks/test-webdriver.js index fb578136ae..33c51b622a 100644 --- a/build/tasks/test-webdriver.js +++ b/build/tasks/test-webdriver.js @@ -41,20 +41,23 @@ module.exports = function(grunt) { .get(url) // Get results .then(function() { - let driverBrowser = driver - .getCapabilities() - .then(capabilities => capabilities.get('browserName')); - return Promise.all([driverBrowser, collectTestResults(driver)]); + return Promise.all([ + driver.getCapabilities(), + collectTestResults(driver) + ]); }) // And process them - .then(function([browser, result]) { - grunt.log.writeln(url + ' [' + browser + ']'); + .then(function([capabilities, result]) { + let browserName = + capabilities.get('browserName') + + (capabilities.get('mobileEmulationEnabled') ? '-mobile' : ''); + grunt.log.writeln(url + ' [' + browserName + ']'); // Remember the errors (result.reports || []).forEach(function(err) { grunt.log.error(err.message); err.url = url; - err.browser = browser; + err.browser = browserName; errors.push(err); }); diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js index d22925f362..d0d2d0af2f 100644 --- a/lib/commons/color/get-background-color.js +++ b/lib/commons/color/get-background-color.js @@ -217,16 +217,29 @@ function sortPageBackground(elmStack) { let bodyIndex = elmStack.indexOf(document.body); let bgNodes = elmStack; + // Body can sometimes appear out of order in the stack: + // 1) Body is not the first element due to negative z-index elements + // 2) Elements are positioned outside of body's rect coordinates + // (see https://github.com/dequelabs/axe-core/issues/1456) + // In those instances we want to reinsert body back into the element stack + // when not using the root document element as the html canvas for bgcolor + // prettier-ignore + let sortBodyElement = + bodyIndex > 1 || // negative z-index elements + bodyIndex === -1; // element does not intersect with body + if ( - // Check that the body background is the page's background - bodyIndex > 1 && // only if there are negative z-index elements + sortBodyElement && !color.elementHasImage(document.documentElement) && color.getOwnBackgroundColor( window.getComputedStyle(document.documentElement) ).alpha === 0 ) { - // Remove body and html from it's current place - bgNodes.splice(bodyIndex, 1); + // Only remove document.body if it was originally contained within the element stack + if (bodyIndex > 1) { + bgNodes.splice(bodyIndex, 1); + } + // Remove document element since body will be used for bgcolor bgNodes.splice(elmStack.indexOf(document.documentElement), 1); // Put the body background as the lowest element diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js index cecc58bcae..88bbad5b53 100644 --- a/test/commons/color/get-background-color.js +++ b/test/commons/color/get-background-color.js @@ -740,6 +740,53 @@ describe('color.getBackgroundColor', function() { assert.closeTo(actual.alpha, 1, 0); }); + it('should return the html canvas inherited from body bgColor when element content does not overlap with body', function() { + fixture.innerHTML = + '