Add ShadowRoot clonable attribute

https://bugs.webkit.org/show_bug.cgi?id=266227

Reviewed by Chris Dumez.

Added the attribute proposed in whatwg/dom#1237.

* LayoutTests/fast/shadow-dom/cloneable-shadow-root.html:
* Source/WebCore/dom/ShadowRoot.idl:

Canonical link: https://commits.webkit.org/272096@main

LayoutTests/fast/shadow-dom/cloneable-shadow-root.html

@@ -12,6 +12,7 @@
  test(() => {
  const host = document.createElement('div');
  const shadowRoot = host.attachShadow({mode});
+ assert_false(shadowRoot.cloneable);
 
  const clonedHost = host.cloneNode(true);
  assert_true(!!clonedHost.attachShadow({mode}));
@@ -28,6 +29,7 @@
  test(() => {
  const host = document.createElement('div');
  const shadowRoot = host.attachShadow({mode, cloneable: true});
+ assert_true(shadowRoot.cloneable);
 
  const clonedHost = host.cloneNode(true);
  assert_throws_dom('NotSupportedError', () => {
@@ -44,6 +46,7 @@
  test(() => {
  const host = document.createElement('div');
  const shadowRoot = host.attachShadow({mode, cloneable: true});
+ assert_true(shadowRoot.cloneable);
  const clonedHost = host.cloneNode(true);
  assert_equals(!!clonedHost.shadowRoot, mode == 'open');
  }, `Cloning ShadowRoot in "${mode}" mode clones shadow root mode`);
@@ -56,6 +59,7 @@
  test(() => {
  const host = document.createElement('div');
  const shadowRoot = host.attachShadow({mode, cloneable: true, delegatesFocus});
+ assert_true(shadowRoot.cloneable);
  shadowRoot.innerHTML = '<input onfocus="window.didFocusInputElement = true">';
 
  const clonedHost = host.cloneNode(true);
@@ -79,6 +83,7 @@
  const host = document.createElement('span');
  host.innerHTML = '<div style="width: 100px; height: 100px; display: inline-block;"></div>';
  const shadowRoot = host.attachShadow({mode, cloneable: true, slotAssignment: 'manual'});
+ assert_true(shadowRoot.cloneable);
  shadowRoot.innerHTML = '<slot></slot>';
  const clonedHost = host.cloneNode(true);
  if (mode == 'open')
@@ -92,6 +97,7 @@
  const host = document.createElement('span');
  host.innerHTML = '<div style="width: 100px; height: 100px; display: inline-block;"></div>';
  const shadowRoot = host.attachShadow({mode, cloneable: true, slotAssignment: 'named'});
+ assert_true(shadowRoot.cloneable);
  shadowRoot.innerHTML = '<slot></slot>';
  const clonedHost = host.cloneNode(true);
  if (mode == 'open')
@@ -109,6 +115,7 @@
  test(() => {
  const host = document.createElement('span');
  const shadowRoot = host.attachShadow({mode, cloneable: true});
+ assert_true(shadowRoot.cloneable);
  shadowRoot.innerHTML = '<div style="width: 100px; height: 100px; display: inline-block;"><div></div></div>';
  const clonedHost = host.cloneNode(true);
  if (mode == 'open')

Source/WebCore/dom/ShadowRoot.idl

@@ -31,6 +31,7 @@
  readonly attribute ShadowRootMode mode;
  readonly attribute boolean delegatesFocus;
  [ImplementedAs=slotAssignmentMode, EnabledBySetting=ImperativeSlotAPIEnabled] readonly attribute SlotAssignmentMode slotAssignment;
+ [ImplementedAs=isCloneable, EnabledBySetting=DeclarativeShadowRootsEnabled] readonly attribute boolean cloneable;
  readonly attribute Element host;
  attribute EventHandler onslotchange;
 };