From e3d4ef13a1db9bf77398cb862960180fe7899da5 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 16:39:35 -0400 Subject: [PATCH 1/7] test: refactor get-background-color tests with color asserts --- test/commons/color/get-background-color.js | 321 +++++++-------------- 1 file changed, 108 insertions(+), 213 deletions(-) diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js index fb76e89328..55e8997adf 100644 --- a/test/commons/color/get-background-color.js +++ b/test/commons/color/get-background-color.js @@ -7,6 +7,37 @@ describe('color.getBackgroundColor', function () { var origBodyBg; var origHtmlBg; + /** + * Assert that two Colors are equal. + * @param {axe.commons.color.Color[]} actual + * @param {axe.commons.color.Color[]} expected + */ + function assertColorsEqual(actual, expected) { + assert.equal(actual.red, expected.red, 'red'); + assert.equal(actual.green, expected.green, 'green'); + assert.equal(actual.blue, expected.blue, 'blue'); + assert.equal(actual.alpha, expected.alpha, 'alpha'); + } + + /** + * Assert that two Colors are close-to-equal. + * @param {axe.commons.color.Color[]} actual + * @param {axe.commons.color.Color[]} expected + * @param {number} threshold How much each RGB value may differ by + * @param {number} alphaThreshold How much the alpha channel may differ by + */ + function assertColorsClose( + actual, + expected, + threshold = 0.5, + alphaThreshold = 0.1 + ) { + assert.closeTo(actual.red, expected.red, threshold, 'red'); + assert.closeTo(actual.green, expected.green, threshold, 'green'); + assert.closeTo(actual.blue, expected.blue, threshold, 'blue'); + assert.closeTo(actual.alpha, expected.alpha, alphaThreshold, 'alpha'); + } + before(function () { origBodyBg = document.body.style.background; origHtmlBg = document.documentElement.style.background; @@ -31,10 +62,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(128, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -55,11 +83,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [target, pos]); }); @@ -75,10 +99,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [target, under]); }); @@ -101,11 +122,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [target, under]); }); @@ -120,10 +137,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [target, parent]); }); @@ -138,10 +152,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [target, parent]); }); @@ -155,10 +166,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(102, 153, 51, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); }); it('should apply opacity from an ancestor not in the element stack', function () { @@ -173,10 +181,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(102, 153, 51, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); }); it('should return null if containing parent has a background image and is non-opaque', function () { @@ -195,16 +200,13 @@ describe('color.getBackgroundColor', function () { assert.equal(axe.commons.color.incompleteData.get('bgColor'), 'bgImage'); }); - it('should return white if transparency goes all the way up to document', function () { + it('should return body color if transparency goes all the way up to document', function () { fixture.innerHTML = '
'; var target = fixture.querySelector('#target'); axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); }); it('should return null if there is a background image', function () { @@ -272,10 +274,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 128, 0, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [target]); }); @@ -324,9 +323,8 @@ describe('color.getBackgroundColor', function () { document.getElementById('target'), [] ); - assert.equal(Math.round(actual.blue), 255); - assert.equal(Math.round(actual.red), 255); - assert.equal(Math.round(actual.green), 255); + var expected = new axe.commons.color.Color(255, 255, 255); + assertColorsClose(actual, expected); }); it('should return null if an absolutely positioned element partially obsures background', function () { @@ -362,10 +360,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -384,10 +379,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -406,10 +398,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -428,10 +417,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -450,10 +436,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -472,10 +455,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -491,10 +471,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.notEqual(bgNodes, [parent]); }); @@ -508,10 +485,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); }); it('handles nested inline elements in the middle of a text', function () { @@ -527,10 +501,8 @@ describe('color.getBackgroundColor', function () { var bgNodes = []; axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); - assert.equal(actual.red, 0); - assert.equal(actual.green, 255); - assert.equal(actual.blue, 255); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 255, 255, 1); + assertColorsEqual(actual, expected); }); it('should return null for inline elements with position:absolute', function () { @@ -560,10 +532,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.notEqual(bgNodes, [parent]); }); @@ -586,10 +555,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -609,10 +575,7 @@ describe('color.getBackgroundColor', function () { var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -630,10 +593,7 @@ describe('color.getBackgroundColor', function () { var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -655,10 +615,7 @@ describe('color.getBackgroundColor', function () { assert.deepEqual(bgNodes, [shifted]); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('should return null when encountering background images during visual traversal', function () { @@ -715,10 +672,7 @@ describe('color.getBackgroundColor', function () { var expected = new axe.commons.color.Color(0, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns negative z-index elements when body has a background', function () { @@ -736,10 +690,7 @@ describe('color.getBackgroundColor', function () { var expected = new axe.commons.color.Color(0, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('should return null for negative z-index element when html and body have a background', function () { @@ -768,11 +719,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(fixture, []); var expected = new axe.commons.color.Color(255, 255, 255, 1); - - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('should return the body bgColor when content does not overlap', function () { @@ -783,11 +730,8 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var target = fixture.querySelector('#target'); var actual = axe.commons.color.getBackgroundColor(target, []); - - assert.closeTo(actual.red, 255, 0); - assert.closeTo(actual.green, 255, 0); - assert.closeTo(actual.blue, 255, 0); - assert.closeTo(actual.alpha, 1, 0); + var expected = new axe.commons.color.Color(255, 255, 255, 1); + assertColorsEqual(actual, expected); }); it('should return the html canvas inherited from body bgColor when element content does not overlap with body', function () { @@ -801,17 +745,16 @@ describe('color.getBackgroundColor', function () { document.body.style.background = '#000'; document.body.style.margin = 0; - axe.testUtils.flatTreeSetup(fixture); - var target = fixture.querySelector('#target'); - var actual = axe.commons.color.getBackgroundColor(target, []); - - assert.closeTo(actual.red, 0, 0); - assert.closeTo(actual.green, 0, 0); - assert.closeTo(actual.blue, 0, 0); - assert.closeTo(actual.alpha, 1, 0); - - document.body.style.height = originalHeight; - document.body.style.margin = originalMargin; + try { + axe.testUtils.flatTreeSetup(fixture); + var target = fixture.querySelector('#target'); + var actual = axe.commons.color.getBackgroundColor(target, []); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); + } finally { + document.body.style.height = originalHeight; + document.body.style.margin = originalMargin; + } }); it('should return the html canvas bgColor when element content does not overlap with body', function () { @@ -824,16 +767,15 @@ describe('color.getBackgroundColor', function () { document.body.style.background = '#0f0'; document.documentElement.style.background = '#f00'; - axe.testUtils.flatTreeSetup(fixture); - var target = fixture.querySelector('#target'); - var actual = axe.commons.color.getBackgroundColor(target, []); - - assert.closeTo(actual.red, 255, 0); - assert.closeTo(actual.green, 0, 0); - assert.closeTo(actual.blue, 0, 0); - assert.closeTo(actual.alpha, 1, 0); - - document.body.style.height = originalHeight; + try { + axe.testUtils.flatTreeSetup(fixture); + var target = fixture.querySelector('#target'); + var actual = axe.commons.color.getBackgroundColor(target, []); + var expected = new axe.commons.color.Color(255, 0, 0, 1); + assertColorsEqual(actual, expected); + } finally { + document.body.style.height = originalHeight; + } }); it('should apply mix-blend-mode', function () { @@ -870,10 +812,8 @@ describe('color.getBackgroundColor', function () { var target = shadow.querySelector('#shadowTarget'); var actual = axe.commons.color.getBackgroundColor(target, []); - assert.closeTo(actual.red, 0, 0); - assert.closeTo(actual.green, 0, 0); - assert.closeTo(actual.blue, 0, 0); - assert.closeTo(actual.alpha, 1, 0); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); } ); @@ -890,11 +830,8 @@ describe('color.getBackgroundColor', function () { var target = shadow.querySelector('#shadowTarget'); var actual = axe.commons.color.getBackgroundColor(target, [], false); - - assert.equal(actual.red, 0); - assert.equal(actual.green, 0); - assert.equal(actual.blue, 0); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); } ); @@ -911,11 +848,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - - assert.equal(actual.red, expected.red); - assert.equal(actual.green, expected.green); - assert.equal(actual.blue, expected.blue); - assert.equal(actual.alpha, expected.alpha); + assertColorsEqual(actual, expected); } ); @@ -933,10 +866,8 @@ describe('color.getBackgroundColor', function () { var target = shadow.querySelector('#shadowTarget'); axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, []); - assert.equal(actual.red, 255); - assert.equal(actual.green, 255); - assert.equal(actual.blue, 255); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(255, 255, 255, 1); + assertColorsEqual(actual, expected); } ); @@ -954,10 +885,8 @@ describe('color.getBackgroundColor', function () { var elm2 = document.querySelector('#elm2'); axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(elm2, []); - assert.equal(actual.red, 0); - assert.equal(actual.blue, 0); - assert.equal(actual.green, 0); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); } ); @@ -983,10 +912,8 @@ describe('color.getBackgroundColor', function () { var elm3 = shadow2.querySelector('#elm3'); axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(elm3, []); - assert.closeTo(actual.red, 128, 2); - assert.closeTo(actual.blue, 128, 2); - assert.closeTo(actual.green, 128, 2); - assert.closeTo(actual.alpha, 1, 0); + var expected = new axe.commons.color.Color(128, 128, 128, 1); + assertColorsClose(actual, expected, 2, 0); } ); @@ -1002,10 +929,8 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var target = shadow.querySelector('#shadowTarget'); var actual = axe.commons.color.getBackgroundColor(target, []); - assert.equal(actual.red, 0); - assert.equal(actual.green, 0); - assert.equal(actual.blue, 0); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); } ); @@ -1036,10 +961,8 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var linkElm = div.querySelector('a'); var actual = axe.commons.color.getBackgroundColor(linkElm, []); - assert.equal(actual.red, 0); - assert.equal(actual.green, 0); - assert.equal(actual.blue, 0); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); } ); @@ -1056,10 +979,7 @@ describe('color.getBackgroundColor', function () { // is 128 without the shadow var expected = new axe.commons.color.Color(145, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -1072,11 +992,8 @@ describe('color.getBackgroundColor', function () { var bgNodes = []; axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); - - assert.equal(actual.red, 0); - assert.equal(actual.green, 0); - assert.equal(actual.blue, 0); - assert.equal(actual.alpha, 1); + var expected = new axe.commons.color.Color(0, 0, 0, 1); + assertColorsEqual(actual, expected); }); it('ignores text-shadows thinner than shadowOutlineEmMax', function () { @@ -1091,10 +1008,7 @@ describe('color.getBackgroundColor', function () { // is 128 without the shadow var expected = new axe.commons.color.Color(145, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); describe('body and document', function () { @@ -1108,11 +1022,7 @@ describe('color.getBackgroundColor', function () { [] ); var expected = new axe.commons.color.Color(255, 0, 0, 1); - - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns the body background even when the body is MUCH larger than the screen', function () { @@ -1126,10 +1036,7 @@ describe('color.getBackgroundColor', function () { ); var expected = new axe.commons.color.Color(255, 0, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns the html background', function () { @@ -1145,10 +1052,7 @@ describe('color.getBackgroundColor', function () { document.body.removeAttribute('style'); var expected = new axe.commons.color.Color(0, 255, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns the html background when body does not cover the element', function () { @@ -1164,10 +1068,7 @@ describe('color.getBackgroundColor', function () { ); var expected = new axe.commons.color.Color(0, 255, 0, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns the body background when body does cover the element', function () { @@ -1182,10 +1083,7 @@ describe('color.getBackgroundColor', function () { ); var expected = new axe.commons.color.Color(0, 0, 255, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); it('returns both the html and body background if the body has alpha', function () { @@ -1200,10 +1098,7 @@ describe('color.getBackgroundColor', function () { ); var expected = new axe.commons.color.Color(0, 128, 128, 1); - assert.closeTo(actual.red, expected.red, 0.5); - assert.closeTo(actual.green, expected.green, 0.5); - assert.closeTo(actual.blue, expected.blue, 0.5); - assert.closeTo(actual.alpha, expected.alpha, 0.1); + assertColorsClose(actual, expected); }); }); }); From 6c41a25e5de5e940054a9b555f2b32f399b7fdda Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 16:57:00 -0400 Subject: [PATCH 2/7] test: normalize background colors in get-background-color hooks --- test/commons/color/get-background-color.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js index 55e8997adf..9d10af6ce9 100644 --- a/test/commons/color/get-background-color.js +++ b/test/commons/color/get-background-color.js @@ -43,14 +43,23 @@ describe('color.getBackgroundColor', function () { origHtmlBg = document.documentElement.style.background; }); - afterEach(function () { - document.body.style.background = origBodyBg; - document.documentElement.style.background = origHtmlBg; + beforeEach(function () { + // This normalizes the default mocha behavior of setting a different background + // based on prefers-color-scheme settings. + document.body.style.background = '#fff'; + document.documentElement.style.background = 'unset'; + }); + afterEach(function () { axe.commons.color.incompleteData.clear(); axe._tree = undefined; }); + after(function () { + document.body.style.background = origBodyBg; + document.documentElement.style.background = origHtmlBg; + }); + it('should return the blended color if it has no background set', function () { fixture.innerHTML = '
' + From 59cbdb1c0b8aef10089300408dd2e2408c6e02ff Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 16:59:13 -0400 Subject: [PATCH 3/7] test: refactor and improve assert output in assertRectsEqual --- .../dom/get-visible-child-text-rects.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/test/commons/dom/get-visible-child-text-rects.js b/test/commons/dom/get-visible-child-text-rects.js index 242e9453be..126e79d037 100644 --- a/test/commons/dom/get-visible-child-text-rects.js +++ b/test/commons/dom/get-visible-child-text-rects.js @@ -14,20 +14,20 @@ describe('dom.getVisibleChildTextRects', () => { } /** - * Asset that two DOMRect arrays are equal. - * @param {DOMRect[]} rectAs - * @param {DOMRect[]} rectBs + * Assert that two DOMRect arrays are equal. + * @param {DOMRect[]} actualRects + * @param {DOMRect[]} expectedRects */ - function assertRectsEqual(rectAs, rectBs) { - assert.equal(rectAs.length, rectBs.length); - rectAs.forEach((rect, index) => { - const rectA = rectAs[index]; - const rectB = rectBs[index]; - - assert.approximately(rectA.left, rectB.left, 1); - assert.approximately(rectA.top, rectB.top, 1); - assert.approximately(rectA.width, rectB.width, 1); - assert.approximately(rectA.height, rectB.height, 1); + function assertRectsEqual(actualRects, expectedRects) { + assert.equal(actualRects.length, expectedRects.length); + actualRects.forEach((rect, index) => { + const actual = actualRects[index]; + const expected = expectedRects[index]; + + assert.approximately(actual.left, expected.left, 1, 'left'); + assert.approximately(actual.top, expected.top, 1, 'top'); + assert.approximately(actual.width, expected.width, 1, 'width'); + assert.approximately(actual.height, expected.height, 1, 'height'); }); } From 371ce56d1ee65c22a3e05902d9d80c2a61ec90f4 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 17:00:12 -0400 Subject: [PATCH 4/7] test: fix integration test server ipv6 compat --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3caafd20e6..9b5575fb9a 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ } }, "scripts": { - "start": "http-server -p 9876 --silent", + "start": "http-server -a \"\" -p 9876 --silent", "develop": "grunt dev --force", "api-docs": "jsdoc --configure .jsdoc.json", "build": "grunt", From 3c4c0578214ade1d6bec7d8afb68753767d4a077 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 17:02:47 -0400 Subject: [PATCH 5/7] test: normalize background colors in get-foreground-color hooks --- test/commons/color/get-foreground-color.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/commons/color/get-foreground-color.js b/test/commons/color/get-foreground-color.js index 50b7ea5526..2600fc3d88 100644 --- a/test/commons/color/get-foreground-color.js +++ b/test/commons/color/get-foreground-color.js @@ -2,6 +2,8 @@ describe('color.getForegroundColor', () => { const { getForegroundColor, Color } = axe.commons.color; const { queryFixture, queryShadowFixture } = axe.testUtils; + var origBodyBg; + function assertSameColor(actual, expected, margin = 0) { assert.closeTo(actual.red, expected.red, margin); assert.closeTo(actual.green, expected.green, margin); @@ -10,11 +12,25 @@ describe('color.getForegroundColor', () => { assert.closeTo(actual.alpha, expected.alpha, margin / 255); } + before(() => { + origBodyBg = document.body.style.background; + }); + + beforeEach(() => { + // This normalizes the default mocha behavior of setting a different background + // based on prefers-color-scheme settings. + document.body.style.background = '#fff'; + }); + afterEach(() => { axe.commons.color.incompleteData.clear(); document.body.scrollTop = 0; }); + after(() => { + document.body.style.background = origBodyBg; + }); + it('returns the CSS color property', () => { const target = queryFixture( '
Hello World
' From 4fdbdeea8b7420b421d9d3d070d6652e4ae8f11a Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 17:14:00 -0400 Subject: [PATCH 6/7] test: fix light-mode color assumption in dialog integration test --- test/integration/full/dialog/dialog.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/full/dialog/dialog.html b/test/integration/full/dialog/dialog.html index e1168db4cf..07847f14d3 100644 --- a/test/integration/full/dialog/dialog.html +++ b/test/integration/full/dialog/dialog.html @@ -22,12 +22,12 @@
-
+
Contrast failure
-
+
Contrast failure
From 317da528f0c9b6d7d67606b2d8c24bb52f43076e Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 13 Jun 2023 18:41:24 -0400 Subject: [PATCH 7/7] resolve PR comments --- test/commons/color/get-background-color.js | 78 ++++++++-------------- test/commons/color/get-foreground-color.js | 10 --- test/testutils.js | 8 ++- 3 files changed, 34 insertions(+), 62 deletions(-) diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js index 9d10af6ce9..e20abb6d43 100644 --- a/test/commons/color/get-background-color.js +++ b/test/commons/color/get-background-color.js @@ -4,20 +4,6 @@ describe('color.getBackgroundColor', function () { var fixture = document.getElementById('fixture'); var shadowSupported = axe.testUtils.shadowSupport.v1; - var origBodyBg; - var origHtmlBg; - - /** - * Assert that two Colors are equal. - * @param {axe.commons.color.Color[]} actual - * @param {axe.commons.color.Color[]} expected - */ - function assertColorsEqual(actual, expected) { - assert.equal(actual.red, expected.red, 'red'); - assert.equal(actual.green, expected.green, 'green'); - assert.equal(actual.blue, expected.blue, 'blue'); - assert.equal(actual.alpha, expected.alpha, 'alpha'); - } /** * Assert that two Colors are close-to-equal. @@ -38,11 +24,6 @@ describe('color.getBackgroundColor', function () { assert.closeTo(actual.alpha, expected.alpha, alphaThreshold, 'alpha'); } - before(function () { - origBodyBg = document.body.style.background; - origHtmlBg = document.documentElement.style.background; - }); - beforeEach(function () { // This normalizes the default mocha behavior of setting a different background // based on prefers-color-scheme settings. @@ -55,11 +36,6 @@ describe('color.getBackgroundColor', function () { axe._tree = undefined; }); - after(function () { - document.body.style.background = origBodyBg; - document.documentElement.style.background = origHtmlBg; - }); - it('should return the blended color if it has no background set', function () { fixture.innerHTML = '
' + @@ -161,7 +137,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(64, 64, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [target, parent]); }); @@ -175,7 +151,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(102, 153, 51, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('should apply opacity from an ancestor not in the element stack', function () { @@ -190,7 +166,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(102, 153, 51, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('should return null if containing parent has a background image and is non-opaque', function () { @@ -215,7 +191,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('should return null if there is a background image', function () { @@ -283,7 +259,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 128, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [target]); }); @@ -369,7 +345,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -388,7 +364,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -407,7 +383,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -426,7 +402,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -445,7 +421,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -464,7 +440,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -480,7 +456,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.notEqual(bgNodes, [parent]); }); @@ -494,7 +470,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('handles nested inline elements in the middle of a text', function () { @@ -511,7 +487,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('should return null for inline elements with position:absolute', function () { @@ -541,7 +517,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.notEqual(bgNodes, [parent]); }); @@ -564,7 +540,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(243, 243, 243, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); assert.deepEqual(bgNodes, [parent]); }); @@ -740,7 +716,7 @@ describe('color.getBackgroundColor', function () { var target = fixture.querySelector('#target'); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('should return the html canvas inherited from body bgColor when element content does not overlap with body', function () { @@ -759,7 +735,7 @@ describe('color.getBackgroundColor', function () { var target = fixture.querySelector('#target'); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } finally { document.body.style.height = originalHeight; document.body.style.margin = originalMargin; @@ -781,7 +757,7 @@ describe('color.getBackgroundColor', function () { var target = fixture.querySelector('#target'); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(255, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } finally { document.body.style.height = originalHeight; } @@ -822,7 +798,7 @@ describe('color.getBackgroundColor', function () { var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -840,7 +816,7 @@ describe('color.getBackgroundColor', function () { var target = shadow.querySelector('#shadowTarget'); var actual = axe.commons.color.getBackgroundColor(target, [], false); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -857,7 +833,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -876,7 +852,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(255, 255, 255, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -895,7 +871,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(elm2, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -939,7 +915,7 @@ describe('color.getBackgroundColor', function () { var target = shadow.querySelector('#shadowTarget'); var actual = axe.commons.color.getBackgroundColor(target, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -971,7 +947,7 @@ describe('color.getBackgroundColor', function () { var linkElm = div.querySelector('a'); var actual = axe.commons.color.getBackgroundColor(linkElm, []); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); } ); @@ -1002,7 +978,7 @@ describe('color.getBackgroundColor', function () { axe.testUtils.flatTreeSetup(fixture); var actual = axe.commons.color.getBackgroundColor(target, bgNodes); var expected = new axe.commons.color.Color(0, 0, 0, 1); - assertColorsEqual(actual, expected); + assert.deepEqual(actual, expected); }); it('ignores text-shadows thinner than shadowOutlineEmMax', function () { diff --git a/test/commons/color/get-foreground-color.js b/test/commons/color/get-foreground-color.js index 2600fc3d88..06b31cc752 100644 --- a/test/commons/color/get-foreground-color.js +++ b/test/commons/color/get-foreground-color.js @@ -2,8 +2,6 @@ describe('color.getForegroundColor', () => { const { getForegroundColor, Color } = axe.commons.color; const { queryFixture, queryShadowFixture } = axe.testUtils; - var origBodyBg; - function assertSameColor(actual, expected, margin = 0) { assert.closeTo(actual.red, expected.red, margin); assert.closeTo(actual.green, expected.green, margin); @@ -12,10 +10,6 @@ describe('color.getForegroundColor', () => { assert.closeTo(actual.alpha, expected.alpha, margin / 255); } - before(() => { - origBodyBg = document.body.style.background; - }); - beforeEach(() => { // This normalizes the default mocha behavior of setting a different background // based on prefers-color-scheme settings. @@ -27,10 +21,6 @@ describe('color.getForegroundColor', () => { document.body.scrollTop = 0; }); - after(() => { - document.body.style.background = origBodyBg; - }); - it('returns the CSS color property', () => { const target = queryFixture( '
Hello World
' diff --git a/test/testutils.js b/test/testutils.js index 843441bbf4..d0b7af2b8b 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -17,6 +17,11 @@ var originalAudit = axe._audit; var originalRules = axe._audit.rules; var originalCommons = (commons = axe.commons); +// Global chai configuration +if (window.chai) { + window.chai.config.truncateThreshold = 0; +} + // add fixture to the body if it's not already var fixture = document.getElementById('fixture'); if (!fixture) { @@ -597,8 +602,9 @@ if (typeof beforeEach !== 'undefined' && typeof afterEach !== 'undefined') { } } - // reset body styles + // reset html and body styles document.body.removeAttribute('style'); + document.documentElement.removeAttribute('style'); }); }