@markuplint/rules 3.8.0 → 3.9.0

package/test/permitted-contents/matches-selector.spec.js

@@ -0,0 +1,59 @@
+const specs = require('@markuplint/html-spec');
+const { createTestElement } = require('@markuplint/ml-core');
+
+const { matchesSelector } = require('../../lib/permitted-contents/matches-selector');
+
+function c(model, innerHtml, tp) {
+	const el = createTestElement(`<div>${innerHtml}</div>`, { specs });
+	const child = Array.from(el.childNodes)[0];
+	if (tp) {
+		// @ts-ignore
+		child.__transparentModel = {
+			el,
+			additionalCondition: tp,
+		};
+	}
+	return matchesSelector(model, child, specs, { ignoreHasMutableChildren: true }, 0);
+}
+
+it('a', () => {
+	expect(c('a', '<a></a>').type).toBe('MATCHED');
+	expect(c('a', '<b></b>').type).toBe('UNMATCHED_SELECTORS');
+	expect(c('a', '<c></c>').type).toBe('UNMATCHED_SELECTORS');
+	expect(c('a', 'text').type).toBe('UNEXPECTED_EXTRA_NODE');
+	expect(c('a', '').type).toBe('MISSING_NODE');
+});
+
+it('#flow', () => {
+	expect(c('#flow', '<a></a>').type).toBe('MATCHED');
+	expect(c('#flow', '<b></b>').type).toBe('MATCHED');
+	expect(c('#flow', '<c></c>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c('#flow', 'text').type).toBe('MATCHED');
+	expect(c('#flow', '').type).toBe('MATCHED_ZERO');
+});
+
+it(':model(flow)', () => {
+	expect(c(':model(flow)', '<a></a>').type).toBe('MATCHED');
+	expect(c(':model(flow)', '<b></b>').type).toBe('MATCHED');
+	expect(c(':model(flow)', '<c></c>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c(':model(flow)', 'text').type).toBe('MATCHED');
+	expect(c(':model(flow)', '').type).toBe('MATCHED_ZERO');
+});
+
+it('#text', () => {
+	expect(c('#text', '<a></a>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c('#text', '<b></b>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c('#text', '<c></c>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c('#text', 'text').type).toBe('MATCHED');
+	expect(c('#text', '').type).toBe('MATCHED_ZERO');
+});
+
+// it(':model(flow):not(:model(interactive))', () => {
+// 	expect(c(':model(flow)', '<a></a>', ':not(:model(interactive))').type).toBe('MATCHED');
+// 	expect(c(':model(flow)', '<b></b>', ':not(:model(interactive))').type).toBe('MATCHED');
+// 	expect(c(':model(flow)', '<c></c>', ':not(:model(interactive))').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+// 	expect(c(':model(flow)', 'text', ':not(:model(interactive))').type).toBe('MATCHED');
+// 	expect(c(':model(flow)', '<button></button>', ':not(:model(interactive))').type).toBe(
+// 		'TRANSPARENT_MODEL_DISALLOWS',
+// 	);
+// });

package/test/permitted-contents/order.spec.js

@@ -0,0 +1,351 @@
+const specs = require('@markuplint/html-spec');
+const { createTestElement } = require('@markuplint/ml-core');
+
+const { order } = require('../../lib/permitted-contents/order');
+
+function c(models, innerHtml) {
+	const el = createTestElement(`<div>${innerHtml}</div>`);
+	return order(models, Array.from(el.childNodes), specs, { ignoreHasMutableChildren: true }, 0);
+}
+
+it('ordered requires', () => {
+	const models = [
+		//
+		{ require: 'a' },
+		{ require: 'b' },
+		{ require: 'c' },
+	];
+
+	expect(c(models, '<a></a>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a><b></b>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a><b></b><c></c>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><b></b><c></c><d></d>').type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('ordered requires with #flow', () => {
+	const models = [
+		//
+		{ require: '#flow' },
+		{ require: 'a' },
+		{ require: '#flow' },
+		{ require: 'b' },
+	];
+
+	expect(c(models, '').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a><b></b>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><b></b><c></c>').type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('ordered requires and optionals', () => {
+	const models = [
+		//
+		{ require: 'a' },
+		{ optional: 'b' },
+		{ require: 'c' },
+	];
+
+	expect(c(models, '<a></a><b></b><c></c>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><b></b><b></b><c></c>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<b></b><a></a>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a><c></c>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><c></c><b></b>').type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('ordered requires and optionals with #flow', () => {
+	const models = [
+		//
+		{ require: 'a' },
+		{ optional: 'b' },
+		{ optional: 'c' },
+		{ require: '#flow' },
+	];
+
+	expect(c(models, '<a></a><b></b><c></c>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><b></b><b></b><c></c>').type).toBe('UNEXPECTED_EXTRA_NODE');
+	expect(c(models, '<a></a>').type).toBe('MATCHED');
+	expect(c(models, '<b></b><a></a>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<a></a><c></c>').type).toBe('MATCHED');
+	expect(c(models, '<a></a><c></c><b></b>').type).toBe('MATCHED');
+});
+
+it('ordered zeroOrMore combination', () => {
+	const models = [
+		//
+		{ zeroOrMore: 'a' },
+		{ zeroOrMore: 'b' },
+		{ zeroOrMore: 'c' },
+	];
+
+	expect(c(models, '<b></b>').type).toBe('MATCHED');
+	expect(c(models, '<c></c>').type).toBe('MATCHED');
+	expect(c(models, '').type).toBe('MATCHED_ZERO');
+	expect(c(models, '<b></b><c></c>').type).toBe('MATCHED');
+});
+
+it('the dl element', () => {
+	const models = [
+		{
+			zeroOrMore: ':model(script-supporting)',
+		},
+		{
+			oneOrMore: 'dt',
+		},
+		{
+			zeroOrMore: ':model(script-supporting)',
+		},
+		{
+			oneOrMore: 'dd',
+		},
+		{
+			zeroOrMore: ':model(script-supporting)',
+		},
+	];
+
+	expect(c(models, '<dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt>').type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('the dl element', () => {
+	const models = [
+		{
+			oneOrMore: [
+				{
+					zeroOrMore: ':model(script-supporting)',
+				},
+				{
+					oneOrMore: 'dt',
+				},
+				{
+					zeroOrMore: ':model(script-supporting)',
+				},
+				{
+					oneOrMore: 'dd',
+				},
+				{
+					zeroOrMore: ':model(script-supporting)',
+				},
+			],
+		},
+	];
+
+	expect(c(models, '<dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt><dd></dd><dd></dd><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+});
+
+it('the dl element', () => {
+	const models = [
+		{
+			choice: [
+				[
+					{
+						oneOrMore: [
+							{
+								zeroOrMore: ':model(script-supporting)',
+							},
+							{
+								oneOrMore: 'dt',
+							},
+							{
+								zeroOrMore: ':model(script-supporting)',
+							},
+							{
+								oneOrMore: 'dd',
+							},
+							{
+								zeroOrMore: ':model(script-supporting)',
+							},
+						],
+					},
+				],
+				[
+					{
+						zeroOrMore: ':model(script-supporting)',
+					},
+					{
+						oneOrMore: 'div',
+					},
+					{
+						zeroOrMore: ':model(script-supporting)',
+					},
+				],
+			],
+		},
+	];
+
+	expect(c(models, '<dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt>').query).toBe('dd');
+	expect(c(models, '<dt></dt><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt><dd></dd>').type).toBe('MATCHED');
+	expect(c(models, '<dt></dt><dd></dd><dt></dt><dd></dd><dd></dd><dt></dt>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<div></div>').type).toBe('MATCHED');
+	expect(c(models, '<div></div><div></div>').type).toBe('MATCHED');
+});
+
+it('the ruby element', () => {
+	const models = [
+		{
+			oneOrMore: [
+				{
+					require: ':model(phrasing):not(ruby, :has(ruby))',
+				},
+				{
+					choice: [
+						[
+							{
+								oneOrMore: 'rt',
+							},
+						],
+						[
+							{
+								oneOrMore: [
+									{
+										require: 'rp',
+									},
+									{
+										oneOrMore: [
+											{
+												require: 'rt',
+											},
+											{
+												require: 'rp',
+											},
+										],
+									},
+								],
+							},
+						],
+					],
+				},
+			],
+		},
+	];
+
+	expect(c(models, '<span></span>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<span></span>').query).toBe('rt');
+	expect(c(models, '<span></span><rt></rt>').type).toBe('MATCHED');
+	expect(c(models, '<span></span><rp></rp><rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<span></span><rp></rp><rt></rt>').query).toBe('rp');
+});
+
+it('part of the ruby element', () => {
+	const models = [
+		{
+			require: ':model(phrasing):not(ruby, :has(ruby))',
+		},
+		{
+			choice: [
+				[
+					{
+						oneOrMore: 'rt',
+					},
+				],
+				[
+					{
+						oneOrMore: [
+							{
+								require: 'rp',
+							},
+							{
+								oneOrMore: [
+									{
+										require: 'rt',
+									},
+									{
+										require: 'rp',
+									},
+								],
+							},
+						],
+					},
+				],
+			],
+		},
+	];
+
+	expect(c(models, '<span></span>').type).toBe('MISSING_NODE_ONE_OR_MORE');
+	expect(c(models, '<span></span>').query).toBe('rt');
+	expect(c(models, '<span></span><rt></rt>').type).toBe('MATCHED');
+	expect(c(models, '<span></span><rp></rp><rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<span></span><rp></rp><rt></rt>').query).toBe('rp');
+});
+
+it('part of the ruby element', () => {
+	const models = [
+		{
+			oneOrMore: [
+				{
+					require: 'rp',
+				},
+				{
+					oneOrMore: [
+						{
+							require: 'rt',
+						},
+						{
+							require: 'rp',
+						},
+					],
+				},
+			],
+		},
+	];
+
+	expect(c(models, '<span></span>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<span></span>').query).toBe('rp');
+	expect(c(models, '<rp></rp>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<rp></rp>').query).toBe('rt');
+	expect(c(models, '<rp></rp><rt></rt><rp></rp>').type).toBe('MATCHED');
+	expect(c(models, '<rp></rp><rt></rt><rp></rp><rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<rp></rp><rt></rt><rp></rp><rt></rt>').query).toBe('rp');
+	expect(c(models, '<rp></rp><rt></rt><rp></rp><rt></rt><rp></rp>').type).toBe('MATCHED');
+});
+
+it('part of the ruby element', () => {
+	const models = [
+		{
+			oneOrMore: [
+				{
+					require: 'rt',
+				},
+				{
+					require: 'rp',
+				},
+			],
+		},
+	];
+
+	expect(c(models, '<rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<rt></rt>').query).toBe('rp');
+	expect(c(models, '<rt></rt><rp></rp>').type).toBe('MATCHED');
+	expect(c(models, '<rt></rt><rp></rp><rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<rt></rt><rp></rp><rt></rt>').query).toBe('rp');
+	expect(c(models, '<rt></rt><rp></rp><rt></rt><rp></rp>').type).toBe('MATCHED');
+});
+
+it('part of the ruby element', () => {
+	const models = [
+		{
+			require: 'rt',
+		},
+		{
+			require: 'rp',
+		},
+	];
+
+	expect(c(models, '<rt></rt>').type).toBe('MISSING_NODE_REQUIRED');
+	expect(c(models, '<rt></rt>').query).toBe('rp');
+	expect(c(models, '<rt></rt><rp></rp>').type).toBe('MATCHED');
+});

package/test/permitted-contents/recursive-branch.spec.js

@@ -0,0 +1,41 @@
+const specs = require('@markuplint/html-spec');
+const { createTestElement } = require('@markuplint/ml-core');
+
+const { recursiveBranch } = require('../../lib/permitted-contents/recursive-branch');
+
+function c(models, innerHtml) {
+	const el = createTestElement(`<div>${innerHtml}</div>`);
+	return recursiveBranch(models, Array.from(el.childNodes), specs, { ignoreHasMutableChildren: true }, 0);
+}
+
+it('a', () => {
+	expect(c('a', '<a></a>').type).toBe('MATCHED');
+	expect(c('a', '<b></b>').type).toBe('UNMATCHED_SELECTORS');
+	expect(c('a', '<c></c>').type).toBe('UNMATCHED_SELECTORS');
+	expect(c('a', 'text').type).toBe('UNEXPECTED_EXTRA_NODE');
+	expect(c('a', '').type).toBe('MISSING_NODE');
+});
+
+it('#flow', () => {
+	expect(c('#flow', '<a></a>').type).toBe('MATCHED');
+	expect(c('#flow', '<b></b>').type).toBe('MATCHED');
+	expect(c('#flow', '<c></c>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c('#flow', 'text').type).toBe('MATCHED');
+	expect(c('#flow', '').type).toBe('MATCHED_ZERO');
+});
+
+it('a, #flow', () => {
+	expect(c(['a', '#flow'], '<a></a>').type).toBe('MATCHED');
+	expect(c(['a', '#flow'], '<b></b>').type).toBe('MATCHED');
+	expect(c(['a', '#flow'], '<c></c>').type).toBe('UNMATCHED_SELECTOR_BUT_MAY_EMPTY');
+	expect(c(['a', '#flow'], 'text').type).toBe('MATCHED');
+	expect(c(['a', '#flow'], '').type).toBe('MATCHED_ZERO');
+});
+
+it('c, #flow', () => {
+	expect(c(['c', '#flow'], '<a></a>').type).toBe('MATCHED');
+	expect(c(['c', '#flow'], '<b></b>').type).toBe('MATCHED');
+	expect(c(['c', '#flow'], '<c></c>').type).toBe('MATCHED');
+	expect(c(['c', '#flow'], 'text').type).toBe('MATCHED');
+	expect(c(['c', '#flow'], '').type).toBe('MATCHED_ZERO');
+});

package/test/permitted-contents/represent-transparent-nodes.spec.js

@@ -0,0 +1,24 @@
+const specs = require('@markuplint/html-spec');
+const { createTestElement } = require('@markuplint/ml-core');
+
+const {
+	representTransparentNodes,
+	transparentMode,
+} = require('../../lib/permitted-contents/represent-transparent-nodes');
+
+function c(html) {
+	const el = createTestElement(`<div>${html}</div>`);
+	const { nodes } = representTransparentNodes(Array.from(el.children), specs, { ignoreHasMutableChildren: true });
+	return nodes.map(n => n.nodeName.toLowerCase() + (transparentMode.has(n) ? '*' : ''));
+}
+
+it('<div>', () => {
+	expect(c('<div></div>')).toStrictEqual(['div']);
+});
+
+it('<audio>', () => {
+	expect(c('<audio></audio>')).toStrictEqual([]);
+	expect(c('<audio><span></span></audio>')).toStrictEqual(['span*']);
+	expect(c('<audio><source></source><span></span></audio>')).toStrictEqual(['span*']);
+	expect(c('<audio><source></source><track></track><span></span></audio>')).toStrictEqual(['span*']);
+});

package/test/permitted-contents/start.spec.js

@@ -0,0 +1,67 @@
+const specs = require('@markuplint/html-spec');
+const { createTestElement } = require('@markuplint/ml-core');
+const { getContentModel } = require('@markuplint/ml-spec');
+
+const { start } = require('../../lib/permitted-contents/start');
+
+function c(html, target) {
+	const root = createTestElement(html, specs);
+	const el = target ? root.querySelector(target) : root;
+	return start(getContentModel(el, specs.specs), el, specs, { ignoreHasMutableChildren: true });
+}
+
+it('transparent: <a>', () => {
+	expect(c('<a href><button></button></a>')[0].type).toBe('MATCHED');
+	expect(c('<a href><button></button></a>')[1].type).toBe('TRANSPARENT_MODEL_DISALLOWS');
+	expect(c('<a href><b></b></a>')[0].type).toBe('MATCHED');
+	expect(c('<a href>text</a>')[0].type).toBe('MATCHED');
+	expect(c('<a href></a>')[0].type).toBe('MATCHED_ZERO');
+	expect(c('<a><div></div><span></span><em></em></a>')[0].type).toBe('MATCHED');
+});
+
+it('transparent: <del> with <details>', () => {
+	expect(c('<details><summary></summary><del></del></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><del>text</del></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><del><b></b><b></b><b></b></del></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><del><c></c></del></details>')[0].type).toBe('UNEXPECTED_EXTRA_NODE');
+	expect(c('<details><summary></summary><del><c></c></del></details>')[0].scope.nodeName).toBe('C');
+});
+
+it('transparent: <a> with <details> (<a> perspective)', () => {
+	expect(c('<details><summary></summary><a href></a></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><a href>text</a></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><a href><button></button></a></details>')[0].type).toBe('MATCHED');
+	expect(c('<details><summary></summary><a href><button></button></a></details>')[1].type).toBe(
+		'TRANSPARENT_MODEL_DISALLOWS',
+	);
+});
+
+it('transparent: <a> with <div>', () => {
+	expect(c('<div><a><option></option></a></div>')[0].type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('transparent: <a> with <svg>', () => {
+	expect(c('<svg><a><text>text</text></a></svg>')[0].type).toBe('MATCHED');
+	expect(c('<svg><a><text>text</text></a></svg>', 'a')[0].type).toBe('MATCHED');
+	expect(c('<svg><a><text>text</text></a></svg>', 'text')[0].type).toBe('MATCHED');
+});
+
+it('conditional transparent: <audio>', () => {
+	expect(c('<audio src="path/to"><source /></audio>')[0].type).toBe('MATCHED');
+	expect(c('<div><audio src="path/to"><source /></audio></div>', 'audio')[0].type).toBe('MATCHED');
+	expect(c('<div><audio src="path/to"><source /></audio></div>')[0].type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it('transparent: <audio> with <audio>', () => {
+	expect(c('<audio><audio></audio></audio>')[0].type).toBe('MATCHED_ZERO');
+	expect(c('<audio><audio></audio></audio>')[1].type).toBe('TRANSPARENT_MODEL_DISALLOWS');
+});
+
+it('extra nodes', () => {
+	expect(c('<ul>TEXT</ul>')[0].type).toBe('UNEXPECTED_EXTRA_NODE');
+});
+
+it(':has', () => {
+	expect(c('<a><div><div><button></button></div></div></a>')[0].hint.not?.nodeName).toBeUndefined();
+	expect(c('<a><div><div><button></button></div></div></a>')[1].hint.not?.nodeName).toBe('BUTTON');
+});

package/test/placeholder-label-option/index.spec.js

@@ -0,0 +1,113 @@
+const { mlRuleTest } = require('markuplint');
+
+const rule = require('../../lib/placeholder-label-option').default;
+
+test('Valid placeholder', async () => {
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required>
+					<option value="">Placeholder</option>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([]);
+
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required multiple>
+					<option value="placeholder">Placeholder</option>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([]);
+
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required size="2">
+					<option value="placeholder">Placeholder</option>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([]);
+});
+
+test("Invalid: first option element's value is not empty", async () => {
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required>
+					<option value="placeholder">Placeholder</option>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<select required>',
+			message: 'Need the placeholder label option',
+		},
+	]);
+
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required size="1">
+					<option value="placeholder">Placeholder</option>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<select required size="1">',
+			message: 'Need the placeholder label option',
+		},
+	]);
+});
+
+test("Invalid: Invalid: first option element's parent is optgroup", async () => {
+	expect(
+		(
+			await mlRuleTest(
+				rule,
+				`<select required>
+					<optgroup label="Group">
+						<option value="">Placeholder</option>
+					</optgroup>
+					<option value="option1">Option 1</option>
+					<option value="option2">Option 2</option>
+				</select>`,
+			)
+		).violations,
+	).toStrictEqual([
+		{
+			severity: 'error',
+			line: 1,
+			col: 1,
+			raw: '<select required>',
+			message: 'Need the placeholder label option',
+		},
+	]);
+});