From 88623b23350ddf71bfc7898cb9bffa9e7261cd43 Mon Sep 17 00:00:00 2001
From: Erik Koopmans <erik.koopmans@d2l.com>
Date: Wed, 6 Sep 2023 17:49:50 -0400
Subject: [PATCH] Fix `visible` to work with elements in the Shadow DOM

---
 chai-dom.js   |  6 ++++--
 test/tests.js | 35 ++++++++++++++++++++++-------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/chai-dom.js b/chai-dom.js
index 53e2000..d471888 100644
--- a/chai-dom.js
+++ b/chai-dom.js
@@ -350,7 +350,8 @@
 
   chai.Assertion.addProperty('displayed', function() {
     var el = flag(this, 'object'),
-        actual = el.getRootNode({ composed: true }) === document ? window.getComputedStyle(el).display : el.style.display
+        isAttached = el.getRootNode ? el.getRootNode({ composed: true }) === document : document.body.contains(el),
+        actual = isAttached ? window.getComputedStyle(el).display : el.style.display
 
     this.assert(
       actual !== 'none'
@@ -362,7 +363,8 @@
 
   chai.Assertion.addProperty('visible', function() {
     var el = flag(this, 'object'),
-        actual = document.body.contains(el) ? window.getComputedStyle(el).visibility : el.style.visibility
+        isAttached = el.getRootNode ? el.getRootNode({ composed: true }) === document : document.body.contains(el),
+        actual = isAttached ? window.getComputedStyle(el).visibility : el.style.visibility
 
     this.assert(
       actual !== 'hidden' && actual !== 'collapse'
diff --git a/test/tests.js b/test/tests.js
index 54b1da5..27f74c4 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -32,6 +32,18 @@ describe('DOM assertions', function() {
     })
   })
 
+  class CustomElement extends HTMLElement {
+    constructor() {
+      super()
+      this.attachShadow({ mode: 'open' })
+      var template = document.createElement('template')
+      template.innerHTML = '<style>div { display: none; visibility: hidden; }</style>'
+      this.shadowRoot.appendChild(template.content.cloneNode(true))
+      this.shadowRoot.appendChild(document.createElement('div'))
+    }
+  }
+  window.customElements.define('custom-element', CustomElement)
+
   describe('attr', function() {
     beforeEach(function() {
       subject = parse('<div name="foo"></div>')
@@ -837,14 +849,6 @@ describe('DOM assertions', function() {
   })
 
   describe('displayed', function() {
-    class CustomElement extends HTMLElement {
-      constructor() {
-        super()
-        this.attachShadow({ mode: 'open' })
-        this.shadowRoot.appendChild(document.createElement('div'))
-      }
-    }
-
     var ce = document.createElement('custom-element'),
         div = document.createElement('div'),
         notDisplayedViaStyle = parse('<div style="display: none"></div>'),
@@ -852,8 +856,6 @@ describe('DOM assertions', function() {
         inlineDiv = parse('<div style="display: inline-block"></div>')
 
     before(function() {
-      window.customElements.define('custom-element', CustomElement)
-
       document.styleSheets[1].insertRule('.hidden { display: none; }', 0);
       document.body.appendChild(notDisplayedViaCSS)
       document.body.appendChild(div)
@@ -899,13 +901,14 @@ describe('DOM assertions', function() {
       div.should.be.displayed.and.exist.and.be.ok
     })
 
-    it('passes when the element is in the shadow DOM', function() {
-      ce.shadowRoot.querySelector('div').should.be.displayed
+    it('passes negated when the element is in the shadow DOM', function() {
+      ce.shadowRoot.querySelector('div').should.not.be.displayed
     })
   })
 
   describe('visible', function() {
-    var div = document.createElement('div'),
+    var ce = document.createElement('custom-element'),
+        div = document.createElement('div'),
         hiddenViaStyle = parse('<div style="visibility: hidden"></div>'),
         collapsedViaStyle = parse('<div style="visibility: collapse"></div>'),
         hiddenViaCSS = parse('<div class="invisible"></div>'),
@@ -917,11 +920,13 @@ describe('DOM assertions', function() {
       document.body.appendChild(hiddenViaCSS)
       document.body.appendChild(collapsedViaCSS)
       document.body.appendChild(div)
+      document.body.appendChild(ce)
     })
     after(function() {
       document.body.removeChild(hiddenViaCSS)
       document.body.removeChild(collapsedViaCSS)
       document.body.removeChild(div)
+      document.body.removeChild(ce)
     })
 
     it('passes when visible (any visibility value but hidden or collapse)', function() {
@@ -964,6 +969,10 @@ describe('DOM assertions', function() {
     it('should be chainable', function() {
       div.should.be.visible.and.exist.and.be.ok
     })
+
+    it('passes negated when the element is in the shadow DOM', function() {
+      ce.shadowRoot.querySelector('div').should.not.be.visible
+    })
   })
 
   describe('tagName', function() {