Pass to queriesAnchored to getContainerForNode

getContainerForNode needs to know whether the @container selector
queries anchored() in order to select correct container candidate.

Bug: 417621241
Change-Id: I8eae0d4aac1eca513a3efcd10e3c390b1dc202dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6801802
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Reviewed-by: Wolfgang Beyer <[email protected]>

Author: lilles

front_end/core/sdk/CSSContainerQuery.test.ts

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Protocol from '../../generated/protocol.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+
 import * as SDK from './sdk.js';
 
 const {getPhysicalAxisFromQueryAxis, getQueryAxisFromContainerType, PhysicalAxis, QueryAxis} = SDK.CSSContainerQuery;
@@ -49,4 +53,15 @@ describe('CSSContainerQuery', () => {
       assert.strictEqual(getPhysicalAxisFromQueryAxis(QueryAxis.BOTH, 'vertical-rl'), PhysicalAxis.BOTH);
     });
   });
+
+  describeWithMockConnection('Construction from protocol payload', () => {
+    it('anchored()', () => {
+      const target = createTarget();
+      const cssModel = new SDK.CSSModel.CSSModel(target);
+      const query = new SDK.CSSContainerQuery.CSSContainerQuery(
+          cssModel, {queriesAnchored: true} as Protocol.CSS.CSSContainerQuery);
+      assert.isTrue(query.queriesAnchored);
+      assert.isUndefined(query.queriesScrollState);
+    });
+  });
 });

front_end/core/sdk/CSSContainerQuery.ts

@@ -14,6 +14,7 @@ export class CSSContainerQuery extends CSSQuery {
   physicalAxes?: Protocol.DOM.PhysicalAxes;
   logicalAxes?: Protocol.DOM.LogicalAxes;
   queriesScrollState?: boolean;
+  queriesAnchored?: boolean;
 
   static parseContainerQueriesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery[]):
       CSSContainerQuery[] {
@@ -33,6 +34,7 @@ export class CSSContainerQuery extends CSSQuery {
     this.physicalAxes = payload.physicalAxes;
     this.logicalAxes = payload.logicalAxes;
     this.queriesScrollState = payload.queriesScrollState;
+    this.queriesAnchored = payload.queriesAnchored;
   }
 
   active(): boolean {
@@ -41,7 +43,7 @@ export class CSSContainerQuery extends CSSQuery {
 
   async getContainerForNode(nodeId: Protocol.DOM.NodeId): Promise<CSSContainerQueryContainer|undefined> {
     const containerNode = await this.cssModel.domModel().getContainerForNode(
-        nodeId, this.name, this.physicalAxes, this.logicalAxes, this.queriesScrollState);
+        nodeId, this.name, this.physicalAxes, this.logicalAxes, this.queriesScrollState, this.queriesAnchored);
     if (!containerNode) {
       return;
     }

front_end/core/sdk/DOMModel.ts

@@ -1623,9 +1623,10 @@ export class DOMModel extends SDKModel<EventTypes> {
 
   async getContainerForNode(
       nodeId: Protocol.DOM.NodeId, containerName?: string, physicalAxes?: Protocol.DOM.PhysicalAxes,
-      logicalAxes?: Protocol.DOM.LogicalAxes, queriesScrollState?: boolean): Promise<DOMNode|null> {
+      logicalAxes?: Protocol.DOM.LogicalAxes, queriesScrollState?: boolean,
+      queriesAnchored?: boolean): Promise<DOMNode|null> {
     const {nodeId: containerNodeId} = await this.agent.invoke_getContainerForNode(
-        {nodeId, containerName, physicalAxes, logicalAxes, queriesScrollState});
+        {nodeId, containerName, physicalAxes, logicalAxes, queriesScrollState, queriesAnchored});
     if (!containerNodeId) {
       return null;
     }