From 359d523ec318106bf79d650b2b4458a1a388ebdf Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Tue, 11 Jan 2022 18:40:29 -0800
Subject: [PATCH] fix(selectors): allow :scope with additional css (#11338)

---
 .../src/server/injected/selectorEvaluator.ts               | 3 +++
 tests/page/selectors-css.spec.ts                           | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/playwright-core/src/server/injected/selectorEvaluator.ts b/packages/playwright-core/src/server/injected/selectorEvaluator.ts
index 10f367bf7e..04f8687cbd 100644
--- a/packages/playwright-core/src/server/injected/selectorEvaluator.ts
+++ b/packages/playwright-core/src/server/injected/selectorEvaluator.ts
@@ -202,6 +202,9 @@ export class SelectorEvaluatorImpl implements SelectorEvaluator {
       let firstIndex = -1;
       if (css !== undefined) {
         elements = this._queryCSS(context, css);
+        const hasScopeClause = funcs.some(f => f.name === 'scope');
+        if (hasScopeClause && context.scope.nodeType === 1 /* Node.ELEMENT_NODE */)
+          elements.unshift(context.scope as Element);
       } else {
         firstIndex = funcs.findIndex(func => this._getEngine(func.name).query !== undefined);
         if (firstIndex === -1)
diff --git a/tests/page/selectors-css.spec.ts b/tests/page/selectors-css.spec.ts
index 2ddb7f4923..5f644b65e1 100644
--- a/tests/page/selectors-css.spec.ts
+++ b/tests/page/selectors-css.spec.ts
@@ -383,6 +383,13 @@ it('should work with :scope', async ({ page, server }) => {
     expect(await scope.$$eval(`css=* > :scope`, els => els.length)).toBe(0);
     expect(await scope.$$eval(`css=* ~ :scope`, els => els.length)).toBe(0);
   }
+
+  await page.setContent(`<article><div class=target>hello<span></span></div></article>`);
+  // 'scope' should allow additional native css modifiers
+  expect(await page.$eval(`div >> :scope.target`, e => e.textContent)).toBe('hello');
+  expect(await page.$eval(`div >> :scope:nth-child(1)`, e => e.textContent)).toBe('hello');
+  expect(await page.$eval(`div >> :scope.target:has(span)`, e => e.textContent)).toBe('hello');
+  expect(await page.$eval(`html:scope`, e => e.nodeName)).toBe('HTML');
 });
 
 it('should absolutize relative selectors', async ({ page, server }) => {