From 7cd2d042bfd10154acfd7c0e254264a5b416ad3e Mon Sep 17 00:00:00 2001
From: Wilco Fiers <wilco.fiers@deque.com>
Date: Thu, 13 Jan 2022 12:35:53 +0100
Subject: [PATCH 1/2] fix(color-contrast): check bg on fg contrast for thin
 text-shadows

---
 lib/checks/color/color-contrast-evaluate.js   |  16 +-
 lib/checks/color/color-contrast.json          |   2 +-
 test/checks/color/color-contrast.js           |  50 +-
 .../rules/color-contrast/text-shadows.html    | 354 +++++++++---
 .../rules/color-contrast/text-shadows.json    | 502 +++++++++---------
 5 files changed, 597 insertions(+), 327 deletions(-)

diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
index 8aa165d37d..e4afe201b9 100644
--- a/lib/checks/color/color-contrast-evaluate.js
+++ b/lib/checks/color/color-contrast-evaluate.js
@@ -71,14 +71,16 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
   if (shadowColors.length === 0) {
     contrast = getContrast(bgColor, fgColor);
   } else if (fgColor && bgColor) {
-    // Thin shadows can pass either by contrasting with the text color
-    // or when contrasting with the background.
     shadowColor = [...shadowColors, bgColor].reduce(flattenShadowColors);
-    const bgContrast = getContrast(bgColor, shadowColor);
-    const fgContrast = getContrast(shadowColor, fgColor);
-    contrast = Math.max(bgContrast, fgContrast);
-    contrastContributor =
-      bgContrast > fgContrast ? 'shadowOnBgColor' : 'fgOnShadowColor';
+    // Compare shadow, bgColor, textColor. Check passes if any is sufficient
+    const fgBgContrast = getContrast(bgColor, fgColor);
+    const bgShContrast = getContrast(bgColor, shadowColor);
+    const fgShContrast = getContrast(shadowColor, fgColor);
+    contrast = Math.max(fgBgContrast, bgShContrast, fgShContrast);
+    if (contrast !== fgBgContrast) {
+      contrastContributor =
+        bgShContrast > fgShContrast ? 'shadowOnBgColor' : 'fgOnShadowColor';
+    }
   }
 
   const ptSize = Math.ceil(fontSize * 72) / 96;
diff --git a/lib/checks/color/color-contrast.json b/lib/checks/color/color-contrast.json
index 52cd48361c..67fdd6c286 100644
--- a/lib/checks/color/color-contrast.json
+++ b/lib/checks/color/color-contrast.json
@@ -17,7 +17,7 @@
       }
     },
     "pseudoSizeThreshold": 0.25,
-    "shadowOutlineEmMax": 0.1
+    "shadowOutlineEmMax": 0.2
   },
   "metadata": {
     "impact": "serious",
diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
index 67613e288f..5fa6b3082e 100644
--- a/test/checks/color/color-contrast.js
+++ b/test/checks/color/color-contrast.js
@@ -794,21 +794,21 @@ describe('color-contrast', function() {
     });
   });
 
