chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/{panels/elements/PropertyMatchers.test.ts → core/sdk/CSSPropertyParserMatchers.test.ts}

@@ -6,8 +6,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import {Printer} from '../../testing/PropertyParser.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 
-import * as Elements from './elements.js';
-
 function matchSingleValue<T extends SDK.CSSPropertyParser.Match>(
     name: string, value: string, matcher: SDK.CSSPropertyParser.Matcher<T>):
     {ast: SDK.CSSPropertyParser.SyntaxTree|null, match: T|null, text: string} {
@@ -75,13 +73,13 @@ function injectVariableSubstitutions(variables: Record<string, string>) {
 describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
   it('parses colors', () => {
     for (const fail of ['red-blue', '#f', '#foobar', '', 'rgbz(1 2 2)', 'tan(45deg)']) {
-      const {match, text} = matchSingleValue('color', fail, new Elements.PropertyMatchers.ColorMatcher());
+      const {match, text} = matchSingleValue('color', fail, new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.isNull(match, text);
     }
     for (const succeed
              of ['rgb(/* R */155, /* G */51, /* B */255)', 'red', 'rgb(0 0 0)', 'rgba(0 0 0)', '#fff', '#ffff',
                  '#ffffff', '#ffffffff']) {
-      const {match, text} = matchSingleValue('color', succeed, new Elements.PropertyMatchers.ColorMatcher());
+      const {match, text} = matchSingleValue('color', succeed, new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text, succeed);
     }
@@ -89,7 +87,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     for (const fail
              of ['rgb(/* R */155, /* G */51, /* B */255)', 'red', 'rgb(0 0 0)', 'rgba(0 0 0)', '#fff', '#ffff',
                  '#ffffff', '#ffffffff']) {
-      const {match, text} = matchSingleValue('width', fail, new Elements.PropertyMatchers.ColorMatcher());
+      const {match, text} = matchSingleValue('width', fail, new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.isNull(match, text);
     }
   });
@@ -98,7 +96,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     for (const success
              of ['border-block-end', 'border-block-end-color', 'border-block-start', 'border-block-start-color',
                  'border-inline-end', 'border-inline-end-color', 'border-inline-start', 'border-inline-start-color']) {
-      const {ast, match, text} = matchSingleValue(success, 'red', new Elements.PropertyMatchers.ColorMatcher());
+      const {ast, match, text} = matchSingleValue(success, 'red', new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text, 'red');
       assert.strictEqual(ast?.propertyName, success);
@@ -110,14 +108,14 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
              of ['linear-gradient(90deg, red, blue)', 'linear-gradient(to top left, red, blue)',
                  'linear-gradient(in oklab, red, blue)']) {
       const {match, text} =
-          matchSingleValue('background', succeed, new Elements.PropertyMatchers.LinearGradientMatcher());
+          matchSingleValue('background', succeed, new SDK.CSSPropertyParserMatchers.LinearGradientMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text, succeed);
     }
     for (const fail
              of ['linear-gradient(90deg, red, blue)', 'linear-gradient(to top left, red, blue)',
                  'linear-gradient(in oklab, red, blue)']) {
-      const {match, text} = matchSingleValue('width', fail, new Elements.PropertyMatchers.ColorMatcher());
+      const {match, text} = matchSingleValue('width', fail, new SDK.CSSPropertyParserMatchers.ColorMatcher());
       assert.isNull(match, text);
     }
   });
@@ -127,12 +125,12 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const ast = SDK.CSSPropertyParser.tokenizeDeclaration(succeed, 'linear-gradient(to top, red, var(--other))');
       assert.exists(ast, succeed);
       const matching =
-          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new Elements.PropertyMatchers.ColorMatcher()]);
+          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new SDK.CSSPropertyParserMatchers.ColorMatcher()]);
       const colorNode = SDK.CSSPropertyParser.TreeSearch.find(ast, node => ast.text(node) === 'red');
       assert.exists(colorNode);
       const match = matching.getMatch(colorNode);
       assert.exists(match);
-      assert.instanceOf(match, Elements.PropertyMatchers.ColorMatch);
+      assert.instanceOf(match, SDK.CSSPropertyParserMatchers.ColorMatch);
       assert.strictEqual(match.text, 'red');
     }
   });
