plugins/css-blank-pseudo/test/_browser.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="help" href="https://www.w3.org/TR/selectors-4/#blank">
	<link rel="stylesheet" href="/test/browser.expect.css">
	<script src="/dist/browser-global.js"></script>
	<script>self._cssBlankPseudoInit = cssBlankPseudoInit</script>
	<script>self._cssBlankPseudoInit();</script>
</head>
<body>
	<input type="tel" id="tel-input" aria-label="">
	<input type="text" id="text-input" aria-label="" value="something">
	<input type="number" id="number-input" aria-label="">
	<input type="password" id="password-input" aria-label="">
	<textarea id="textarea" aria-label=""></textarea>
	<select id="select" aria-label="">
		<option value="" selected>Empty</option>
		<option value="non-empty">Non Empty</option>
	</select>
	<select id="multiselect" multiple="" aria-label="">
		<option value="non-empty">Non Empty</option>
		<option value="non-empty2">Non Empty 2</option>
		<option value="non-empty3">Non Empty 3</option>
	</select>

	<script type="module">
		const purple = 'rgb(128, 0, 128)';
		const tel = document.getElementById('tel-input');
		const text = document.getElementById('text-input');
		const number = document.getElementById('number-input');
		const password = document.getElementById('password-input');
		const textarea = document.getElementById('textarea');
		const select = document.getElementById('select');
		const multiselect = document.getElementById('multiselect');
		const elements = {
			tel,
			text,
			number,
			password,
			textarea,
			select,
			multiselect
		};

		function rafP(callback) {
			return new Promise((resolve) => {
				requestAnimationFrame(() => {
					requestAnimationFrame(() => {
						callback();
						resolve();
					});
				});
			});
		}

		function isBlank(element) {
			const containsAttribute = element.hasAttribute('blank') || element.classList.contains('css-blank');
			const background = getComputedStyle(element).backgroundColor;

			return containsAttribute && background === purple;
		}

		function isNotBlank(element) {
			return !isBlank(element);
		}

		function testBlankState(testName, element, shouldBeBlank) {
			const testFunction = shouldBeBlank ? isBlank : isNotBlank;
			const wording = shouldBeBlank ? 'to be' : 'not to be';
			const result = testFunction(element);

			if (result !== true) {
				throw new Error(testName + ': ' + element.id + ' expected ' + wording + ' blank');
			}

			return result;
		}

		self.runTest = async function runTest() {
			self._cssBlankPseudoInit();
			return await testBlank();
		};

		self.checkElement = async function checkElement(testName, element, shouldBeBlank) {
			const el = typeof element === 'string' ? elements[element] : element;
			return testBlankState(testName, el, shouldBeBlank);
		};

		async function testBlank() {
			await rafP(() => {
				testBlankState('on load', tel, true);
				testBlankState('on load', text, false);
				testBlankState('on load', number, true);
				testBlankState('on load', password, true);
				testBlankState('on load', textarea, true);
				testBlankState('on load', select, true);
				testBlankState('on load', multiselect, true);
			});

			return true;
		}
	</script>
</body>
</html>