-  describe('with shadowDOM', function() {
-    (shadowSupported ? it : xit)(
-      'returns colors across Shadow DOM boundaries',
-      function() {
-        var params = shadowCheckSetup(
-          '<div id="container" style="background-color:black;"></div>',
-          '<p style="color: #333;" id="target">Text</p>'
-        );
-        var container = fixture.querySelector('#container');
-        var result = contrastEvaluate.apply(checkContext, params);
-        assert.isFalse(result);
-        assert.deepEqual(checkContext._relatedNodes, [container]);
-      }
-    );
+  (shadowSupported ? it : xit)(
+    'returns colors across Shadow DOM boundaries',
+    function() {
+      var params = shadowCheckSetup(
+        '<div id="container" style="background-color:black;"></div>',
+        '<p style="color: #333;" id="target">Text</p>'
+      );
+      var container = fixture.querySelector('#container');
+      var result = contrastEvaluate.apply(checkContext, params);
+      assert.isFalse(result);
+      assert.deepEqual(checkContext._relatedNodes, [container]);
+    }
+  );
 
+  describe('with text-shadow', function() {
     it('passes if thin text shadows have sufficient contrast with the text', function() {
       var params = checkSetup(
         '<div id="target" style="background-color: #666; color:#aaa; ' +
@@ -866,7 +866,7 @@ describe('color-contrast', function() {
           '</div>'
       );
       assert.isFalse(contrastEvaluate.apply(checkContext, params));
-      assert.equal(checkContext._data.messageKey, 'fgOnShadowColor');
+      assert.isNull(checkContext._data.messageKey);
     });
 
     it('fails if text shadows do not have sufficient contrast with the background', function() {
@@ -879,5 +879,25 @@ describe('color-contrast', function() {
       assert.isFalse(contrastEvaluate.apply(checkContext, params));
       assert.equal(checkContext._data.messageKey, 'shadowOnBgColor');
     });
+
+    it('fails if thick text shadows don\'t have sufficient contrast', function() {
+      var params = checkSetup(
+        '<div id="target" style="background-color: #aaa; color:#666; ' +
+          'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +
+          '  Hello world' +
+          '</div>'
+      );
+      assert.isTrue(contrastEvaluate.apply(checkContext, params));
+    });
+
+    it('passes if thin text shadows don\'t have sufficient contrast, but the text and background do', function() {
+      var params = checkSetup(
+        '<div id="target" style="background-color: #aaa; color:#666; ' +
+          'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +
+          '  Hello world' +
+          '</div>'
+      );
+      assert.isTrue(contrastEvaluate.apply(checkContext, params));
+    });
   });
 });
diff --git a/test/integration/rules/color-contrast/text-shadows.html b/test/integration/rules/color-contrast/text-shadows.html
index 21b5b18210..980538afde 100644
--- a/test/integration/rules/color-contrast/text-shadows.html
+++ b/test/integration/rules/color-contrast/text-shadows.html
@@ -63,6 +63,10 @@
     color: #aaa;
     background-color: #333;
   }
+  .s6 {
+    color: #444;
+    background-color: #ccc;
+  }
 
   .f1 {
     font-size: 12px;
@@ -230,6 +234,19 @@
       0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
   }
 
+  .r11 i:nth-child(1) {
+    text-shadow: 0 0 0.14em #000;
+  }
+  .r11 i:nth-child(2) {
+    text-shadow: 0 0 0.18em #000;
+  }
+  .r11 i:nth-child(3) {
+    text-shadow: 0 0 0.22em #000;
+  }
+  .r11 i:nth-child(4) {
+    text-shadow: 0 0 0.26em #000;
+  }
+
   .l1 i:nth-child(1) {
     text-shadow: 0 0 0.03em #fff;
   }
@@ -303,220 +320,433 @@
 <section class="s1" id="b1">
   <div class="r0"><i id="sample1">Sample</i></div>
   <div class="r1">
-    <i>b1-r1-i1</i> <i>b1-r1-i2</i> <i>b1-r1-i3</i> <i>b1-r1-i4</i>
+    <i id="b1-r1-i1">b1-r1-i1</i>
+    <i id="b1-r1-i2">b1-r1-i2</i>
+    <i id="b1-r1-i3">b1-r1-i3</i>
+    <i id="b1-r1-i4">b1-r1-i4</i>
   </div>
   <div class="r2">
-    <i>b1-r2-i1</i> <i>b1-r2-i2</i> <i>b1-r2-i3</i> <i>b1-r2-i4</i>
+    <i id="b1-r2-i1">b1-r2-i1</i>
+    <i id="b1-r2-i2">b1-r2-i2</i>
+    <i id="b1-r2-i3">b1-r2-i3</i>
+    <i id="b1-r2-i4">b1-r2-i4</i>
   </div>
   <div class="r3">
-    <i>b1-r3-i1</i> <i>b1-r3-i2</i> <i>b1-r3-i3</i> <i>b1-r3-i4</i>
+    <i id="b1-r3-i1">b1-r3-i1</i>
+    <i id="b1-r3-i2">b1-r3-i2</i>
+    <i id="b1-r3-i3">b1-r3-i3</i>
+    <i id="b1-r3-i4">b1-r3-i4</i>
   </div>
   <div class="r4">
-    <i>b1-r4-i1</i> <i>b1-r4-i2</i> <i>b1-r4-i3</i> <i>b1-r4-i4</i>
+    <i id="b1-r4-i1">b1-r4-i1</i>
+    <i id="b1-r4-i2">b1-r4-i2</i>
+    <i id="b1-r4-i3">b1-r4-i3</i>
+    <i id="b1-r4-i4">b1-r4-i4</i>
   </div>
   <div class="r5">
-    <i>b1-r5-i1</i> <i>b1-r5-i2</i> <i>b1-r5-i3</i> <i>b1-r5-i4</i>
+    <i id="b1-r5-i1">b1-r5-i1</i>
+    <i id="b1-r5-i2">b1-r5-i2</i>
+    <i id="b1-r5-i3">b1-r5-i3</i>
+    <i id="b1-r5-i4">b1-r5-i4</i>
   </div>
 </section>
 
 <section class="s2" id="b2">
   <div class="r0"><i id="sample2">Sample</i></div>
   <div class="r1">
-    <i>b2-r1-i1</i> <i>b2-r1-i2</i> <i>b2-r1-i3</i> <i>b2-r1-i4</i>
+    <i id="b2-r1-i1">b2-r1-i1</i>
+    <i id="b2-r1-i2">b2-r1-i2</i>
+    <i id="b2-r1-i3">b2-r1-i3</i>
+    <i id="b2-r1-i4">b2-r1-i4</i>
   </div>
   <div class="r2">
-    <i>b2-r2-i1</i> <i>b2-r2-i2</i> <i>b2-r2-i3</i> <i>b2-r2-i4</i>
+    <i id="b2-r2-i1">b2-r2-i1</i>
+    <i id="b2-r2-i2">b2-r2-i2</i>
+    <i id="b2-r2-i3">b2-r2-i3</i>
+    <i id="b2-r2-i4">b2-r2-i4</i>
   </div>
   <div class="r3">
-    <i>b2-r3-i1</i> <i>b2-r3-i2</i> <i>b2-r3-i3</i> <i>b2-r3-i4</i>
+    <i id="b2-r3-i1">b2-r3-i1</i>
+    <i id="b2-r3-i2">b2-r3-i2</i>
+    <i id="b2-r3-i3">b2-r3-i3</i>
+    <i id="b2-r3-i4">b2-r3-i4</i>
   </div>
   <div class="r4">
-    <i>b2-r4-i1</i> <i>b2-r4-i2</i> <i>b2-r4-i3</i> <i>b2-r4-i4</i>
+    <i id="b2-r4-i1">b2-r4-i1</i>
+    <i id="b2-r4-i2">b2-r4-i2</i>
+    <i id="b2-r4-i3">b2-r4-i3</i>
+    <i id="b2-r4-i4">b2-r4-i4</i>
   </div>
   <div class="r5">
-    <i>b2-r5-i1</i> <i>b2-r5-i2</i> <i>b2-r5-i3</i> <i>b2-r5-i4</i>
+    <i id="b2-r5-i1">b2-r5-i1</i>
+    <i id="b2-r5-i2">b2-r5-i2</i>
+    <i id="b2-r5-i3">b2-r5-i3</i>
+    <i id="b2-r5-i4">b2-r5-i4</i>
   </div>
 </section>
 
 <section class="s3" id="b3">
   <div class="r1">
-    <i>b3-r1-i1</i> <i>b3-r1-i2</i> <i>b3-r1-i3</i> <i>b3-r1-i4</i>
+    <i id="b3-r1-i1">b3-r1-i1</i>
+    <i id="b3-r1-i2">b3-r1-i2</i>
+    <i id="b3-r1-i3">b3-r1-i3</i>
+    <i id="b3-r1-i4">b3-r1-i4</i>
   </div>
   <div class="r2">
-    <i>b3-r2-i1</i> <i>b3-r2-i2</i> <i>b3-r2-i3</i> <i>b3-r2-i4</i>
+    <i id="b3-r2-i1">b3-r2-i1</i>
+    <i id="b3-r2-i2">b3-r2-i2</i>
+    <i id="b3-r2-i3">b3-r2-i3</i>
+    <i id="b3-r2-i4">b3-r2-i4</i>
   </div>
   <div class="r3">
-    <i>b3-r3-i1</i> <i>b3-r3-i2</i> <i>b3-r3-i3</i> <i>b3-r3-i4</i>
+    <i id="b3-r3-i1">b3-r3-i1</i>
+    <i id="b3-r3-i2">b3-r3-i2</i>
+    <i id="b3-r3-i3">b3-r3-i3</i>
+    <i id="b3-r3-i4">b3-r3-i4</i>
   </div>
   <div class="r4">
-    <i>b3-r4-i1</i> <i>b3-r4-i2</i> <i>b3-r4-i3</i> <i>b3-r4-i4</i>
+    <i id="b3-r4-i1">b3-r4-i1</i>
+    <i id="b3-r4-i2">b3-r4-i2</i>
+    <i id="b3-r4-i3">b3-r4-i3</i>
+    <i id="b3-r4-i4">b3-r4-i4</i>
   </div>
   <div class="r5">
-    <i>b3-r5-i1</i> <i>b3-r5-i2</i> <i>b3-r5-i3</i> <i>b3-r5-i4</i>
+    <i id="b3-r5-i1">b3-r5-i1</i>
+    <i id="b3-r5-i2">b3-r5-i2</i>
+    <i id="b3-r5-i3">b3-r5-i3</i>
+    <i id="b3-r5-i4">b3-r5-i4</i>
   </div>
 </section>
 
 <section class="s4" id="b4">
   <div class="r1">
-    <i>b4-r1-i1</i> <i>b4-r1-i2</i> <i>b4-r1-i3</i> <i>b4-r1-i4</i>
+    <i id="b4-r1-i1">b4-r1-i1</i>
+    <i id="b4-r1-i2">b4-r1-i2</i>
+    <i id="b4-r1-i3">b4-r1-i3</i>
+    <i id="b4-r1-i4">b4-r1-i4</i>
   </div>
   <div class="r2">
-    <i>b4-r2-i1</i> <i>b4-r2-i2</i> <i>b4-r2-i3</i> <i>b4-r2-i4</i>
+    <i id="b4-r2-i1">b4-r2-i1</i>
+    <i id="b4-r2-i2">b4-r2-i2</i>
+    <i id="b4-r2-i3">b4-r2-i3</i>
+    <i id="b4-r2-i4">b4-r2-i4</i>
   </div>
   <div class="r3">
-    <i>b4-r3-i1</i> <i>b4-r3-i2</i> <i>b4-r3-i3</i> <i>b4-r3-i4</i>
+    <i id="b4-r3-i1">b4-r3-i1</i>
+    <i id="b4-r3-i2">b4-r3-i2</i>
+    <i id="b4-r3-i3">b4-r3-i3</i>
+    <i id="b4-r3-i4">b4-r3-i4</i>
   </div>
   <div class="r4">
-    <i>b4-r4-i1</i> <i>b4-r4-i2</i> <i>b4-r4-i3</i> <i>b4-r4-i4</i>
+    <i id="b4-r4-i1">b4-r4-i1</i>
+    <i id="b4-r4-i2">b4-r4-i2</i>
+    <i id="b4-r4-i3">b4-r4-i3</i>
+    <i id="b4-r4-i4">b4-r4-i4</i>
   </div>
   <div class="r5">
-    <i>b4-r5-i1</i> <i>b4-r5-i2</i> <i>b4-r5-i3</i> <i>b4-r5-i4</i>
+    <i id="b4-r5-i1">b4-r5-i1</i>
+    <i id="b4-r5-i2">b4-r5-i2</i>
+    <i id="b4-r5-i3">b4-r5-i3</i>
+    <i id="b4-r5-i4">b4-r5-i4</i>
   </div>
 </section>
 
 <section class="s5" id="b5">
   <div class="r1">
-    <i>b5-r1-i1</i> <i>b5-r1-i2</i> <i>b5-r1-i3</i> <i>b5-r1-i4</i>
+    <i id="b5-r1-i1">b5-r1-i1</i>
+    <i id="b5-r1-i2">b5-r1-i2</i>
+    <i id="b5-r1-i3">b5-r1-i3</i>
+    <i id="b5-r1-i4">b5-r1-i4</i>
   </div>
   <div class="r2">
-    <i>b5-r2-i1</i> <i>b5-r2-i2</i> <i>b5-r2-i3</i> <i>b5-r2-i4</i>
+    <i id="b5-r2-i1">b5-r2-i1</i>
+    <i id="b5-r2-i2">b5-r2-i2</i>
+    <i id="b5-r2-i3">b5-r2-i3</i>
+    <i id="b5-r2-i4">b5-r2-i4</i>
   </div>
   <div class="r3">
-    <i>b5-r3-i1</i> <i>b5-r3-i2</i> <i>b5-r3-i3</i> <i>b5-r3-i4</i>
+    <i id="b5-r3-i1">b5-r3-i1</i>
+    <i id="b5-r3-i2">b5-r3-i2</i>
+    <i id="b5-r3-i3">b5-r3-i3</i>
+    <i id="b5-r3-i4">b5-r3-i4</i>
   </div>
   <div class="r4">
-    <i>b5-r4-i1</i> <i>b5-r4-i2</i> <i>b5-r4-i3</i> <i>b5-r4-i4</i>
+    <i id="b5-r4-i1">b5-r4-i1</i>
+    <i id="b5-r4-i2">b5-r4-i2</i>
+    <i id="b5-r4-i3">b5-r4-i3</i>
+    <i id="b5-r4-i4">b5-r4-i4</i>
   </div>
   <div class="r5">
-    <i>b5-r5-i1</i> <i>b5-r5-i2</i> <i>b5-r5-i3</i> <i>b5-r5-i4</i>
+    <i id="b5-r5-i1">b5-r5-i1</i>
+    <i id="b5-r5-i2">b5-r5-i2</i>
+    <i id="b5-r5-i3">b5-r5-i3</i>
+    <i id="b5-r5-i4">b5-r5-i4</i>
   </div>
 </section>
 
 <section class="s4" id="b6">
   <!-- false negative: "#b6 > .c8 > i:nth-child(4)" -->
   <div class="r6">
-    <i>b6-r1-i1</i> <i>b6-r1-i2</i> <i>b6-r1-i3</i> <i>b6-r1-i4</i>
+    <i id="b6-r1-i1">b6-r1-i1</i>
+    <i id="b6-r1-i2">b6-r1-i2</i>
+    <i id="b6-r1-i3">b6-r1-i3</i>
+    <i id="b6-r1-i4">b6-r1-i4</i>
   </div>
   <div class="r7">
-    <i>b6-r2-i1</i> <i>b6-r2-i2</i> <i>b6-r2-i3</i> <i>b6-r2-i4</i>
+    <i id="b6-r2-i1">b6-r2-i1</i>
+    <i id="b6-r2-i2">b6-r2-i2</i>
+    <i id="b6-r2-i3">b6-r2-i3</i>
+    <i id="b6-r2-i4">b6-r2-i4</i>
   </div>
   <div class="r8">
-    <i>b6-r3-i1</i> <i>b6-r3-i2</i> <i>b6-r3-i3</i> <i>b6-r3-i4</i>
+    <i id="b6-r3-i1">b6-r3-i1</i>
+    <i id="b6-r3-i2">b6-r3-i2</i>
+    <i id="b6-r3-i3">b6-r3-i3</i>
+    <i id="b6-r3-i4">b6-r3-i4</i>
   </div>
   <div class="r9">
-    <i>b6-r4-i1</i> <i>b6-r4-i2</i> <i>b6-r4-i3</i> <i>b6-r4-i4</i>
+    <i id="b6-r4-i1">b6-r4-i1</i>
+    <i id="b6-r4-i2">b6-r4-i2</i>
+    <i id="b6-r4-i3">b6-r4-i3</i>
+    <i id="b6-r4-i4">b6-r4-i4</i>
   </div>
   <div class="r10">
-    <i>b6-r5-i1</i> <i>b6-r5-i2</i> <i>b6-r5-i3</i> <i>b6-r5-i4</i>
+    <i id="b6-r5-i1">b6-r5-i1</i>
+    <i id="b6-r5-i2">b6-r5-i2</i>
+    <i id="b6-r5-i3">b6-r5-i3</i>
+    <i id="b6-r5-i4">b6-r5-i4</i>
   </div>
 </section>
 
 <section class="s2" id="b7">
   <!-- false negative: "#b7 > .c10 > i:nth-child(4)"-->
   <div class="r6">
-    <i>b7-r1-i1</i> <i>b7-r1-i2</i> <i>b7-r1-i3</i> <i>b7-r1-i4</i>
+    <i id="b7-r1-i1">b7-r1-i1</i>
+    <i id="b7-r1-i2">b7-r1-i2</i>
+    <i id="b7-r1-i3">b7-r1-i3</i>
+    <i id="b7-r1-i4">b7-r1-i4</i>
   </div>
   <div class="r7">
-    <i>b7-r2-i1</i> <i>b7-r2-i2</i> <i>b7-r2-i3</i> <i>b7-r2-i4</i>
+    <i id="b7-r2-i1">b7-r2-i1</i>
+    <i id="b7-r2-i2">b7-r2-i2</i>
+    <i id="b7-r2-i3">b7-r2-i3</i>
+    <i id="b7-r2-i4">b7-r2-i4</i>
   </div>
   <div class="r8">
-    <i>b7-r3-i1</i> <i>b7-r3-i2</i> <i>b7-r3-i3</i> <i>b7-r3-i4</i>
+    <i id="b7-r3-i1">b7-r3-i1</i>
+    <i id="b7-r3-i2">b7-r3-i2</i>
+    <i id="b7-r3-i3">b7-r3-i3</i>
+    <i id="b7-r3-i4">b7-r3-i4</i>
   </div>
   <div class="r9">
-    <i>b7-r4-i1</i> <i>b7-r4-i2</i> <i>b7-r4-i3</i> <i>b7-r4-i4</i>
+    <i id="b7-r4-i1">b7-r4-i1</i>
+    <i id="b7-r4-i2">b7-r4-i2</i>
+    <i id="b7-r4-i3">b7-r4-i3</i>
+    <i id="b7-r4-i4">b7-r4-i4</i>
   </div>
   <div class="r10">
-    <i>b7-r5-i1</i> <i>b7-r5-i2</i> <i>b7-r5-i3</i> <i>b7-r5-i4</i>
+    <i id="b7-r5-i1">b7-r5-i1</i>
+    <i id="b7-r5-i2">b7-r5-i2</i>
+    <i id="b7-r5-i3">b7-r5-i3</i>
+    <i id="b7-r5-i4">b7-r5-i4</i>
   </div>
 </section>
 
 <section class="s1" id="b8">
   <div class="r6">
-    <i>b8-r1-i1</i> <i>b8-r1-i2</i> <i>b8-r1-i3</i> <i>b8-r1-i4</i>
+    <i id="b8-r1-i1">b8-r1-i1</i>
+    <i id="b8-r1-i2">b8-r1-i2</i>
+    <i id="b8-r1-i3">b8-r1-i3</i>
+    <i id="b8-r1-i4">b8-r1-i4</i>
   </div>
   <div class="r7">
-    <i>b8-r2-i1</i> <i>b8-r2-i2</i> <i>b8-r2-i3</i> <i>b8-r2-i4</i>
+    <i id="b8-r2-i1">b8-r2-i1</i>
+    <i id="b8-r2-i2">b8-r2-i2</i>
+    <i id="b8-r2-i3">b8-r2-i3</i>
+    <i id="b8-r2-i4">b8-r2-i4</i>
   </div>
   <div class="r8">
-    <i>b8-r3-i1</i> <i>b8-r3-i2</i> <i>b8-r3-i3</i> <i>b8-r3-i4</i>
+    <i id="b8-r3-i1">b8-r3-i1</i>
+    <i id="b8-r3-i2">b8-r3-i2</i>
+    <i id="b8-r3-i3">b8-r3-i3</i>
+    <i id="b8-r3-i4">b8-r3-i4</i>
   </div>
   <div class="r9">
-    <i>b8-r4-i1</i> <i>b8-r4-i2</i> <i>b8-r4-i3</i> <i>b8-r4-i4</i>
+    <i id="b8-r4-i1">b8-r4-i1</i>
+    <i id="b8-r4-i2">b8-r4-i2</i>
+    <i id="b8-r4-i3">b8-r4-i3</i>
+    <i id="b8-r4-i4">b8-r4-i4</i>
   </div>
   <div class="r10">
-    <i>b8-r5-i1</i> <i>b8-r5-i2</i> <i>b8-r5-i3</i> <i>b8-r5-i4</i>
+    <i id="b8-r5-i1">b8-r5-i1</i>
+    <i id="b8-r5-i2">b8-r5-i2</i>
+    <i id="b8-r5-i3">b8-r5-i3</i>
+    <i id="b8-r5-i4">b8-r5-i4</i>
   </div>
 </section>
 
 <section class="s2 r2" id="b9">
   <div class="f1">
-    <i>b9-f1-i1</i> <i>b9-f1-i2</i> <i>b9-f1-i3</i> <i>b9-f1-i4</i>
+    <i id="b9-f1-i1">b9-f1-i1</i>
+    <i id="b9-f1-i2">b9-f1-i2</i>
+    <i id="b9-f1-i3">b9-f1-i3</i>
+    <i id="b9-f1-i4">b9-f1-i4</i>
   </div>
   <div class="f2">
-    <i>b9-f2-i1</i> <i>b9-f2-i2</i> <i>b9-f2-i3</i> <i>b9-f2-i4</i>
+    <i id="b9-f2-i1">b9-f2-i1</i>
+    <i id="b9-f2-i2">b9-f2-i2</i>
+    <i id="b9-f2-i3">b9-f2-i3</i>
+    <i id="b9-f2-i4">b9-f2-i4</i>
   </div>
   <div class="f3">
-    <i>b9-f3-i1</i> <i>b9-f3-i2</i> <i>b9-f3-i3</i> <i>b9-f3-i4</i>
+    <i id="b9-f3-i1">b9-f3-i1</i>
+    <i id="b9-f3-i2">b9-f3-i2</i>
+    <i id="b9-f3-i3">b9-f3-i3</i>
+    <i id="b9-f3-i4">b9-f3-i4</i>
   </div>
   <div class="f4">
-    <i>b9-f4-i1</i> <i>b9-f4-i2</i> <i>b9-f4-i3</i> <i>b9-f4-i4</i>
+    <i id="b9-f4-i1">b9-f4-i1</i>
+    <i id="b9-f4-i2">b9-f4-i2</i>
+    <i id="b9-f4-i3">b9-f4-i3</i>
+    <i id="b9-f4-i4">b9-f4-i4</i>
   </div>
   <div class="f5">
-    <i>b9-f5-i1</i> <i>b9-f5-i2</i> <i>b9-f5-i3</i> <i>b9-f5-i4</i>
+    <i id="b9-f5-i1">b9-f5-i1</i>
+    <i id="b9-f5-i2">b9-f5-i2</i>
+    <i id="b9-f5-i3">b9-f5-i3</i>
+    <i id="b9-f5-i4">b9-f5-i4</i>
   </div>
 </section>
 
 <section class="s1 r1" id="b10">
   <div class="f1">
-    <i>b10-f1-i1</i> <i>b10-f1-i2</i> <i>b10-f1-i3</i> <i>b10-f1-i4</i>
+    <i id="b10-f1-i1">b10-f1-i1</i>
+    <i id="b10-f1-i2">b10-f1-i2</i>
+    <i id="b10-f1-i3">b10-f1-i3</i>
+    <i id="b10-f1-i4">b10-f1-i4</i>
   </div>
   <div class="f2">
-    <i>b10-f2-i1</i> <i>b10-f2-i2</i> <i>b10-f2-i3</i> <i>b10-f2-i4</i>
+    <i id="b10-f2-i1">b10-f2-i1</i>
+    <i id="b10-f2-i2">b10-f2-i2</i>
+    <i id="b10-f2-i3">b10-f2-i3</i>
+    <i id="b10-f2-i4">b10-f2-i4</i>
   </div>
   <div class="f3">
-    <i>b10-f3-i1</i> <i>b10-f3-i2</i> <i>b10-f3-i3</i> <i>b10-f3-i4</i>
+    <i id="b10-f3-i1">b10-f3-i1</i>
+    <i id="b10-f3-i2">b10-f3-i2</i>
+    <i id="b10-f3-i3">b10-f3-i3</i>
+    <i id="b10-f3-i4">b10-f3-i4</i>
   </div>
   <div class="f4">
-    <i>b10-f4-i1</i> <i>b10-f4-i2</i> <i>b10-f4-i3</i> <i>b10-f4-i4</i>
+    <i id="b10-f4-i1">b10-f4-i1</i>
+    <i id="b10-f4-i2">b10-f4-i2</i>
+    <i id="b10-f4-i3">b10-f4-i3</i>
+    <i id="b10-f4-i4">b10-f4-i4</i>
   </div>
   <div class="f5">
-    <i>b10-f5-i1</i> <i>b10-f5-i2</i> <i>b10-f5-i3</i> <i>b10-f5-i4</i>
+    <i id="b10-f5-i1">b10-f5-i1</i>
+    <i id="b10-f5-i2">b10-f5-i2</i>
+    <i id="b10-f5-i3">b10-f5-i3</i>
+    <i id="b10-f5-i4">b10-f5-i4</i>
   </div>
 </section>
 
 <section class="s4 r7" id="b11">
   <div class="f1">
-    <i>b11-f1-i1</i> <i>b11-f1-i2</i> <i>b11-f1-i3</i> <i>b11-f1-i4</i>
+    <i id="b11-f1-i1">b11-f1-i1</i>
+    <i id="b11-f1-i2">b11-f1-i2</i>
+    <i id="b11-f1-i3">b11-f1-i3</i>
+    <i id="b11-f1-i4">b11-f1-i4</i>
   </div>
   <div class="f2">
-    <i>b11-f2-i1</i> <i>b11-f2-i2</i> <i>b11-f2-i3</i> <i>b11-f2-i4</i>
+    <i id="b11-f2-i1">b11-f2-i1</i>
+    <i id="b11-f2-i2">b11-f2-i2</i>
+    <i id="b11-f2-i3">b11-f2-i3</i>
+    <i id="b11-f2-i4">b11-f2-i4</i>
   </div>
   <div class="f3">
-    <i>b11-f3-i1</i> <i>b11-f3-i2</i> <i>b11-f3-i3</i> <i>b11-f3-i4</i>
+    <i id="b11-f3-i1">b11-f3-i1</i>
+    <i id="b11-f3-i2">b11-f3-i2</i>
+    <i id="b11-f3-i3">b11-f3-i3</i>
+    <i id="b11-f3-i4">b11-f3-i4</i>
   </div>
   <div class="f4">
-    <i>b11-f4-i1</i> <i>b11-f4-i2</i> <i>b11-f4-i3</i> <i>b11-f4-i4</i>
+    <i id="b11-f4-i1">b11-f4-i1</i>
+    <i id="b11-f4-i2">b11-f4-i2</i>
+    <i id="b11-f4-i3">b11-f4-i3</i>
+    <i id="b11-f4-i4">b11-f4-i4</i>
   </div>
   <div class="f5">
-    <i>b11-f5-i1</i> <i>b11-f5-i2</i> <i>b11-f5-i3</i> <i>b11-f5-i4</i>
+    <i id="b11-f5-i1">b11-f5-i1</i>
+    <i id="b11-f5-i2">b11-f5-i2</i>
+    <i id="b11-f5-i3">b11-f5-i3</i>
+    <i id="b11-f5-i4">b11-f5-i4</i>
   </div>
 </section>
 
 <section class="s3" id="b12">
   <div class="l1">
-    <i>b12-l1-i1</i> <i>b12-l1-i2</i> <i>b12-l1-i3</i> <i>b12-l1-i4</i>
+    <i id="b12-l1-i1">b12-l1-i1</i>
+    <i id="b12-l1-i2">b12-l1-i2</i>
+    <i id="b12-l1-i3">b12-l1-i3</i>
+    <i id="b12-l1-i4">b12-l1-i4</i>
   </div>
   <div class="l2">
-    <i>b12-l2-i1</i> <i>b12-l2-i2</i> <i>b12-l2-i3</i> <i>b12-l2-i4</i>
+    <i id="b12-l2-i1">b12-l2-i1</i>
+    <i id="b12-l2-i2">b12-l2-i2</i>
+    <i id="b12-l2-i3">b12-l2-i3</i>
+    <i id="b12-l2-i4">b12-l2-i4</i>
   </div>
   <div class="l3">
-    <i>b12-l3-i1</i> <i>b12-l3-i2</i> <i>b12-l3-i3</i> <i>b12-l3-i4</i>
+    <i id="b12-l3-i1">b12-l3-i1</i>
+    <i id="b12-l3-i2">b12-l3-i2</i>
+    <i id="b12-l3-i3">b12-l3-i3</i>
+    <i id="b12-l3-i4">b12-l3-i4</i>
   </div>
   <div class="l4">
-    <i>b12-l4-i1</i> <i>b12-l4-i2</i> <i>b12-l4-i3</i> <i>b12-l4-i4</i>
+    <i id="b12-l4-i1">b12-l4-i1</i>
+    <i id="b12-l4-i2">b12-l4-i2</i>
+    <i id="b12-l4-i3">b12-l4-i3</i>
+    <i id="b12-l4-i4">b12-l4-i4</i>
   </div>
   <div class="l5">
-    <i>b12-l5-i1</i> <i>b12-l5-i2</i> <i>b12-l5-i3</i> <i>b12-l5-i4</i>
+    <i id="b12-l5-i1">b12-l5-i1</i>
+    <i id="b12-l5-i2">b12-l5-i2</i>
+    <i id="b12-l5-i3">b12-l5-i3</i>
+    <i id="b12-l5-i4">b12-l5-i4</i>
+  </div>
+</section>
+
+<section class="s6" id="b13">
+  <div class="f1 r11">
+    <i id="b13-f1-i1">b13-f1-i1</i>
+    <i id="b13-f1-i2">b13-f1-i2</i>
+    <i id="b13-f1-i3">b13-f1-i3</i>
+    <i id="b13-f1-i4">b13-f1-i4</i>
+  </div>
+  <div class="f2 r11">
+    <i id="b13-f2-i1">b13-f2-i1</i>
+    <i id="b13-f2-i2">b13-f2-i2</i>
+    <i id="b13-f2-i3">b13-f2-i3</i>
+    <i id="b13-f2-i4">b13-f2-i4</i>
+  </div>
+  <div class="f3 r11">
+    <i id="b13-f3-i1">b13-f3-i1</i>
+    <i id="b13-f3-i2">b13-f3-i2</i>
+    <i id="b13-f3-i3">b13-f3-i3</i>
+    <i id="b13-f3-i4">b13-f3-i4</i>
+  </div>
+  <div class="f4 r11">
+    <i id="b13-f4-i1">b13-f4-i1</i>
+    <i id="b13-f4-i2">b13-f4-i2</i>
+    <i id="b13-f4-i3">b13-f4-i3</i>
+    <i id="b13-f4-i4">b13-f4-i4</i>
+  </div>
+  <div class="f5 r11">
+    <i id="b13-f5-i1">b13-f5-i1</i>
+    <i id="b13-f5-i2">b13-f5-i2</i>
+    <i id="b13-f5-i3">b13-f5-i3</i>
+    <i id="b13-f5-i4">b13-f5-i4</i>
   </div>
 </section>
 
@@ -531,10 +761,6 @@
       console.log(res);
       /*
 			All these test cases are on the edge of pass and fail. If we ever revisit them, these are the ones could be improved on:
-
-			- False positives:
-				- b5-r3-i1, b5-r3-i2
-				- b7-r3-i1, b7-r3-i2
 			- False negatives:
 				- b3-r1-i1
 				- b4-r1-i1, b4-r2-i1
diff --git a/test/integration/rules/color-contrast/text-shadows.json b/test/integration/rules/color-contrast/text-shadows.json
index 6cc3e775da..81674e45e4 100644
--- a/test/integration/rules/color-contrast/text-shadows.json
+++ b/test/integration/rules/color-contrast/text-shadows.json
@@ -5,269 +5,291 @@
     ["#sample1"],
     ["#sample2"],
 
-    ["#b1 > .r1 > i:nth-child(3)"],
-    ["#b1 > .r1 > i:nth-child(4)"],
-    ["#b1 > .r2 > i:nth-child(2)"],
-    ["#b1 > .r2 > i:nth-child(3)"],
-    ["#b1 > .r2 > i:nth-child(4)"],
-    ["#b1 > .r3 > i:nth-child(1)"],
-    ["#b1 > .r3 > i:nth-child(2)"],
-    ["#b1 > .r3 > i:nth-child(3)"],
-    ["#b1 > .r3 > i:nth-child(4)"],
+    ["#b1-r1-i4"],
+    ["#b1-r2-i2"],
+    ["#b1-r2-i3"],
+    ["#b1-r2-i4"],
+    ["#b1-r3-i1"],
+    ["#b1-r3-i2"],
+    ["#b1-r3-i3"],
+    ["#b1-r3-i4"],
 
-    ["#b2 > .r3 > i:nth-child(1)"],
-    ["#b2 > .r3 > i:nth-child(2)"],
-    ["#b2 > .r3 > i:nth-child(3)"],
-    ["#b2 > .r3 > i:nth-child(4)"],
-    ["#b2 > .r4 > i:nth-child(4)"],
-    ["#b2 > .r4 > i:nth-child(1)"],
-    ["#b2 > .r4 > i:nth-child(2)"],
-    ["#b2 > .r4 > i:nth-child(3)"],
-    ["#b2 > .r5 > i:nth-child(3)"],
-    ["#b2 > .r5 > i:nth-child(4)"],
+    ["#b2-r3-i1"],
+    ["#b2-r3-i2"],
+    ["#b2-r3-i3"],
+    ["#b2-r3-i4"],
+    ["#b2-r4-i4"],
+    ["#b2-r4-i1"],
+    ["#b2-r4-i2"],
+    ["#b2-r4-i3"],
+    ["#b2-r5-i4"],
 
-    ["#b3 > .r1 > i:nth-child(3)"],
-    ["#b3 > .r1 > i:nth-child(4)"],
-    ["#b3 > .r2 > i:nth-child(1)"],
-    ["#b3 > .r2 > i:nth-child(2)"],
-    ["#b3 > .r2 > i:nth-child(3)"],
-    ["#b3 > .r2 > i:nth-child(4)"],
-    ["#b3 > .r3 > i:nth-child(1)"],
-    ["#b3 > .r3 > i:nth-child(2)"],
-    ["#b3 > .r3 > i:nth-child(3)"],
-    ["#b3 > .r3 > i:nth-child(4)"],
-    ["#b3 > .r4 > i:nth-child(3)"],
-    ["#b3 > .r4 > i:nth-child(4)"],
+    ["#b3-r1-i3"],
+    ["#b3-r1-i4"],
+    ["#b3-r2-i1"],
+    ["#b3-r2-i2"],
+    ["#b3-r2-i3"],
+    ["#b3-r2-i4"],
+    ["#b3-r3-i1"],
+    ["#b3-r3-i2"],
+    ["#b3-r3-i3"],
+    ["#b3-r3-i4"],
+    ["#b3-r4-i3"],
+    ["#b3-r4-i4"],
 
-    ["#b4 > .r2 > i:nth-child(2)"],
-    ["#b4 > .r2 > i:nth-child(3)"],
-    ["#b4 > .r2 > i:nth-child(4)"],
-    ["#b4 > .r3 > i:nth-child(1)"],
-    ["#b4 > .r3 > i:nth-child(2)"],
-    ["#b4 > .r3 > i:nth-child(3)"],
-    ["#b4 > .r3 > i:nth-child(4)"],
-    ["#b4 > .r4 > i:nth-child(1)"],
-    ["#b4 > .r4 > i:nth-child(2)"],
-    ["#b4 > .r4 > i:nth-child(3)"],
-    ["#b4 > .r4 > i:nth-child(4)"],
-    ["#b4 > .r5 > i:nth-child(1)"],
-    ["#b4 > .r5 > i:nth-child(2)"],
-    ["#b4 > .r5 > i:nth-child(3)"],
-    ["#b4 > .r5 > i:nth-child(4)"],
+    ["#b4-r2-i2"],
+    ["#b4-r2-i3"],
+    ["#b4-r2-i4"],
+    ["#b4-r3-i1"],
+    ["#b4-r3-i2"],
+    ["#b4-r3-i3"],
+    ["#b4-r3-i4"],
+    ["#b4-r4-i1"],
+    ["#b4-r4-i2"],
+    ["#b4-r4-i3"],
+    ["#b4-r4-i4"],
+    ["#b4-r5-i1"],
+    ["#b4-r5-i2"],
+    ["#b4-r5-i3"],
+    ["#b4-r5-i4"],
 
-    ["#b5 > .r3 > i:nth-child(1)"],
-    ["#b5 > .r3 > i:nth-child(2)"],
-    ["#b5 > .r3 > i:nth-child(3)"],
-    ["#b5 > .r3 > i:nth-child(4)"],
-    ["#b5 > .r4 > i:nth-child(3)"],
-    ["#b5 > .r4 > i:nth-child(4)"],
-    ["#b3 > .r4 > i:nth-child(1)"],
-    ["#b3 > .r4 > i:nth-child(2)"],
-    ["#b5 > .r5 > i:nth-child(3)"],
-    ["#b5 > .r5 > i:nth-child(4)"],
+    ["#b5-r3-i4"],
+    ["#b5-r4-i4"],
+    ["#b3-r4-i1"],
+    ["#b3-r4-i2"],
+    ["#b5-r5-i4"],
 
-    ["#b6 > .r8 > i:nth-child(1)"],
-    ["#b6 > .r8 > i:nth-child(2)"],
-    ["#b6 > .r8 > i:nth-child(3)"],
-    ["#b6 > .r9 > i:nth-child(1)"],
-    ["#b6 > .r9 > i:nth-child(2)"],
-    ["#b6 > .r9 > i:nth-child(3)"],
-    ["#b6 > .r9 > i:nth-child(4)"],
-    ["#b6 > .r10 > i:nth-child(3)"],
-    ["#b6 > .r10 > i:nth-child(4)"],
+    ["#b6-r3-i1"],
+    ["#b6-r3-i2"],
+    ["#b6-r3-i3"],
+    ["#b6-r4-i1"],
+    ["#b6-r4-i2"],
+    ["#b6-r4-i3"],
+    ["#b6-r4-i4"],
+    ["#b6-r5-i4"],
 
-    ["#b7 > .r8 > i:nth-child(1)"],
-    ["#b7 > .r8 > i:nth-child(2)"],
-    ["#b7 > .r9 > i:nth-child(3)"],
-    ["#b7 > .r9 > i:nth-child(4)"],
-    ["#b7 > .r10 > i:nth-child(3)"],
-    ["#b7 > .r10 > i:nth-child(4)"],
+    ["#b7-r4-i4"],
+    ["#b7-r5-i4"],
 
-    ["#b8 > .r6 > i:nth-child(3)"],
-    ["#b8 > .r6 > i:nth-child(4)"],
-    ["#b8 > .r7 > i:nth-child(1)"],
-    ["#b8 > .r7 > i:nth-child(2)"],
-    ["#b8 > .r7 > i:nth-child(3)"],
-    ["#b8 > .r7 > i:nth-child(4)"],
-    ["#b8 > .r8 > i:nth-child(1)"],
-    ["#b8 > .r8 > i:nth-child(2)"],
-    ["#b8 > .r8 > i:nth-child(3)"],
-    ["#b8 > .r8 > i:nth-child(4)"],
-    ["#b8 > .r9 > i:nth-child(1)"],
-    ["#b8 > .r9 > i:nth-child(2)"],
-    ["#b8 > .r9 > i:nth-child(3)"],
-    ["#b8 > .r9 > i:nth-child(4)"],
-    ["#b8 > .r10 > i:nth-child(3)"],
-    ["#b8 > .r10 > i:nth-child(4)"],
+    ["#b8-r1-i4"],
+    ["#b8-r2-i1"],
+    ["#b8-r2-i2"],
+    ["#b8-r2-i3"],
+    ["#b8-r2-i4"],
+    ["#b8-r3-i1"],
+    ["#b8-r3-i2"],
+    ["#b8-r3-i3"],
+    ["#b8-r3-i4"],
+    ["#b8-r4-i1"],
+    ["#b8-r4-i2"],
+    ["#b8-r4-i3"],
+    ["#b8-r4-i4"],
+    ["#b8-r5-i4"],
 
-    ["#b9 > .f1 > i:nth-child(1)"],
-    ["#b9 > .f1 > i:nth-child(2)"],
-    ["#b9 > .f1 > i:nth-child(3)"],
-    ["#b9 > .f1 > i:nth-child(4)"],
-    ["#b9 > .f2 > i:nth-child(1)"],
-    ["#b9 > .f2 > i:nth-child(2)"],
-    ["#b9 > .f2 > i:nth-child(3)"],
-    ["#b9 > .f2 > i:nth-child(4)"],
-    ["#b9 > .f3 > i:nth-child(1)"],
-    ["#b9 > .f3 > i:nth-child(2)"],
-    ["#b9 > .f3 > i:nth-child(3)"],
-    ["#b9 > .f3 > i:nth-child(4)"],
+    ["#b9-f1-i1"],
+    ["#b9-f1-i2"],
+    ["#b9-f1-i3"],
+    ["#b9-f1-i4"],
+    ["#b9-f2-i1"],
+    ["#b9-f2-i2"],
+    ["#b9-f2-i3"],
+    ["#b9-f2-i4"],
+    ["#b9-f3-i1"],
+    ["#b9-f3-i2"],
+    ["#b9-f3-i3"],
+    ["#b9-f3-i4"],
 
-    ["#b10 > .f1 > i:nth-child(3)"],
-    ["#b10 > .f1 > i:nth-child(4)"],
-    ["#b10 > .f2 > i:nth-child(3)"],
-    ["#b10 > .f2 > i:nth-child(4)"],
-    ["#b10 > .f3 > i:nth-child(3)"],
-    ["#b10 > .f3 > i:nth-child(4)"],
-    ["#b10 > .f4 > i:nth-child(3)"],
-    ["#b10 > .f4 > i:nth-child(4)"],
-    ["#b10 > .f5 > i:nth-child(3)"],
-    ["#b10 > .f5 > i:nth-child(4)"],
+    ["#b10-f1-i4"],
+    ["#b10-f2-i4"],
+    ["#b10-f3-i4"],
+    ["#b10-f4-i4"],
+    ["#b10-f5-i4"],
 
-    ["#b11 > .f1 > i:nth-child(1)"],
-    ["#b11 > .f1 > i:nth-child(2)"],
-    ["#b11 > .f2 > i:nth-child(1)"],
-    ["#b11 > .f2 > i:nth-child(2)"],
-    ["#b11 > .f3 > i:nth-child(1)"],
-    ["#b11 > .f3 > i:nth-child(2)"],
+    ["#b11-f1-i1"],
+    ["#b11-f1-i2"],
+    ["#b11-f1-i3"],
+    ["#b11-f2-i1"],
+    ["#b11-f2-i2"],
+    ["#b11-f2-i3"],
+    ["#b11-f3-i1"],
+    ["#b11-f3-i2"],
+    ["#b11-f3-i3"],
 
-    [".l1 > i:nth-child(1)"],
-    [".l2 > i:nth-child(1)"],
-    [".l3 > i:nth-child(1)"],
-    [".l4 > i:nth-child(1)"],
-    [".l5 > i:nth-child(1)"],
-    [".l4 > i:nth-child(2)"],
-    [".l5 > i:nth-child(2)"],
-    [".l5 > i:nth-child(3)"]
+    ["#b12-l1-i1"],
+    ["#b12-l2-i1"],
+    ["#b12-l3-i1"],
+    ["#b12-l4-i1"],
+    ["#b12-l5-i1"],
+    ["#b12-l4-i2"],
+    ["#b12-l5-i2"],
+    ["#b12-l5-i3"],
+
+    ["#b13-f1-i3"],
+    ["#b13-f1-i4"],
+    ["#b13-f2-i3"],
+    ["#b13-f2-i4"],
+    ["#b13-f3-i3"],
+    ["#b13-f3-i4"]
   ],
   "passes": [
-    ["#b1 > .r1 > i:nth-child(1)"],
-    ["#b1 > .r1 > i:nth-child(2)"],
-    ["#b1 > .r2 > i:nth-child(1)"],
-    ["#b1 > .r4 > i:nth-child(1)"],
-    ["#b1 > .r4 > i:nth-child(2)"],
-    ["#b1 > .r4 > i:nth-child(3)"],
-    ["#b1 > .r4 > i:nth-child(4)"],
-    ["#b1 > .r5 > i:nth-child(1)"],
-    ["#b1 > .r5 > i:nth-child(2)"],
-    ["#b1 > .r5 > i:nth-child(3)"],
-    ["#b1 > .r5 > i:nth-child(4)"],
+    ["#b1-r1-i1"],
+    ["#b1-r1-i2"],
+    ["#b1-r2-i1"],
+    ["#b1-r4-i1"],
+    ["#b1-r4-i2"],
+    ["#b1-r4-i3"],
+    ["#b1-r4-i4"],
+    ["#b1-r5-i1"],
+    ["#b1-r5-i2"],
+    ["#b1-r5-i3"],
+    ["#b1-r5-i4"],
+
+    ["#b2-r1-i1"],
+    ["#b2-r1-i2"],
+    ["#b2-r1-i3"],
+    ["#b2-r1-i4"],
+    ["#b2-r2-i1"],
+    ["#b2-r2-i2"],
+    ["#b2-r2-i3"],
+    ["#b2-r2-i4"],
+    ["#b2-r5-i1"],
+    ["#b2-r5-i2"],
+    ["#b2-r5-i3"],
 
-    ["#b2 > .r1 > i:nth-child(1)"],
-    ["#b2 > .r1 > i:nth-child(2)"],
-    ["#b2 > .r1 > i:nth-child(3)"],
-    ["#b2 > .r1 > i:nth-child(4)"],
-    ["#b2 > .r2 > i:nth-child(1)"],
-    ["#b2 > .r2 > i:nth-child(2)"],
-    ["#b2 > .r2 > i:nth-child(3)"],
-    ["#b2 > .r2 > i:nth-child(4)"],
-    ["#b2 > .r5 > i:nth-child(1)"],
-    ["#b2 > .r5 > i:nth-child(2)"],
+    ["#b3-r1-i1"],
+    ["#b3-r1-i2"],
+    ["#b1-r1-i3"],
+    ["#b3-r5-i1"],
+    ["#b3-r5-i2"],
+    ["#b3-r5-i3"],
+    ["#b3-r5-i4"],
 
-    ["#b3 > .r1 > i:nth-child(1)"],
-    ["#b3 > .r1 > i:nth-child(2)"],
-    ["#b3 > .r5 > i:nth-child(1)"],
-    ["#b3 > .r5 > i:nth-child(2)"],
-    ["#b3 > .r5 > i:nth-child(3)"],
-    ["#b3 > .r5 > i:nth-child(4)"],
+    ["#b4-r1-i1"],
+    ["#b4-r1-i2"],
+    ["#b4-r1-i3"],
+    ["#b4-r1-i4"],
+    ["#b4-r2-i1"],
 
-    ["#b4 > .r1 > i:nth-child(1)"],
-    ["#b4 > .r1 > i:nth-child(2)"],
-    ["#b4 > .r1 > i:nth-child(3)"],
-    ["#b4 > .r1 > i:nth-child(4)"],
-    ["#b4 > .r2 > i:nth-child(1)"],
+    ["#b5-r1-i1"],
+    ["#b5-r1-i2"],
+    ["#b5-r1-i3"],
+    ["#b5-r1-i4"],
+    ["#b5-r2-i1"],
+    ["#b5-r2-i2"],
+    ["#b5-r2-i3"],
+    ["#b5-r2-i4"],
+    ["#b5-r3-i1"],
+    ["#b5-r3-i2"],
+    ["#b5-r3-i3"],
+    ["#b5-r4-i1"],
+    ["#b5-r4-i2"],
+    ["#b5-r4-i3"],
+    ["#b5-r5-i1"],
+    ["#b5-r5-i2"],
+    ["#b5-r5-i3"],
 
-    ["#b5 > .r1 > i:nth-child(1)"],
-    ["#b5 > .r1 > i:nth-child(2)"],
-    ["#b5 > .r1 > i:nth-child(3)"],
-    ["#b5 > .r1 > i:nth-child(4)"],
-    ["#b5 > .r2 > i:nth-child(1)"],
-    ["#b5 > .r2 > i:nth-child(2)"],
-    ["#b5 > .r2 > i:nth-child(3)"],
-    ["#b5 > .r2 > i:nth-child(4)"],
-    ["#b5 > .r4 > i:nth-child(1)"],
-    ["#b5 > .r4 > i:nth-child(2)"],
-    ["#b5 > .r5 > i:nth-child(1)"],
-    ["#b5 > .r5 > i:nth-child(2)"],
+    ["#b6-r1-i1"],
+    ["#b6-r1-i2"],
+    ["#b6-r1-i3"],
+    ["#b6-r1-i4"],
+    ["#b6-r2-i1"],
+    ["#b6-r2-i2"],
+    ["#b6-r2-i3"],
+    ["#b6-r2-i4"],
+    ["#b6-r3-i4"],
+    ["#b6-r5-i1"],
+    ["#b6-r5-i2"],
+    ["#b6-r5-i3"],
 
-    ["#b6 > .r6 > i:nth-child(1)"],
-    ["#b6 > .r6 > i:nth-child(2)"],
-    ["#b6 > .r6 > i:nth-child(3)"],
-    ["#b6 > .r6 > i:nth-child(4)"],
-    ["#b6 > .r7 > i:nth-child(1)"],
-    ["#b6 > .r7 > i:nth-child(2)"],
-    ["#b6 > .r7 > i:nth-child(3)"],
-    ["#b6 > .r7 > i:nth-child(4)"],
-    ["#b6 > .r8 > i:nth-child(4)"],
-    ["#b6 > .r10 > i:nth-child(1)"],
-    ["#b6 > .r10 > i:nth-child(2)"],
+    ["#b7-r1-i1"],
+    ["#b7-r1-i2"],
+    ["#b7-r1-i3"],
+    ["#b7-r1-i4"],
+    ["#b7-r2-i1"],
+    ["#b7-r2-i2"],
+    ["#b7-r2-i3"],
+    ["#b7-r2-i4"],
+    ["#b7-r3-i1"],
+    ["#b7-r3-i2"],
+    ["#b7-r3-i3"],
+    ["#b7-r3-i4"],
+    ["#b7-r4-i1"],
+    ["#b7-r4-i2"],
+    ["#b7-r4-i3"],
+    ["#b7-r5-i1"],
+    ["#b7-r5-i2"],
+    ["#b7-r5-i3"],
 
-    ["#b7 > .r6 > i:nth-child(1)"],
-    ["#b7 > .r6 > i:nth-child(2)"],
-    ["#b7 > .r6 > i:nth-child(3)"],
-    ["#b7 > .r6 > i:nth-child(4)"],
-    ["#b7 > .r7 > i:nth-child(1)"],
-    ["#b7 > .r7 > i:nth-child(2)"],
-    ["#b7 > .r7 > i:nth-child(3)"],
-    ["#b7 > .r7 > i:nth-child(4)"],
-    ["#b7 > .r8 > i:nth-child(3)"],
-    ["#b7 > .r8 > i:nth-child(4)"],
-    ["#b7 > .r9 > i:nth-child(1)"],
-    ["#b7 > .r9 > i:nth-child(2)"],
-    ["#b7 > .r10 > i:nth-child(1)"],
-    ["#b7 > .r10 > i:nth-child(2)"],
+    ["#b8-r1-i1"],
+    ["#b8-r1-i2"],
+    ["#b8-r1-i3"],
+    ["#b8-r5-i1"],
+    ["#b8-r5-i2"],
+    ["#b8-r5-i3"],
 
-    ["#b8 > .r6 > i:nth-child(1)"],
-    ["#b8 > .r6 > i:nth-child(2)"],
-    ["#b8 > .r10 > i:nth-child(1)"],
-    ["#b8 > .r10 > i:nth-child(2)"],
+    ["#b9-f4-i1"],
+    ["#b9-f4-i2"],
+    ["#b9-f4-i3"],
+    ["#b9-f4-i4"],
+    ["#b9-f5-i1"],
+    ["#b9-f5-i2"],
+    ["#b9-f5-i3"],
+    ["#b9-f5-i4"],
 
-    ["#b9 > .f4 > i:nth-child(1)"],
-    ["#b9 > .f4 > i:nth-child(2)"],
-    ["#b9 > .f4 > i:nth-child(3)"],
-    ["#b9 > .f4 > i:nth-child(4)"],
-    ["#b9 > .f5 > i:nth-child(1)"],
-    ["#b9 > .f5 > i:nth-child(2)"],
-    ["#b9 > .f5 > i:nth-child(3)"],
-    ["#b9 > .f5 > i:nth-child(4)"],
+    ["#b10-f1-i1"],
+    ["#b10-f1-i2"],
+    ["#b10-f1-i3"],
+    ["#b10-f2-i1"],
+    ["#b10-f2-i2"],
+    ["#b10-f2-i3"],
+    ["#b10-f3-i1"],
+    ["#b10-f3-i2"],
+    ["#b10-f3-i3"],
+    ["#b10-f4-i1"],
+    ["#b10-f4-i2"],
+    ["#b10-f4-i3"],
+    ["#b10-f5-i1"],
+    ["#b10-f5-i2"],
+    ["#b10-f5-i3"],
 
-    ["#b10 > .f1 > i:nth-child(1)"],
-    ["#b10 > .f1 > i:nth-child(2)"],
-    ["#b10 > .f2 > i:nth-child(1)"],
-    ["#b10 > .f2 > i:nth-child(2)"],
-    ["#b10 > .f3 > i:nth-child(1)"],
-    ["#b10 > .f3 > i:nth-child(2)"],
-    ["#b10 > .f4 > i:nth-child(1)"],
-    ["#b10 > .f4 > i:nth-child(2)"],
-    ["#b10 > .f5 > i:nth-child(1)"],
-    ["#b10 > .f5 > i:nth-child(2)"],
+    ["#b11-f1-i4"],
+    ["#b11-f2-i4"],
+    ["#b11-f3-i4"],
+    ["#b11-f4-i3"],
+    ["#b11-f4-i4"],
+    ["#b11-f4-i1"],
+    ["#b11-f4-i2"],
+    ["#b11-f5-i3"],
+    ["#b11-f5-i4"],
+    ["#b11-f5-i1"],
+    ["#b11-f5-i2"],
 
-    ["#b11 > .f1 > i:nth-child(3)"],
-    ["#b11 > .f1 > i:nth-child(4)"],
-    ["#b11 > .f2 > i:nth-child(3)"],
-    ["#b11 > .f2 > i:nth-child(4)"],
-    ["#b11 > .f3 > i:nth-child(3)"],
-    ["#b11 > .f3 > i:nth-child(4)"],
-    ["#b11 > .f4 > i:nth-child(3)"],
-    ["#b11 > .f4 > i:nth-child(4)"],
-    ["#b11 > .f4 > i:nth-child(1)"],
-    ["#b11 > .f4 > i:nth-child(2)"],
-    ["#b11 > .f5 > i:nth-child(3)"],
-    ["#b11 > .f5 > i:nth-child(4)"],
-    ["#b11 > .f5 > i:nth-child(1)"],
-    ["#b11 > .f5 > i:nth-child(2)"],
+    ["#b12-l1-i2"],
+    ["#b12-l1-i3"],
+    ["#b12-l1-i4"],
+    ["#b12-l2-i2"],
+    ["#b12-l2-i3"],
+    ["#b12-l2-i4"],
+    ["#b12-l3-i2"],
+    ["#b12-l3-i3"],
+    ["#b12-l3-i4"],
+    ["#b12-l4-i3"],
+    ["#b12-l4-i4"],
+    ["#b12-l5-i4"],
 
-    [".l1 > i:nth-child(2)"],
-    [".l1 > i:nth-child(3)"],
-    [".l1 > i:nth-child(4)"],
-    [".l2 > i:nth-child(2)"],
-    [".l2 > i:nth-child(3)"],
-    [".l2 > i:nth-child(4)"],
-    [".l3 > i:nth-child(2)"],
-    [".l3 > i:nth-child(3)"],
-    [".l3 > i:nth-child(4)"],
-    [".l4 > i:nth-child(3)"],
-    [".l4 > i:nth-child(4)"],
-    [".l5 > i:nth-child(4)"]
+    ["#b13-f1-i1"],
+    ["#b13-f1-i2"],
+    ["#b13-f2-i1"],
+    ["#b13-f2-i2"],
+    ["#b13-f3-i1"],
+    ["#b13-f3-i2"],
+    ["#b13-f4-i1"],
+    ["#b13-f4-i2"],
+    ["#b13-f4-i3"],
+    ["#b13-f4-i4"],
+    ["#b13-f5-i1"],
+    ["#b13-f5-i2"],
+    ["#b13-f5-i3"],
+    ["#b13-f5-i4"]
   ]
 }

From f91fb0f5a0af0a2d9c88d53c9b5349e6820b8b84 Mon Sep 17 00:00:00 2001
From: Wilco Fiers <wilco.fiers@deque.com>
Date: Thu, 13 Jan 2022 12:53:31 +0100
Subject: [PATCH 2/2] fix color-contrast fail7

---
 test/integration/rules/color-contrast/color-contrast.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
index 8d3c1d8ece..a1e2ed0997 100644
--- a/test/integration/rules/color-contrast/color-contrast.html
+++ b/test/integration/rules/color-contrast/color-contrast.html
@@ -65,7 +65,7 @@
 
 <div
   id="fail7"
-  style="color: #000; background: #777; text-shadow: black 0 0 3px"
+  style="color: #000; background: #777; text-shadow: black 0 0 .2em"
 >
   Hello world
 </div>