@@ -150,7 +148,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     {
       const {ast, match, text} = matchSingleValue(
           'color', 'color-mix(in srgb var(--interpolation) hue, red var(--percentage), rgb(var(--rgb)))',
-          new Elements.PropertyMatchers.ColorMixMatcher());
+          new SDK.CSSPropertyParserMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(match.space.map(n => ast.text(n)), ['in', 'srgb', 'var(--interpolation)', 'hue']);
@@ -160,7 +158,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     {
       const {ast, match, text} = matchSingleValue(
           'color', 'color-mix(var(--space), var(--color1), var(--color2))',
-          new Elements.PropertyMatchers.ColorMixMatcher());
+          new SDK.CSSPropertyParserMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.strictEqual(match.space.map(n => ast.text(n)).join(), 'var(--space)');
@@ -176,7 +174,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
                  'color-mix(var(--space), var(--color1), var(--color2) var(--percentage))',
                  'color-mix(var(--space), var(--multiple-colors))',
     ]) {
-      const {ast, match, text} = matchSingleValue('color', fail, new Elements.PropertyMatchers.ColorMixMatcher());
+      const {ast, match, text} = matchSingleValue('color', fail, new SDK.CSSPropertyParserMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.isNull(match, text);
     }
@@ -185,7 +183,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
   it('parses color-mix', () => {
     function check(space: string, color1: string, color2: string): void {
       const {ast, match, text} = matchSingleValue(
-          'color', `color-mix(${space}, ${color1}, ${color2})`, new Elements.PropertyMatchers.ColorMixMatcher());
+          'color', `color-mix(${space}, ${color1}, ${color2})`, new SDK.CSSPropertyParserMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
 
@@ -196,7 +194,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
     function checkFailure(space: string, color1: string, color2: string): void {
       const {match, text} = matchSingleValue(
-          'color', `color-mix(${space}, ${color1}, ${color2})`, new Elements.PropertyMatchers.ColorMixMatcher());
+          'color', `color-mix(${space}, ${color1}, ${color2})`, new SDK.CSSPropertyParserMatchers.ColorMixMatcher());
       assert.isNull(match, text);
     }
 
@@ -214,13 +212,13 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     const url = 'http://example.com';
     {
       const {match, text} =
-          matchSingleValue('background-image', `url(${url})`, new Elements.PropertyMatchers.URLMatcher());
+          matchSingleValue('background-image', `url(${url})`, new SDK.CSSPropertyParserMatchers.URLMatcher());
       assert.exists(match);
       assert.strictEqual(match.url, url, text);
     }
     {
       const {match, text} =
-          matchSingleValue('background-image', `url("${url}")`, new Elements.PropertyMatchers.URLMatcher());
+          matchSingleValue('background-image', `url("${url}")`, new SDK.CSSPropertyParserMatchers.URLMatcher());
       assert.exists(match);
       assert.strictEqual(match.url, url, text);
     }
@@ -228,13 +226,14 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
   it('parses angles correctly', () => {
     for (const succeed of ['45deg', '1.3rad', '-25grad', '2.3turn']) {
-      const {ast, match, text} = matchSingleValue('transform', succeed, new Elements.PropertyMatchers.AngleMatcher());
+      const {ast, match, text} =
+          matchSingleValue('transform', succeed, new SDK.CSSPropertyParserMatchers.AngleMatcher());
       assert.exists(ast, succeed);
       assert.exists(match, text);
       assert.strictEqual(match.text, succeed);
     }
     for (const fail of ['0DEG', '0', '123', '2em']) {
-      const {match, text} = matchSingleValue('transform', fail, new Elements.PropertyMatchers.AngleMatcher());
+      const {match, text} = matchSingleValue('transform', fail, new SDK.CSSPropertyParserMatchers.AngleMatcher());
       assert.isNull(match, text);
     }
   });
@@ -244,11 +243,11 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const ast = SDK.CSSPropertyParser.tokenizeDeclaration(name, value);
       assert.exists(ast);
       const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [
-        new Elements.PropertyMatchers.LinkableNameMatcher(),
+        new SDK.CSSPropertyParserMatchers.LinkableNameMatcher(),
       ]);
 
       const matches = SDK.CSSPropertyParser.TreeSearch.findAll(
-          ast, node => matchedResult.getMatch(node) instanceof Elements.PropertyMatchers.LinkableNameMatch);
+          ast, node => matchedResult.getMatch(node) instanceof SDK.CSSPropertyParserMatchers.LinkableNameMatch);
       return matches.map(m => matchedResult.getMatch(m)?.text);
     }
 
