🌐 AI搜索 & 代理 主页
Skip to content

Commit 9b77def

Browse files
SaptakSmgol
SaptakS
authored and
mgol
committed
Core: Recognize Shadow DOM in attachment checks
Allow `isAttached` to check Shadow DOM for attachment. Fixes gh-3504 Closes gh-3996 Ref gh-3977
1 parent 549b32a commit 9b77def

File tree

8 files changed

+138
-15
lines changed

8 files changed

+138
-15
lines changed

‎src/core/isAttached.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
define( [
2+
"../core",
3+
"../var/documentElement",
4+
"../selector" // jQuery.contains
5+
], function( jQuery, documentElement ) {
6+
"use strict";
7+
8+
var isAttached = function( elem ) {
9+
return jQuery.contains( elem.ownerDocument, elem );
10+
},
11+
composed = { composed: true };
12+
13+
// Check attachment across shadow DOM boundaries when possible (gh-3504)
14+
if ( documentElement.attachShadow ) {
15+
isAttached = function( elem ) {
16+
return jQuery.contains( elem.ownerDocument, elem ) ||
17+
elem.getRootNode( composed ) === elem.ownerDocument;
18+
};
19+
}
20+
21+
return isAttached;
22+
} );

‎src/css/curCSS.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
define( [
22
"../core",
3-
"../var/isAttached",
3+
"../core/isAttached",
44
"./var/rboxStyle",
55
"./var/rnumnonpx",
66
"./var/getStyles",

‎src/css/var/isHiddenWithinTree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
define( [
22
"../../core",
3-
"../../var/isAttached"
3+
"../../core/isAttached"
44

55
// css is assumed
66
], function( jQuery, isAttached ) {

‎src/manipulation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
define( [
22
"./core",
3-
"./var/isAttached",
3+
"./core/isAttached",
44
"./var/concat",
55
"./var/isFunction",
66
"./var/push",

‎src/manipulation/buildFragment.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
define( [
22
"../core",
33
"../core/toType",
4-
"../var/isAttached",
4+
"../core/isAttached",
55
"./var/rtagName",
66
"./var/rscriptType",
77
"./wrapMap",

‎src/var/isAttached.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎test/unit/css.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -641,6 +641,63 @@ QUnit.test( "show/hide detached nodes", function( assert ) {
641641
span.remove();
642642
} );
643643

644+
QUnit[ document.body.attachShadow ? "test" : "skip" ]( "show/hide shadow child nodes", function( assert ) {
645+
assert.expect( 28 );
646+
jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
647+
var shadowHost = document.querySelector( "#shadowHost" );
648+
var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
649+
shadowRoot.innerHTML = "" +
650+
"<style>.hidden{display: none;}</style>" +
651+
"<div class='hidden' id='shadowdiv'>" +
652+
" <p class='hidden' id='shadowp'>" +
653+
" <a href='#' class='hidden' id='shadowa'></a>" +
654+
" </p>" +
655+
" <code class='hidden' id='shadowcode'></code>" +
656+
" <pre class='hidden' id='shadowpre'></pre>" +
657+
" <span class='hidden' id='shadowspan'></span>" +
658+
"</div>" +
659+
"<table class='hidden' id='shadowtable'>" +
660+
" <thead class='hidden' id='shadowthead'>" +
661+
" <tr class='hidden' id='shadowtr'>" +
662+
" <th class='hidden' id='shadowth'></th>" +
663+
" </tr>" +
664+
" </thead>" +
665+
" <tbody class='hidden' id='shadowtbody'>" +
666+
" <tr class='hidden'>" +
667+
" <td class='hidden' id='shadowtd'></td>" +
668+
" </tr>" +
669+
" </tbody>" +
670+
"</table>" +
671+
"<ul class='hidden' id='shadowul'>" +
672+
" <li class='hidden' id='shadowli'></li>" +
673+
"</ul>";
674+
675+
var test = {
676+
"div": "block",
677+
"p": "block",
678+
"a": "inline",
679+
"code": "inline",
680+
"pre": "block",
681+
"span": "inline",
682+
"table": "table",
683+
"thead": "table-header-group",
684+
"tbody": "table-row-group",
685+
"tr": "table-row",
686+
"th": "table-cell",
687+
"td": "table-cell",
688+
"ul": "block",
689+
"li": "list-item"
690+
};
691+
692+
jQuery.each( test, function( selector, expected ) {
693+
var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
694+
var $shadowChild = jQuery( shadowChild );
695+
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
696+
$shadowChild.show();
697+
assert.strictEqual( $shadowChild.css( "display" ), expected, "Show using correct display type for " + selector );
698+
} );
699+
} );
700+
644701
QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
645702
assert.expect( 3 );
646703

@@ -966,6 +1023,29 @@ QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "detached to
9661023
"cascade-hidden element in detached tree" );
9671024
} );
9681025

1026+
QUnit[ jQuery.find.compile && jQuery.fn.toggle && document.body.attachShadow ? "test" : "skip" ]( "shadow toggle()", function( assert ) {
1027+
assert.expect( 4 );
1028+
jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
1029+
var shadowHost = document.querySelector( "#shadowHost" );
1030+
var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
1031+
shadowRoot.innerHTML = "" +
1032+
"<style>.hidden{display: none;}</style>" +
1033+
"<div id='shadowHiddenChild' class='hidden'></div>" +
1034+
"<div id='shadowChild'></div>";
1035+
var shadowChild = shadowRoot.querySelector( "#shadowChild" );
1036+
var shadowHiddenChild = shadowRoot.querySelector( "#shadowHiddenChild" );
1037+
1038+
var $shadowChild = jQuery( shadowChild );
1039+
assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1040+
$shadowChild.toggle();
1041+
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1042+
1043+
$shadowChild = jQuery( shadowHiddenChild );
1044+
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1045+
$shadowChild.toggle();
1046+
assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1047+
} );
1048+
9691049
QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
9701050
assert.expect( 4 );
9711051

‎test/unit/effects.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,38 @@ supportjQuery.each( hideOptions, function( type, setup ) {
220220

221221
assert.expectJqData( this, $span, "olddisplay" );
222222
} );
223+
224+
QUnit[ document.body.attachShadow ? "test" : "skip" ](
225+
"Persist correct display value - " + type + " hidden, shadow child", function( assert ) {
226+
assert.expect( 3 );
227+
228+
jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
229+
230+
var shadowHost = document.querySelector( "#shadowHost" );
231+
var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
232+
shadowRoot.innerHTML = "<style>.hidden{display: none;}</style>" +
233+
"<span id='shadowChild' class='hidden'></span>";
234+
var shadowChild = shadowRoot.querySelector( "#shadowChild" );
235+
236+
var $shadowChild = jQuery( shadowChild );
237+
var displayNone = "none";
238+
var display = "inline";
239+
var clock = this.clock;
240+
241+
$shadowChild.fadeIn( 100, function() {
242+
assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
243+
$shadowChild.fadeOut( 100, function() {
244+
assert.equal( $shadowChild.css( "display" ), displayNone, "Expecting shadow display: " + displayNone );
245+
$shadowChild.fadeIn( 100, function() {
246+
assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
247+
} );
248+
} );
249+
} );
250+
251+
clock.tick( 300 );
252+
253+
assert.expectJqData( this, $shadowChild, "olddisplay" );
254+
} );
223255
} );
224256

225257
QUnit.test( "animate(Hash, Object, Function)", function( assert ) {

0 commit comments

Comments
 (0)