Bug 1878205 [wpt PR 44369] - Change the behavior of clonable to be more opt-in, a=testonly

Automatic update from web-platform-tests
Change the behavior of clonable to be more opt-in

See the discussion here:

whatwg/html#10107 (comment)

The existing *shipped* behavior (i.e. before the `clonable` concept
was introduced) was that any declarative shadow root *within a `<template>`* would be automatically cloned, but no others.

The semi-new behavior is the `clonable` bit concept, in which all
declarative shadow roots have their `clonable` bit set to true, so
they automatically get cloned by `cloneNode()`. That's regardless of
whether they are inside or outside a template.

The new consensus is that the "semi-new" clonable behavior is likely
web-incompatible, because clones will just start getting shadow roots
included. Plus it wasn't very developer-desirable. The new consensus
is therefore to add a `shadowrootclonable` attribute for declarative shadow dom that allows a shadow root to opt-in to this behavior, but
the default for all shadow roots will be `clonable=false`.

This CL implements the new consensus behind the ShadowRootClonable
flag. If the flag is false, the "shipped" behavior will be emulated
via setting `clonable` in an equivalent way.

See these three spec PRs:
  whatwg/dom#1246
  whatwg/html#10069
  whatwg/html#10117

Bug: 1510466
Change-Id: Ice7c7579094eb08b882c4bb44f93045f23b8f222
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5260748
Reviewed-by: David Baron <dbaronchromium.org>
Auto-Submit: Mason Freed <masonfchromium.org>
Commit-Queue: Mason Freed <masonfchromium.org>
Cr-Commit-Position: refs/heads/main{#1258910}

--

wpt-commits: 33d11f1db34802fda00e64ddeb0b7ef040cf65be
wpt-pr: 44369

UltraBlame original commit: 7d4902dfa32c013568c445861c332c29e4c1134f

Author: marco-c

testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-shadow.html

@@ -315,6 +315,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -525,6 +526,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -748,6 +750,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -1036,6 +1039,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style

testing/web-platform/tests/scroll-animations/css/view-timeline-name-shadow.html

@@ -317,6 +317,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -520,6 +521,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -737,6 +739,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style
@@ -1013,6 +1016,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 style

testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-basic.html

@@ -1439,6 +1439,186 @@
 '
 )
 ;
+test
+(
+(
+)
+=
+>
+{
+const
+div
+=
+document
+.
+createElement
+(
+'
+div
+'
+)
+;
+div
+.
+setHTMLUnsafe
+(
+<
+div
+id
+=
+"
+host
+"
+>
+<
+template
+shadowrootmode
+=
+"
+open
+"
+shadowrootclonable
+>
+<
+/
+template
+>
+<
+/
+div
+>
+)
+;
+var
+host
+=
+div
+.
+querySelector
+(
+'
+#
+host
+'
+)
+;
+assert_true
+(
+!
+!
+host
+.
+shadowRoot
+"
+No
+shadow
+root
+found
+"
+)
+;
+assert_true
+(
+host
+.
+shadowRoot
+.
+clonable
+"
+clonable
+should
+be
+true
+"
+)
+;
+div
+.
+setHTMLUnsafe
+(
+<
+div
+id
+=
+"
+host
+"
+>
+<
+template
+shadowrootmode
+=
+"
+open
+"
+>
+<
+/
+template
+>
+<
+/
+div
+>
+)
+;
+host
+=
+div
+.
+querySelector
+(
+'
+#
+host
+'
+)
+;
+assert_true
+(
+!
+!
+host
+.
+shadowRoot
+"
+No
+shadow
+root
+found
+"
+)
+;
+assert_false
+(
+host
+.
+shadowRoot
+.
+clonable
+"
+clonable
+should
+be
+false
+without
+the
+shadowrootclonable
+attribute
+"
+)
+;
+}
+'
+Declarative
+Shadow
+DOM
+:
+clonable
+attribute
+'
+)
+;
 <
 /
 script
@@ -1531,8 +1711,9 @@
 '
 )
 ;
-assert_equals
-(
+const
+leftover
+=
 host
 .
 querySelector
@@ -1541,15 +1722,57 @@
 template
 '
 )
-null
-"
-No
+;
+assert_true
+(
+!
+!
 leftover
+"
+The
+second
+(
+duplicate
+)
 template
-nodes
-from
-either
-root
+should
+be
+left
+in
+the
+DOM
+"
+)
+;
+assert_true
+(
+leftover
+instanceof
+HTMLTemplateElement
+)
+;
+assert_equals
+(
+leftover
+.
+getAttribute
+(
+'
+shadowrootmode
+'
+)
+"
+closed
+"
+)
+;
+assert_equals
+(
+leftover
+.
+shadowRootMode
+"
+closed
 "
 )
 ;
@@ -1595,14 +1818,14 @@
 textContent
 '
 root
-2
+1
 '
 "
 Content
 should
 come
 from
-last
+first
 declarative
 shadow
 root
@@ -1649,6 +1872,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 Content
 <
@@ -2043,6 +2267,10 @@
 declarative
 shadow
 root
+(
+with
+shadowrootclonable
+)
 '
 )
 ;
@@ -2092,6 +2320,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 Content
 <