@@ -294,13 +293,13 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
              of ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear(0 0%, 1 100%)',
                  'cubic-bezier(0.3, 0.3, 0.3, 0.3)']) {
       const {ast, match, text} =
-          matchSingleValue('animation-timing-function', succeed, new Elements.PropertyMatchers.BezierMatcher());
+          matchSingleValue('animation-timing-function', succeed, new SDK.CSSPropertyParserMatchers.BezierMatcher());
       assert.exists(ast, succeed);
       assert.exists(match, text);
       assert.strictEqual(match.text, succeed);
     }
 
-    const {ast, match, text} = matchSingleValue('border', 'ease-in', new Elements.PropertyMatchers.BezierMatcher());
+    const {ast, match, text} = matchSingleValue('border', 'ease-in', new SDK.CSSPropertyParserMatchers.BezierMatcher());
     assert.exists(ast, 'border');
     assert.isNull(match, text);
   });
@@ -310,11 +309,11 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const ast = SDK.CSSPropertyParser.tokenizeDeclaration(name, value);
       assert.exists(ast);
       const matchedResult =
-          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new Elements.PropertyMatchers.StringMatcher()]);
+          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new SDK.CSSPropertyParserMatchers.StringMatcher()]);
       assert.exists(matchedResult);
 
       const match = SDK.CSSPropertyParser.TreeSearch.find(
-          ast, node => matchedResult.getMatch(node) instanceof Elements.PropertyMatchers.StringMatch);
+          ast, node => matchedResult.getMatch(node) instanceof SDK.CSSPropertyParserMatchers.StringMatch);
       assert.exists(match);
     }
     match('quotes', '"\'" "\'"');
@@ -324,14 +323,16 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
   it('parses shadows correctly', () => {
     const {match, text} = matchSingleValue(
-        'box-shadow', '/*0*/3px 3px red, -1em 0 .4em /*a*/ olive /*b*/', new Elements.PropertyMatchers.ShadowMatcher());
+        'box-shadow', '/*0*/3px 3px red, -1em 0 .4em /*a*/ olive /*b*/',
+        new SDK.CSSPropertyParserMatchers.ShadowMatcher());
     assert.exists(match, text);
     assert.strictEqual(match.text, '/*0*/3px 3px red, -1em 0 .4em /*a*/ olive');
   });
 
   it('parses fonts correctly', () => {
     for (const fontSize of ['-.23', 'smaller', '17px']) {
-      const {ast, match, text} = matchSingleValue('font-size', fontSize, new Elements.PropertyMatchers.FontMatcher());
+      const {ast, match, text} =
+          matchSingleValue('font-size', fontSize, new SDK.CSSPropertyParserMatchers.FontMatcher());
 
       assert.exists(ast, text);
       assert.exists(match, text);
@@ -342,12 +343,12 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const ast = SDK.CSSPropertyParser.tokenizeDeclaration('font-family', '"Gill Sans", sans-serif');
       assert.exists(ast);
       const matchedResult =
-          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new Elements.PropertyMatchers.FontMatcher()]);
+          SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [new SDK.CSSPropertyParserMatchers.FontMatcher()]);
       assert.exists(matchedResult);
 
       const matches = SDK.CSSPropertyParser.TreeSearch.findAll(
-          ast, node => matchedResult.getMatch(node) instanceof Elements.PropertyMatchers.FontMatch);
-      assert.deepEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans"', 'sans-serif']);
+          ast, node => matchedResult.getMatch(node) instanceof SDK.CSSPropertyParserMatchers.FontMatch);
+      assert.deepEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans", sans-serif']);
     }
   });
 
