CDP: Add additional tests for DOM.getNodesForSubtreeByStyle for

shadow DOM with unslotted elements.

This CL adds additional tests that help to reproduce the issue that
was fixed in [1].

[1]: https://chromium-review.googlesource.com/c/chromium/src/+/2426450

Fixed: 1130920
Change-Id: I45a79f5a88d50ccebe543391e47533511b9ae384
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2421820
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811130}

third_party/blink/web_tests/inspector-protocol/dom/dom-get-nodes-for-subtree-by-style-with-pierce-details-expected.txt

+Tests finding DOM nodes by computed styles on a page containing <details> elements.
+Expected nodeIds length: 3
+Actual nodeIds length: 3
+Nodes:
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : in-summary
+            [2] : style
+            [3] : display: grid;
+        ]
+        backendNodeId : <number>
+        childNodeCount : 0
+        localName : div
+        nodeId : <number>
+        nodeName : DIV
+        nodeType : 1
+        nodeValue : 
+    }
+}
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : in-details
+            [2] : style
+            [3] : display: grid;
+        ]
+        backendNodeId : <number>
+        childNodeCount : 0
+        localName : div
+        nodeId : <number>
+        nodeName : DIV
+        nodeType : 1
+        nodeValue : 
+    }
+}
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : outside
+            [2] : style
+            [3] : display: grid;
+        ]
+        backendNodeId : <number>
+        childNodeCount : 0
+        localName : div
+        nodeId : <number>
+        nodeName : DIV
+        nodeType : 1
+        nodeValue : 
+    }
+}
+

third_party/blink/web_tests/inspector-protocol/dom/dom-get-nodes-for-subtree-by-style-with-pierce-details.js

+(async function(testRunner) {
+  const {dp} = await testRunner.startHTML(`
+    <details>
+      <summary>
+        Summary
+        <div class="in-summary" style="display: grid;"></div>
+      </summary>
+      Details
+      <div class="in-details" style="display: grid;"></div>
+    </details>
+    <div class="outside" style="display: grid;"></div>
+    `, 'Tests finding DOM nodes by computed styles on a page containing <details> elements.');
+
+  await dp.DOM.enable();
+  const response = await dp.DOM.getDocument();
+  const rootNodeId = response.result.root.nodeId;
+
+  const nodesResponse = await dp.DOM.getNodesForSubtreeByStyle({
+    nodeId: rootNodeId,
+    pierce: true,
+    computedStyles: [
+      { name: 'display', value: 'grid' },
+    ],
+  });
+
+  testRunner.log('Expected nodeIds length: 3');
+  testRunner.log('Actual nodeIds length: ' + nodesResponse.result.nodeIds.length);
+
+  testRunner.log('Nodes:');
+  for (const nodeId of nodesResponse.result.nodeIds) {
+    const nodeResponse = await dp.DOM.describeNode({ nodeId });
+    testRunner.log(nodeResponse.result);
+  }
+
+  testRunner.completeTest();
+})
+

third_party/blink/web_tests/inspector-protocol/dom/dom-get-nodes-for-subtree-by-style-with-pierce-unslotted-elements-expected.txt

+Tests finding DOM nodes by computed styles on a page containing a custom element with unslotted nodes.
+Expected nodeIds length: 3
+Actual nodeIds length: 3
+Nodes:
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : default-slot
+            [2] : name
+            [3] : my-slot
+        ]
+        backendNodeId : <number>
+        childNodeCount : 1
+        distributedNodes : [
+            [0] : {
+                backendNodeId : <number>
+                nodeName : SPAN
+                nodeType : 1
+            }
+        ]
+        localName : slot
+        nodeId : <number>
+        nodeName : SLOT
+        nodeType : 1
+        nodeValue : 
+    }
+}
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : inserted-slot
+            [2] : slot
+            [3] : my-slot
+            [4] : style
+            [5] : display: grid;
+        ]
+        backendNodeId : <number>
+        childNodeCount : 1
+        localName : span
+        nodeId : <number>
+        nodeName : SPAN
+        nodeType : 1
+        nodeValue : 
+    }
+}
+{
+    node : {
+        attributes : [
+            [0] : class
+            [1] : grid-outside-shadow-dom
+            [2] : style
+            [3] : display: grid;
+        ]
+        backendNodeId : <number>
+        childNodeCount : 0
+        localName : div
+        nodeId : <number>
+        nodeName : DIV
+        nodeType : 1
+        nodeValue : 
+    }
+}
+

third_party/blink/web_tests/inspector-protocol/dom/dom-get-nodes-for-subtree-by-style-with-pierce-unslotted-elements.js

+(async function(testRunner) {
+  const {dp} = await testRunner.startHTML(`
+    <template id="my-element">
+      <style>
+        slot {
+          display: grid;
+        }
+      </style>
+      <div>
+        <slot class="default-slot" name="my-slot">
+          <span>default element</span>
+        </slot>
+      </div>
+    </template>
+    <script>
+      customElements.define('my-element',
+        class extends HTMLElement {
+          constructor() {
+            super();
+            const template = document.getElementById('my-element');
+            const shadowRoot = this
+              .attachShadow({mode: 'open'})
+              .appendChild(template.content.cloneNode(true));
+          }
+        }
+      );
+    </script>
+    <my-element>
+      <span class="inserted-slot" slot="my-slot" style="display: grid;">custom element</span>
+    </my-element>
+    <div class="grid-outside-shadow-dom" style="display: grid;"></div>
+    `, 'Tests finding DOM nodes by computed styles on a page containing a custom element with unslotted nodes.');
+
+  await dp.DOM.enable();
+  const response = await dp.DOM.getDocument();
+  const rootNodeId = response.result.root.nodeId;
+
+  const nodesResponse = await dp.DOM.getNodesForSubtreeByStyle({
+    nodeId: rootNodeId,
+    pierce: true,
+    computedStyles: [
+      { name: 'display', value: 'grid' },
+    ],
+  });
+
+  testRunner.log('Expected nodeIds length: 3');
+  testRunner.log('Actual nodeIds length: ' + nodesResponse.result.nodeIds.length);
+
+  testRunner.log('Nodes:');
+  for (const nodeId of nodesResponse.result.nodeIds) {
+    const nodeResponse = await dp.DOM.describeNode({ nodeId });
+    testRunner.log(nodeResponse.result);
+  }
+
+  testRunner.completeTest();
+})
+