@markuplint/selector 3.6.1 → 3.8.0

package/lib/extended-selector/aria-pseudo-class.js

@@ -47,7 +47,10 @@ exports.ariaPseudoClass = ariaPseudoClass;
 function ariaPseudoClassParser(syntax) {
     const [_query, _version] = syntax.split('|');
     const query = _query === null || _query === void 0 ? void 0 : _query.replace(/\s+/g, '').toLowerCase();
-    const version = _version === '1.1' ? '1.1' : '1.2';
+    const version = _version !== null && _version !== void 0 ? _version : ml_spec_1.ARIA_RECOMMENDED_VERSION;
+    if (!(0, ml_spec_1.validateAriaVersion)(version)) {
+        throw new SyntaxError(`Unsupported ARIA version: ${version}`);
+    }
     switch (query) {
         case 'hasname': {
             return {

package/lib/extended-selector/aria-role-pseudo-class.js

@@ -8,7 +8,7 @@ function ariaRolePseudoClass(specs) {
     el) => {
         var _a, _b;
         const aria = ariaPseudoClassParser(content);
-        const computed = (0, ml_spec_1.getComputedRole)(specs, el, (_a = aria.version) !== null && _a !== void 0 ? _a : '1.2');
+        const computed = (0, ml_spec_1.getComputedRole)(specs, el, (_a = aria.version) !== null && _a !== void 0 ? _a : ml_spec_1.ARIA_RECOMMENDED_VERSION);
         if (((_b = computed.role) === null || _b === void 0 ? void 0 : _b.name) === aria.role) {
             return {
                 specificity: [0, 1, 0],
@@ -27,7 +27,10 @@ exports.ariaRolePseudoClass = ariaRolePseudoClass;
 function ariaPseudoClassParser(syntax) {
     var _a;
     const [roleName, _version] = syntax.split('|');
-    const version = _version === '1.1' ? '1.1' : '1.2';
+    const version = _version !== null && _version !== void 0 ? _version : ml_spec_1.ARIA_RECOMMENDED_VERSION;
+    if (!(0, ml_spec_1.validateAriaVersion)(version)) {
+        throw new SyntaxError(`Unsupported ARIA version: ${version}`);
+    }
     return {
         role: (_a = roleName === null || roleName === void 0 ? void 0 : roleName.trim().toLowerCase()) !== null && _a !== void 0 ? _a : syntax.trim().toLowerCase(),
         version,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/selector",
-	"version": "3.6.1",
+	"version": "3.8.0",
 	"description": "Extended W3C Selectors matcher",
 	"repository": "git@github.com:markuplint/markuplint.git",
 	"author": "Yusuke Hirao <yusukehirao@me.com>",
@@ -20,16 +20,16 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
+		"@markuplint/ml-spec": "3.8.0",
+		"@types/debug": "^4.1.7",
 		"debug": "^4.3.4",
 		"postcss-selector-parser": "^6.0.11",
-		"tslib": "^2.4.1"
+		"tslib": "^2.4.1",
+		"type-fest": "^3.8.0"
 	},
 	"devDependencies": {
-		"@markuplint/ml-spec": "3.6.1",
-		"@types/debug": "^4.1.7",
-		"@types/jsdom": "16",
-		"jsdom": "19",
-		"type-fest": "^3.6.1"
+		"@types/jsdom": "21.1.1",
+		"jsdom": "21.1.1"
 	},
-	"gitHead": "3cdf5a088b2da03773d5d4461d0e65ec32290a00"
+	"gitHead": "adc6e432cccba7cfad0dc8bf9f92e5aaf1107359"
 }

package/test/create-selector.spec.js

@@ -0,0 +1,44 @@
+const specs = require('@markuplint/html-spec');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { createSelector } = require('../lib/create-selector');
+
+function c(selector, html) {
+	return createSelector(selector, specs).match(createJSDOMElement(html));
+}
+
+describe('Extended Selector', () => {
+	it(':aria', () => {
+		expect(c(':aria(has name)', '<button>foo</button>')).toBeTruthy();
+		expect(c(':aria(has name|1.1)', '<button>foo</button>')).toBeTruthy();
+		expect(c(':aria(has name|1.2)', '<button>foo</button>')).toBeTruthy();
+	});
+
+	it(':role', () => {
+		expect(c(':role(button)', '<button>foo</button>')).toBeTruthy();
+		expect(c(':role(button|1.1)', '<button>foo</button>')).toBeTruthy();
+		expect(c(':role(button|1.2)', '<button>foo</button>')).toBeTruthy();
+		expect(c(':role(button|1.2)', '<div role="button">foo</div>')).toBeTruthy();
+		expect(c(':role(button|1.2)', '<div>foo</div>')).toBeFalsy();
+	});
+
+	it(':model', () => {
+		expect(c(':model(flow)', '<a></a>')).toBeTruthy();
+		expect(c(':model(interactive)', '<a></a>')).toBeFalsy();
+		expect(c(':model(interactive)', '<a href="path/to"></a>')).toBeTruthy();
+		expect(c(':not(:model(interactive))', '<a href="path/to"></a>')).toBeFalsy();
+	});
+
+	it('The address element', () => {
+		const contentModel =
+			':model(flow):not(address, :model(heading), :model(sectioning), header, footer, :has(address, :model(heading), :model(sectioning), header, footer))';
+		expect(c(contentModel, '<a></a>')).toBeTruthy();
+		expect(c(contentModel, '<h1></h1>')).toBeFalsy();
+		expect(c(contentModel, '<address></address>')).toBeFalsy();
+		expect(c(contentModel, '<header></header>')).toBeFalsy();
+		expect(c(contentModel, '<div><a></a></div>')).toBeTruthy();
+		expect(c(contentModel, '<div><h1></h1></div>')).toBeFalsy();
+		expect(c(contentModel, '<div><address></address></div>')).toBeFalsy();
+		expect(c(contentModel, '<div><header></header></div>')).toBeFalsy();
+	});
+});

package/test/match-selector.spec.js

@@ -0,0 +1,342 @@
+const { JSDOM } = require('jsdom');
+
+const { matchSelector } = require('../lib/match-selector');
+
+function createTestElement(html) {
+	if (/^<html>/i.test(html)) {
+		const dom = new JSDOM(html);
+		return dom.window.document.querySelector('html');
+	}
+	const fragment = JSDOM.fragment(html);
+	return fragment.firstChild;
+}
+
+test('CSS Selector', () => {
+	const el = createTestElement('<div id="hoge" class="foo bar"></div>');
+	expect(matchSelector(el, '*')).toStrictEqual({ matched: true, selector: '*', specificity: [0, 0, 0] });
+	expect(matchSelector(el, 'div')).toStrictEqual({ matched: true, selector: 'div', specificity: [0, 0, 1] });
+	expect(matchSelector(el, 'div#hoge')).toStrictEqual({
+		matched: true,
+		selector: 'div#hoge',
+		specificity: [1, 0, 1],
+	});
+	expect(matchSelector(el, 'div#fuga')).toStrictEqual({ matched: false });
+	expect(matchSelector(el, '#hoge')).toStrictEqual({ matched: true, selector: '#hoge', specificity: [1, 0, 0] });
+	expect(matchSelector(el, 'div.foo')).toStrictEqual({ matched: true, selector: 'div.foo', specificity: [0, 1, 1] });
+	expect(matchSelector(el, 'div.bar')).toStrictEqual({ matched: true, selector: 'div.bar', specificity: [0, 1, 1] });
+	expect(matchSelector(el, '.foo')).toStrictEqual({ matched: true, selector: '.foo', specificity: [0, 1, 0] });
+	expect(matchSelector(el, '.foo.bar')).toStrictEqual({
+		matched: true,
+		selector: '.foo.bar',
+		specificity: [0, 2, 0],
+	});
+	expect(matchSelector(el, '.any')).toStrictEqual({ matched: false });
+});
+
+test('nodeName case-sensitive', () => {
+	expect(matchSelector(createTestElement('<DIV></DIV>'), 'div')).toStrictEqual({
+		matched: true,
+		selector: 'div',
+		specificity: [0, 0, 1],
+	});
+
+	expect(matchSelector(createTestElement('<DIV></DIV>'), 'DIV')).toStrictEqual({
+		matched: true,
+		selector: 'DIV',
+		specificity: [0, 0, 1],
+	});
+});
+
+test('invisible tag', () => {
+	const head = createTestElement('<html><head></head></html>').childNodes[0];
+	expect(head.nodeName).toBe('HEAD');
+	expect(matchSelector(head, 'head')).toStrictEqual({
+		matched: true,
+		selector: 'head',
+		specificity: [0, 0, 1],
+	});
+});
+
+test('nodeName', () => {
+	const el = createTestElement('<div></div>');
+	expect(
+		matchSelector(el, {
+			nodeName: '/^[a-z]+$/',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div',
+		specificity: [0, 0, 1],
+		data: {},
+	});
+});
+
+test('nodeName named group capture', () => {
+	const el = createTestElement('<h6></h6>');
+	expect(
+		matchSelector(el, {
+			nodeName: '/^h(?<level>[1-6])$/',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'h6',
+		specificity: [0, 0, 1],
+		data: {
+			$1: '6',
+			level: '6',
+		},
+	});
+});
+
+test('nodeName (No RegExp)', () => {
+	const el = createTestElement('<div></div>');
+	expect(
+		matchSelector(el, {
+			nodeName: 'div',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div',
+		specificity: [0, 0, 1],
+		data: {},
+	});
+});
+
+test('attrName', () => {
+	const el = createTestElement('<div data-attr></div>');
+	expect(
+		matchSelector(el, {
+			attrName: '/^data-([a-z]+)$/',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[data-attr]',
+		specificity: [0, 1, 0],
+		data: {
+			$1: 'attr',
+		},
+	});
+});
+
+test('attrValue', () => {
+	const el = createTestElement('<div data-attr="abc"></div>');
+	expect(
+		matchSelector(el, {
+			attrValue: '/^[a-z]+$/',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[data-attr="abc"]',
+		specificity: [0, 1, 0],
+		data: {},
+	});
+});
+
+test('No matched', () => {
+	const el = createTestElement('<div data-attr="abc"></div>');
+	expect(
+		matchSelector(el, {
+			nodeName: 'span',
+			attrName: 'data-attr',
+			attrValue: 'abc',
+		}),
+	).toStrictEqual({
+		matched: false,
+	});
+});
+
+test('nodeName & attrName', () => {
+	const el = createTestElement('<div data-attr="abc"></div>');
+	expect(
+		matchSelector(el, {
+			nodeName: 'div',
+			attrName: 'data-attr',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div[data-attr]',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});
+
+test('attrName & attrValue', () => {
+	const el = createTestElement('<div data-attr="abc"></div>');
+	expect(
+		matchSelector(el, {
+			attrName: 'data-attr',
+			attrValue: '/^[a-z]+$/',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[data-attr="abc"]',
+		specificity: [0, 1, 0],
+		data: {},
+	});
+});
+
+test('nodeName & attrName & attrValue', () => {
+	const el = createTestElement('<div data-attr="abc"></div>');
+	expect(
+		matchSelector(el, {
+			nodeName: 'div',
+			attrName: 'data-attr',
+			attrValue: 'abc',
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div[data-attr="abc"]',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});
+
+test('combination " "', () => {
+	const el = createTestElement('<div data-attr="abc"><span></span></div>');
+	const span = el.children[0];
+	expect(
+		matchSelector(span, {
+			nodeName: 'div',
+			attrName: 'data-attr',
+			attrValue: 'abc',
+			combination: {
+				combinator: ' ',
+				nodeName: 'span',
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div[data-attr="abc"] span',
+		specificity: [0, 1, 2],
+		data: {},
+	});
+});
+
+test('combination >', () => {
+	const el = createTestElement('<div data-attr="abc"><span><a></a></span></div>');
+	const span = el.children[0];
+	const a = span.children[0];
+	expect(
+		matchSelector(a, {
+			nodeName: 'div',
+			attrName: 'data-attr',
+			attrValue: 'abc',
+			combination: {
+				combinator: '>',
+				nodeName: 'span',
+				combination: {
+					combinator: '>',
+					nodeName: '/^(?<EdgeNodeName>[a-z]+)$/',
+				},
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: 'div[data-attr="abc"] > span > a',
+		specificity: [0, 1, 3],
+		data: {
+			$1: 'a',
+			EdgeNodeName: 'a',
+		},
+	});
+});
+
+test('combination +', () => {
+	const el = createTestElement(`<ul>
+	<li class="i1"><a class="a1">1</a></li>
+	<li class="i2"><a class="a2">2</a></li>
+	<li class="i3"><a class="a3">3</a></li>
+	<li class="i4"><a class="a4">4</a></li>
+	<li class="i5"><a class="a5">5</a></li>
+</ul>`);
+	const i4 = el.children[3];
+	expect(
+		matchSelector(i4, {
+			attrValue: 'i3',
+			combination: {
+				combinator: '+',
+				nodeName: 'li',
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[class="i3"] + li',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});
+
+test('combination ~', () => {
+	const el = createTestElement(`<ul>
+	<li class="i1"><a class="a1">1</a></li>
+	<li class="i2"><a class="a2">2</a></li>
+	<li class="i3"><a class="a3">3</a></li>
+	<li class="i4"><a class="a4">4</a></li>
+	<li class="i5"><a class="a5">5</a></li>
+</ul>`);
+	const i5 = el.children[4];
+	expect(
+		matchSelector(i5, {
+			attrValue: 'i3',
+			combination: {
+				combinator: '~',
+				nodeName: 'li',
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[class="i3"] ~ li',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});
+
+test('combination :has(+)', () => {
+	const el = createTestElement(`<ul>
+	<li class="i1"><a class="a1">1</a></li>
+	<li class="i2"><a class="a2">2</a></li>
+	<li class="i3"><a class="a3">3</a></li>
+	<li class="i4"><a class="a4">4</a></li>
+	<li class="i5"><a class="a5">5</a></li>
+</ul>`);
+	const i3 = el.children[2];
+	expect(
+		matchSelector(i3, {
+			attrValue: 'i4',
+			combination: {
+				combinator: ':has(+)',
+				nodeName: 'li',
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[class="i4"]:has(+ li)',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});
+
+test('combination :has(~)', () => {
+	const el = createTestElement(`<ul>
+	<li class="i1"><a class="a1">1</a></li>
+	<li class="i2"><a class="a2">2</a></li>
+	<li class="i3"><a class="a3">3</a></li>
+	<li class="i4"><a class="a4">4</a></li>
+	<li class="i5"><a class="a5">5</a></li>
+</ul>`);
+	const i3 = el.children[2];
+	expect(
+		matchSelector(i3, {
+			attrValue: 'i5',
+			combination: {
+				combinator: ':has(~)',
+				nodeName: 'li',
+			},
+		}),
+	).toStrictEqual({
+		matched: true,
+		selector: '[class="i5"]:has(~ li)',
+		specificity: [0, 1, 1],
+		data: {},
+	});
+});

package/test/regex-selector-matches.spec.js

@@ -0,0 +1,16 @@
+const { regexSelectorMatches } = require('../lib/regex-selector-matches');
+
+it('regexSelectorMatches', () => {
+	expect(regexSelectorMatches('/^data-([a-z]+)/', 'data-hoge', true)).toStrictEqual({
+		$0: 'data-hoge',
+		$1: 'hoge',
+	});
+
+	expect(regexSelectorMatches('/^data-(?<dataName>[a-z]+)/', 'data-hoge', true)).toStrictEqual({
+		$0: 'data-hoge',
+		$1: 'hoge',
+		dataName: 'hoge',
+	});
+
+	expect(regexSelectorMatches('/^data-(?<dataName>[a-z]+)/', 'noop', true)).toBeNull();
+});

package/test/selector.spec.js

@@ -0,0 +1,284 @@
+const { JSDOM } = require('jsdom');
+
+const { InvalidSelectorError } = require('../lib/invalid-selector-error');
+const { Selector } = require('../lib/selector');
+
+beforeEach(() => {
+	const dom = new JSDOM();
+	global.Element = dom.window.Element;
+});
+
+function createTestElement(html, selector) {
+	if (/^<html>/i.test(html)) {
+		const dom = new JSDOM(html);
+		return dom.window.document.querySelector('html');
+	}
+	const fragment = JSDOM.fragment(html);
+	if (selector) {
+		const el = fragment.querySelector(selector);
+		if (!el) {
+			throw new Error('An element is not created');
+		}
+		return el;
+	}
+	if (!fragment.firstChild) {
+		throw new Error('An element is not created');
+	}
+	return fragment.firstChild;
+}
+
+function createSelector(selector) {
+	return new Selector(selector);
+}
+
+describe('selector matching', () => {
+	it('Multiple selector', () => {
+		const el = createTestElement('<div></div>');
+		expect(createSelector('div, span').match(el)).toBeTruthy();
+	});
+
+	it('type / id / class', () => {
+		const el = createTestElement('<div id="hoge" class="foo bar"></div>');
+		expect(createSelector('*').match(el)).toBeTruthy();
+		expect(createSelector('div').match(el)).toBeTruthy();
+		expect(createSelector('div#hoge').match(el)).toBeTruthy();
+		expect(createSelector('div#fuga').match(el)).toBe(false);
+		expect(createSelector('#hoge').match(el)).toBeTruthy();
+		expect(createSelector('div.foo').match(el)).toBeTruthy();
+		expect(createSelector('div.bar').match(el)).toBeTruthy();
+		expect(createSelector('.foo').match(el)).toBeTruthy();
+		expect(createSelector('.foo.bar').match(el)).toBeTruthy();
+		expect(createSelector('.any').match(el)).toBe(false);
+	});
+
+	it('attributes', () => {
+		const el = createTestElement('<div a="ABC" b="1 2 3" c="あいうえお" d="en-US" e="" f></div>');
+
+		expect(createSelector('[a]').match(el)).toBeTruthy();
+		expect(createSelector('[a][b][c][d]').match(el)).toBeTruthy();
+		expect(createSelector('[a][d]').match(el)).toBeTruthy();
+		expect(createSelector('[g]').match(el)).toBe(false);
+		expect(createSelector('[a=ABC]').match(el)).toBeTruthy();
+		expect(createSelector('[a="ABC"]').match(el)).toBeTruthy();
+		expect(createSelector('[a=ABC i]').match(el)).toBeTruthy();
+		expect(createSelector('[a=abc i]').match(el)).toBeTruthy();
+		expect(createSelector('[a=abC i]').match(el)).toBeTruthy();
+		expect(createSelector('[a=abC]').match(el)).toBe(false);
+		expect(createSelector('[b~=2]').match(el)).toBeTruthy();
+		expect(createSelector('[b~=12]').match(el)).toBe(false);
+		expect(createSelector('[d|=en]').match(el)).toBeTruthy();
+		expect(createSelector('[d|=e]').match(el)).toBe(false);
+		expect(createSelector('[d|=ja]').match(el)).toBe(false);
+		expect(createSelector('[a*=B]').match(el)).toBeTruthy();
+		expect(createSelector('[a*=D]').match(el)).toBe(false);
+		expect(createSelector('[a^=A]').match(el)).toBeTruthy();
+		expect(createSelector('[a^=AB]').match(el)).toBeTruthy();
+		expect(createSelector('[a^=ABC]').match(el)).toBeTruthy();
+		expect(createSelector('[a^=C]').match(el)).toBe(false);
+		expect(createSelector('[a^=BC]').match(el)).toBe(false);
+		expect(createSelector('[a$=A]').match(el)).toBe(false);
+		expect(createSelector('[a$=AB]').match(el)).toBe(false);
+		expect(createSelector('[a$=C]').match(el)).toBeTruthy();
+		expect(createSelector('[a$=BC]').match(el)).toBeTruthy();
+		expect(createSelector('[a$=ABC]').match(el)).toBeTruthy();
+		expect(createSelector('[e]').match(el)).toBeTruthy();
+		expect(createSelector('[e=""]').match(el)).toBeTruthy();
+		expect(createSelector('[e="a"]').match(el)).toBe(false);
+		expect(createSelector('[a=""]').match(el)).toBe(false);
+		expect(createSelector('[f]').match(el)).toBeTruthy();
+		expect(createSelector('[f=""]').match(el)).toBeTruthy();
+		expect(createSelector('[f="f"]').match(el)).toBe(false);
+	});
+
+	it(':not', () => {
+		const el = createTestElement('<div id="hoge" class="foo bar"></div>');
+		expect(createSelector('*:not(a)').match(el)).toBeTruthy();
+		expect(createSelector('*:not(div)').match(el)).toBe(false);
+		expect(createSelector('div:not(.any)').match(el)).toBeTruthy();
+		expect(createSelector('div:not(#fuga)').match(el)).toBeTruthy();
+		expect(createSelector(':not(#hoge)').match(el)).toBe(false);
+	});
+
+	it(':is', () => {
+		const el = createTestElement('<div id="hoge" class="foo bar"></div>');
+		expect(createSelector(':is(a, div)').match(el)).toBeTruthy();
+		expect(createSelector(':is(a, span)').match(el)).toBe(false);
+	});
+
+	it(':has', () => {
+		const el = createTestElement('<header><div></div></header>');
+		expect(createSelector(':has(div, span)').match(el)).toBeTruthy();
+		expect(
+			createSelector(
+				':has(article, aside, main, nav, section, [role=article], [role=complementary], [role=main], [role=navigation], [role=region])',
+			).match(el),
+		).toBe(false);
+	});
+
+	it(':scope', () => {
+		const el = createTestElement('<div></div>');
+		expect(createSelector(':scope').match(el)).toBeTruthy();
+	});
+
+	it(':root', () => {
+		const el = createTestElement('<html><div id="hoge" class="foo bar"></div></html>');
+		expect(createSelector(':root').match(el)).toBeTruthy();
+		const el2 = createTestElement('<div id="hoge" class="foo bar"></div>');
+		expect(createSelector(':root').match(el2)).toBe(false);
+	});
+
+	it('Descendant combinator', () => {
+		const el = createTestElement('<div><span><a></a></span></div>');
+		const a = el.children[0].children[0];
+		expect(a.nodeName).toBe('A');
+		expect(createSelector('div a').match(a)).toBeTruthy();
+		expect(createSelector('div span a').match(a)).toBeTruthy();
+		expect(createSelector('span a').match(a)).toBeTruthy();
+		expect(createSelector('header a').match(a)).toBe(false);
+	});
+
+	it('Child combinator', () => {
+		const el = createTestElement('<div><span><a></a></span></div>');
+		const a = el.children[0].children[0];
+		expect(createSelector('div > div').match(el)).toBe(false);
+		expect(a.nodeName).toBe('A');
+		expect(createSelector('span > a').match(a)).toBeTruthy();
+		expect(createSelector('div span > a').match(a)).toBeTruthy();
+		expect(createSelector('div > a').match(a)).toBe(false);
+		expect(createSelector('header > a').match(a)).toBe(false);
+	});
+
+	it('Next-sibling combinator', () => {
+		const el = createTestElement(`<ul>
+			<li class="i1"><a class="a1">1</a></li>
+			<li class="i2"><a class="a2">2</a></li>
+			<li class="i3"><a class="a3">3</a></li>
+			<li class="i4"><a class="a4">4</a></li>
+			<li class="i5"><a class="a5">5</a></li>
+		</ul>`);
+		expect(createSelector('.i2 + li').match(el.children[0])).toBe(false);
+		expect(createSelector('.i2 + li').match(el.children[1])).toBe(false);
+		expect(createSelector('.i2 + li').match(el.children[2])).toBeTruthy();
+		expect(createSelector('.i2 + li').match(el.children[3])).toBe(false);
+		expect(createSelector('.i2 + li').match(el.children[4])).toBe(false);
+		expect(createSelector('.i4 + li').match(el.children[0])).toBe(false);
+		expect(createSelector('.i4 + li').match(el.children[1])).toBe(false);
+		expect(createSelector('.i4 + li').match(el.children[2])).toBe(false);
+		expect(createSelector('.i4 + li').match(el.children[3])).toBe(false);
+		expect(createSelector('.i4 + li').match(el.children[4])).toBeTruthy();
+	});
+
+	it('Subsequent-sibling combinator', () => {
+		const el = createTestElement(`<ul>
+			<li class="i1"><a class="a1">1</a></li>
+			<li class="i2"><a class="a2">2</a></li>
+			<li class="i3"><a class="a3">3</a></li>
+			<li class="i4"><a class="a4">4</a></li>
+			<li class="i5"><a class="a5">5</a></li>
+		</ul>`);
+		expect(createSelector('.i2 ~ li').match(el.children[0])).toBe(false);
+		expect(createSelector('.i2 ~ li').match(el.children[1])).toBe(false);
+		expect(createSelector('.i2 ~ li').match(el.children[2])).toBeTruthy();
+		expect(createSelector('.i2 ~ li').match(el.children[3])).toBeTruthy();
+		expect(createSelector('.i2 ~ li').match(el.children[4])).toBeTruthy();
+	});
+
+	it('combinator start error', () => {
+		const el = createTestElement('<div><a></a><span></span></div>', 'a');
+		InvalidSelectorError;
+		expect(() => createSelector('> a').match(el)).toThrow(InvalidSelectorError);
+		expect(() => createSelector('+ a').match(el)).toThrow(InvalidSelectorError);
+		expect(() => createSelector('~ a').match(el)).toThrow(InvalidSelectorError);
+	});
+
+	it(':has(+ E)', () => {
+		const el = createTestElement('<figure><table></table><figcaption></figcaption></figure>', 'table');
+		expect(createSelector('table:has(+ figcaption)').match(el)).toBeTruthy();
+	});
+
+	it(':has(~ E)', () => {
+		const el = createTestElement('<figure><table></table><p></p><figcaption></figcaption></figure>', 'table');
+		expect(createSelector('table:has(~ figcaption)').match(el)).toBeTruthy();
+	});
+
+	it(':closest', () => {
+		const el = createTestElement('<table><tr><td></td></tr></table>');
+		const td = el.children[0].children[0].children[0];
+		expect(createSelector('td').match(td)).toBeTruthy();
+		expect(createSelector(':closest(table)').match(td)).toBeTruthy();
+		expect(createSelector(':closest(tr)').match(td)).toBeTruthy();
+		expect(createSelector(':closest(tbody)').match(td)).toBeTruthy();
+		expect(createSelector(':closest(div)').match(td)).toBe(false);
+	});
+
+	it('namespace', () => {
+		const svgA = createTestElement('<svg><a></a></svg>', 'a');
+		expect(createSelector('a').match(svgA)).toBeTruthy();
+		expect(createSelector('|a').match(svgA)).toBeTruthy();
+		expect(createSelector('*|a').match(svgA)).toBeTruthy();
+		expect(createSelector('svg|a').match(svgA)).toBeTruthy();
+		const htmlA = createTestElement('<div><a></a></div>', 'a');
+		expect(createSelector('a').match(htmlA)).toBeTruthy();
+		expect(createSelector('|a').match(htmlA)).toBeTruthy();
+		expect(createSelector('*|a').match(htmlA)).toBeTruthy();
+		expect(createSelector('svg|a').match(htmlA)).toBeFalsy();
+	});
+
+	it('namespaced attribute', () => {
+		const svgA = createTestElement('<svg><a href></a></svg>', 'a');
+		expect(createSelector('[href]').match(svgA)).toBeTruthy();
+		expect(createSelector('[|href]').match(svgA)).toBeTruthy();
+		expect(createSelector('[*|href]').match(svgA)).toBeTruthy();
+		expect(createSelector('[xlink|href]').match(svgA)).toBeFalsy();
+		const svgAx = createTestElement('<svg><a xlink:href></a></svg>', 'a');
+		expect(createSelector('[href]').match(svgAx)).toBeTruthy();
+		expect(createSelector('[|href]').match(svgAx)).toBeTruthy();
+		expect(createSelector('[*|href]').match(svgAx)).toBeTruthy();
+		expect(createSelector('[xlink|href]').match(svgAx)).toBeTruthy();
+	});
+
+	it('is invisible tags', () => {
+		const el = createTestElement('<html><head><title></title></head></html>');
+		const head = el.children[0];
+		const title = head.children[0];
+		expect(createSelector('head').match(head)).toBeTruthy();
+		expect(createSelector('title').match(title)).toBeTruthy();
+	});
+});
+
+describe('specificity', () => {
+	it(':not', () => {
+		const el = createTestElement('<div></div>');
+		expect(createSelector('div').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':not(span)').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':not(span, a)').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':not(span, #foo)').match(el)).toStrictEqual([1, 0, 0]);
+	});
+
+	it(':is', () => {
+		const el = createTestElement('<div></div>');
+		expect(createSelector('div').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':is(div)').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':is(div, span)').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':is(div, #foo)').match(el)).toStrictEqual([1, 0, 0]);
+		expect(createSelector(':is(div, #foo, .bar)').match(el)).toStrictEqual([1, 0, 0]);
+		expect(createSelector(':is(div, #foo.bar)').match(el)).toStrictEqual([1, 1, 0]);
+	});
+
+	it(':where', () => {
+		const el = createTestElement('<div></div>');
+		expect(createSelector('div').match(el)).toStrictEqual([0, 0, 1]);
+		expect(createSelector(':where(div)').match(el)).toStrictEqual([0, 0, 0]);
+		expect(createSelector(':where(div, span)').match(el)).toStrictEqual([0, 0, 0]);
+		expect(createSelector(':where(div, #foo)').match(el)).toStrictEqual([0, 0, 0]);
+		expect(createSelector(':where(div, #foo, .bar)').match(el)).toStrictEqual([0, 0, 0]);
+		expect(createSelector(':where(div, #foo.bar)').match(el)).toStrictEqual([0, 0, 0]);
+	});
+});
+
+describe('search', () => {
+	it('search', () => {
+		const el = createTestElement('<a><div><button></button></div></a>');
+		expect(createSelector(':has(button)').search(el)[0].has?.[0].nodes?.[0].nodeName).toBe('BUTTON');
+	});
+});