@@ -360,14 +361,15 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     });
 
     {
-      const {ast, match, text} = matchSingleValue('grid', '"a a"', new Elements.PropertyMatchers.GridTemplateMatcher());
+      const {ast, match, text} =
+          matchSingleValue('grid', '"a a"', new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.strictEqual(match.lines.map(line => line.map(n => ast.text(n)).join(' ')).join('\n'), '"a a"');
     }
     {
       const {ast, match, text} = matchSingleValue(
-          'grid-template-areas', '"a a a" "b b b" "c c c"', new Elements.PropertyMatchers.GridTemplateMatcher());
+          'grid-template-areas', '"a a a" "b b b" "c c c"', new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -375,7 +377,8 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     }
     {
       const {ast, match, text} = matchSingleValue(
-          'grid-template', '"a a a" var(--row) / auto 1fr auto', new Elements.PropertyMatchers.GridTemplateMatcher());
+          'grid-template', '"a a a" var(--row) / auto 1fr auto',
+          new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -385,7 +388,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const {ast, match, text} = matchSingleValue(
           'grid', '[header-top] "a a" var(--row-with-names) [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;',
 
-          new Elements.PropertyMatchers.GridTemplateMatcher());
+          new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -396,7 +399,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const {ast, match, text} = matchSingleValue(
           'grid', '[header-top] "a a" "b b b" var(--line-name) "c c" / auto 1fr auto;',
 
-          new Elements.PropertyMatchers.GridTemplateMatcher());
+          new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -407,7 +410,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const {ast, match, text} = matchSingleValue(
           'grid', '[line1] "a a" [line2] var(--double-row) "b b" / auto 1fr auto;',
 
-          new Elements.PropertyMatchers.GridTemplateMatcher());
+          new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -416,7 +419,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     }
     {
       const {ast, match, text} = matchSingleValue(
-          'grid', '"a a" var(--unresolved) / auto 1fr auto;', new Elements.PropertyMatchers.GridTemplateMatcher());
+          'grid', '"a a" var(--unresolved) / auto 1fr auto;', new SDK.CSSPropertyParserMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
       assert.deepEqual(
@@ -426,7 +429,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
   it('parses light-dark correctly', () => {
     for (const fail of ['light-dark()', 'light-dark(red)', 'light-dark(var(--foo))']) {
-      const {match, text} = matchSingleValue('color', fail, new Elements.PropertyMatchers.LightDarkColorMatcher());
+      const {match, text} = matchSingleValue('color', fail, new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher());
       assert.isNull(match, text);
     }
 
@@ -434,7 +437,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
              of ['light-dark(red, blue)', 'light-dark(var(--foo), red)', 'light-dark(red, var(--foo))',
                  'light-dark(var(--foo), var(--bar))']) {
       const {ast, match, text} =
-          matchSingleValue('color', succeed, new Elements.PropertyMatchers.LightDarkColorMatcher());
+          matchSingleValue('color', succeed, new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
 
@@ -447,58 +450,92 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
     // light-dark only applies to color properties
     const {match, text} =
-        matchSingleValue('width', 'light-dark(red, blue)', new Elements.PropertyMatchers.LightDarkColorMatcher());
+        matchSingleValue('width', 'light-dark(red, blue)', new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher());
     assert.isNull(match, text);
   });
 
+  it('parses auto-base correctly', () => {
+    for (const fail of ['-internal-auto-base()', '-internal-auto-base(block)', '-internal-auto-base(var(--foo))']) {
+      const {match, text} = matchSingleValue('display', fail, new SDK.CSSPropertyParserMatchers.AutoBaseMatcher());
+      assert.isNull(match, text);
+    }
+
+    for (const [succeed, propertyName] of [
+             ['-internal-auto-base(red, blue)', 'color'],
+             ['-internal-auto-base(var(--foo), red)', 'color'],
+             ['-internal-auto-base(red, var(--foo))', 'color'],
+             ['-internal-auto-base(var(--foo), var(--bar))', 'color'],
+             ['-internal-auto-base(gray, coral)', 'background-color'],
+             ['-internal-auto-base(inline, block)', 'display'],
+             ['-internal-auto-base(center, right)', 'text-align'],
+             ['-internal-auto-base(serif, cursive)', 'font-family'],
+             ['-internal-auto-base(solid, dashed)', 'border-style'],
+             ['-internal-auto-base(0, 0.5em)', 'border-radius'],
+             ['-internal-auto-base(2px, 0.25em)', 'padding'],
+             ['-internal-auto-base(1en, 3pt)', 'margin'],
+    ]) {
+      const {ast, match, text} =
+          matchSingleValue(propertyName, succeed, new SDK.CSSPropertyParserMatchers.AutoBaseMatcher());
+      assert.exists(ast, text);
+      assert.exists(match, text);
+
+      const [auto, base] = succeed.slice('-internal-auto-base('.length, -1).split(', ');
+      assert.lengthOf(match.auto, 1);
+      assert.lengthOf(match.base, 1);
+      assert.strictEqual(ast.text(match.auto[0]), auto);
+      assert.strictEqual(ast.text(match.base[0]), base);
+    }
+  });
+
   describe('AnchorFunctionMatcher', () => {
     it('should not match when it is not a call expression', () => {
-      const {match, text} = matchSingleValue('left', 'anchor', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+      const {match, text} =
+          matchSingleValue('left', 'anchor', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.isNull(match, text);
     });
 
     it('should not match anchor() call without arguments', () => {
       const {match: anchorMatch} =
-          matchSingleValue('left', 'anchor()', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          matchSingleValue('left', 'anchor()', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.isNull(anchorMatch);
     });
 
     it('should match anchor-size() call without arguments', () => {
       const {match: anchorSizeMatch, text: anchorSizeText} =
-          matchSingleValue('width', 'anchor-size()', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          matchSingleValue('width', 'anchor-size()', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorSizeMatch, anchorSizeText);
     });
 
     it('should match if it is an anchor() or anchor-size() call', () => {
       const {match: anchorMatch, text: anchorText} =
-          matchSingleValue('left', 'anchor(left)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          matchSingleValue('left', 'anchor(left)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorMatch, anchorText);
 
       const {match: anchorSizeMatch, text: anchorSizeText} =
-          matchSingleValue('width', 'anchor-size(width)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          matchSingleValue('width', 'anchor-size(width)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorSizeMatch, anchorSizeText);
     });
 
     it('should match dashed identifier as name from the first argument', () => {
       const {match: anchorMatch, text: anchorText} = matchSingleValue(
-          'left', 'anchor(--dashed-ident left)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          'left', 'anchor(--dashed-ident left)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorMatch, anchorText);
       assert.strictEqual(anchorMatch.text, '--dashed-ident');
 
       const {match: anchorSizeMatch, text: anchorSizeText} = matchSingleValue(
-          'width', 'anchor-size(--dashed-ident width)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          'width', 'anchor-size(--dashed-ident width)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorSizeMatch, anchorSizeText);
       assert.strictEqual(anchorSizeMatch.text, '--dashed-ident');
     });
 
     it('should match dashed identifier as name from the second argument', () => {
       const {match: anchorMatch, text: anchorText} = matchSingleValue(
-          'left', 'anchor(right --dashed-ident)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          'left', 'anchor(right --dashed-ident)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorMatch, anchorText);
       assert.strictEqual(anchorMatch.text, '--dashed-ident');
 
       const {match: anchorSizeMatch, text: anchorSizeText} = matchSingleValue(
-          'width', 'anchor-size(height --dashed-ident)', new Elements.PropertyMatchers.AnchorFunctionMatcher());
+          'width', 'anchor-size(height --dashed-ident)', new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher());
       assert.exists(anchorSizeMatch, anchorSizeText);
       assert.strictEqual(anchorSizeMatch.text, '--dashed-ident');
     });
@@ -506,15 +543,15 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
   describe('PositionAnchorMatcher', () => {
     it('should match `position-anchor` property with dashed identifier', () => {
-      const {match, text} =
-          matchSingleValue('position-anchor', '--dashed-ident', new Elements.PropertyMatchers.PositionAnchorMatcher());
+      const {match, text} = matchSingleValue(
+          'position-anchor', '--dashed-ident', new SDK.CSSPropertyParserMatchers.PositionAnchorMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text, '--dashed-ident');
     });
 
     it('should not match `position-anchor` property when it is not a dashed identifier', () => {
       const {match} = matchSingleValue(
-          'position-anchor', 'something-non-dashed', new Elements.PropertyMatchers.PositionAnchorMatcher());
+          'position-anchor', 'something-non-dashed', new SDK.CSSPropertyParserMatchers.PositionAnchorMatcher());
       assert.isNull(match);
     });
   });
@@ -523,14 +560,14 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     it('should match `position-try[-fallbacks]` property with linkable names', () => {
       {
         const {match, text} = matchSingleValue(
-            'position-try', 'flip-block, --top, --bottom', new Elements.PropertyMatchers.PositionTryMatcher());
+            'position-try', 'flip-block, --top, --bottom', new SDK.CSSPropertyParserMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, 'flip-block, --top, --bottom');
         assert.lengthOf(match.preamble, 0);
       } {
         const {ast, match, text} = matchSingleValue(
             'position-try', '/* comment */ most-height --top, --bottom',
-            new Elements.PropertyMatchers.PositionTryMatcher());
+            new SDK.CSSPropertyParserMatchers.PositionTryMatcher());
         assert.exists(ast, text);
         assert.exists(match, text);
         assert.strictEqual(match.text, '/* comment */ most-height --top, --bottom');
@@ -540,21 +577,46 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       } {
         const {match, text} = matchSingleValue(
             'position-try-fallbacks', '/* comment */ flip-block, --top, /* comment */ --bottom',
-            new Elements.PropertyMatchers.PositionTryMatcher());
+            new SDK.CSSPropertyParserMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, '/* comment */ flip-block, --top, /* comment */ --bottom');
         assert.lengthOf(match.preamble, 0);
       } {
-        const {match} = matchSingleValue('position-try', 'revert', new Elements.PropertyMatchers.PositionTryMatcher());
+        const {match} =
+            matchSingleValue('position-try', 'revert', new SDK.CSSPropertyParserMatchers.PositionTryMatcher());
         assert.isNull(match);
       }
     });
   });
 
+  describe('SelectFunctionMatcher', () => {
+    it('matches selecting functions', () => {
+      const success = ['clamp(1px, 2px, 3px)', 'min(1, 2)', 'max(3, 4)'];
+      for (const value of success) {
+        const {match, text} =
+            matchSingleValue('width', value, new SDK.CSSPropertyParserMatchers.SelectFunctionMatcher());
+        assert.exists(match, text);
+        assert.strictEqual(match.text, value);
+        assert.strictEqual(match.func, value.substr(0, value.indexOf('(')));
+        assert.isAbove(match.args.length, 0);
+      }
+
+      const failure = ['clomp(1px, 2px, 3px)', 'min()'];
+      for (const value of failure) {
+        const {match, text} =
+            matchSingleValue('width', value, new SDK.CSSPropertyParserMatchers.SelectFunctionMatcher());
+        assert.notExists(match, text);
+      }
+    });
+  });
+
   it('matches lengths', () => {
-    const {match, text} = matchSingleValue('min-width', '100px', new Elements.PropertyMatchers.LengthMatcher());
-    assert.exists(match, text);
-    assert.strictEqual(match.text, '100px');
+    for (const unit of SDK.CSSPropertyParserMatchers.LengthMatcher.LENGTH_UNITS) {
+      const {match, text} =
+          matchSingleValue('min-width', `100${unit}`, new SDK.CSSPropertyParserMatchers.LengthMatcher());
+      assert.exists(match, text);
+      assert.strictEqual(match.text, `100${unit}`);
+    }
   });
 
   it('match css keywords', () => {
@@ -562,14 +624,15 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     const matchedStylesStub = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
     for (const keyword of SDK.CSSMetadata.CSSWideKeywords) {
       const {match, text} = matchSingleValue(
-          '--property', keyword, new Elements.PropertyMatchers.CSSWideKeywordMatcher(propertyStub, matchedStylesStub));
+          '--property', keyword,
+          new SDK.CSSPropertyParserMatchers.CSSWideKeywordMatcher(propertyStub, matchedStylesStub));
       assert.exists(match, text);
       assert.strictEqual(match.text, keyword);
     }
 
     const {match, text} = matchSingleValue(
         '--property', '1px inherits',
-        new Elements.PropertyMatchers.CSSWideKeywordMatcher(propertyStub, matchedStylesStub));
+        new SDK.CSSPropertyParserMatchers.CSSWideKeywordMatcher(propertyStub, matchedStylesStub));
     assert.notExists(match, text);
   });
 
@@ -588,12 +651,12 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     ];
     const bad = ['flex block', 'grid inline', 'block', 'inline'];
     for (const value of good) {
-      const {match, text} = matchSingleValue('display', value, new Elements.PropertyMatchers.FlexGridMatcher());
+      const {match, text} = matchSingleValue('display', value, new SDK.CSSPropertyParserMatchers.FlexGridMatcher());
       assert.exists(match, text);
       assert.strictEqual(match.text.includes('flex'), match.isFlex);
     }
     for (const value of bad) {
-      const {match, text} = matchSingleValue('display', value, new Elements.PropertyMatchers.FlexGridMatcher());
+      const {match, text} = matchSingleValue('display', value, new SDK.CSSPropertyParserMatchers.FlexGridMatcher());
       assert.notExists(match, text);
     }
   });