@@ -2287,6 +2516,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 Content
 <
@@ -2473,6 +2703,7 @@
 shadowrootmode
 =
 open
+shadowrootclonable
 >
 <
 video

testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html

@@ -503,6 +503,7 @@
 =
 open
 shadowrootdelegatesfocus
+shadowrootclonable
 >
 Open
 delegates
@@ -512,19 +513,18 @@
 the
 default
 )
-named
-slot
-assignment
+clonable
 (
+not
 the
 default
 )
-clonable
+named
+slot
+assignment
 (
 the
 default
-for
-declarative
 )
 <
 /
@@ -680,40 +680,6 @@
 '
 )
 ;
-/
-/
-See
-https
-:
-/
-/
-github
-.
-com
-/
-whatwg
-/
-html
-/
-issues
-/
-10107
-:
-the
-behavior
-of
-the
-/
-/
-clonable
-flag
-is
-still
-being
-discussed
-.
-/
-/
 assert_throws_dom
 (
 "
@@ -724,8 +690,6 @@
 =
 >
 {
-/
-/
 open2
 .
 attachShadow
@@ -750,8 +714,6 @@
 }
 )
 ;
-/
-/
 }
 '
 Mismatched

testing/web-platform/tests/shadow-dom/declarative/gethtml.tentative.html

@@ -131,6 +131,7 @@
 mode
 delegatesFocus
 serializable
+clonable
 )
 {
 const
@@ -295,6 +296,7 @@
 delegatesFocus
 :
 delegatesFocus
+clonable
 }
 ;
 let
@@ -390,6 +392,21 @@
 '
 '
 ;
+const
+clonableAttr
+=
+clonable
+?
+'
+shadowrootclonable
+=
+"
+"
+'
+:
+'
+'
+;
 if
 (
 allowsShadowDom
@@ -419,6 +436,9 @@
 {
 serializableAttr
 }
+{
+clonableAttr
+}
 >
 ;
 wrapper
@@ -549,6 +569,9 @@
 {
 serializableAttr
 }
+{
+clonableAttr
+}
 >
 <
 slot
@@ -604,6 +627,14 @@
 expectedSerializable
 )
 ;
+assert_equals
+(
+shadowRoot
+.
+clonable
+clonable
+)
+;
 shadowRoot
 .
 appendChild
@@ -998,6 +1029,11 @@
 {
 serializable
 }
+clonable
+=
+{
+clonable
+}
 .
 :
 '
@@ -1101,6 +1137,17 @@
 for
 (
 const
+clonable
+of
+[
+false
+true
+]
+)
+{
+for
+(
+const
 mode
 of
 [
@@ -1138,13 +1185,15 @@
 mode
 delegatesFocus
 serializable
+clonable
 )
 ;
 }
 }
 }
 }
 }
+}
 else
 {
 testElementType

testing/web-platform/tests/shadow-dom/shadow-root-clonable.html

@@ -584,14 +584,17 @@
 root
 )
 ;
-assert_true
+assert_false
 (
 root
 .
 clonable
 "
 clonable
 is
+*
+not
+*
 automatically
 true
 for
@@ -623,6 +626,135 @@
 assert_true
 (
 !
+clonedRoot
+'
+no
+shadow
+root
+gets
+cloned
+'
+)
+;
+}
+"
+declarative
+shadow
+roots
+do
+*
+not
+*
+get
+clonable
+:
+true
+automatically
+"
+)
+;
+test
+(
+(
+)
+=
+>
+{
+const
+div
+=
+document
+.
+createElement
+(
+"
+div
+"
+)
+;
+div
+.
+setHTMLUnsafe
+(
+'
+<
+div
+>
+<
+template
+shadowrootmode
+=
+open
+shadowrootclonable
+>
+<
+input
+>
+<
+/
+template
+>
+<
+/
+div
+>
+'
+)
+;
+const
+root
+=
+div
+.
+firstElementChild
+.
+shadowRoot
+;
+assert_true
+(
+!
+!
+root
+)
+;
+assert_true
+(
+root
+.
+clonable
+"
+clonable
+gets
+added
+when
+shadowrootclonable
+is
+present
+"
+)
+;
+const
+clone
+=
+div
+.
+cloneNode
+(
+true
+)
+;
+const
+clonedRoot
+=
+clone
+.
+firstElementChild
+.
+shadowRoot
+;
+assert_true
+(
+!
 !
 clonedRoot
 )
@@ -665,11 +797,13 @@
 declarative
 shadow
 roots
-get
+can
+opt
+in
+to
 clonable
-:
-true
-automatically
+with
+shadowrootclonable
 "
 )
 ;
@@ -791,41 +925,14 @@
 assert_true
 (
 !
-!
-clonedRoot
-)
-;
-assert_equals
-(
-clonedRoot
-.
-children
-.
-length
-1
-"
-children
-count
-"
-)
-;
-assert_equals
-(
 clonedRoot
-.
-children
-[
-0
-]
-.
-localName
-"
-input
-"
-"
-children
-content
-"
+'
+no
+shadow
+root
+gets
+cloned
+'
 )
 ;
 }
@@ -835,7 +942,10 @@
 roots
 inside
 templates
-also
+do
+*
+not
+*
 get
 cloned
 automatically