Nolan Lawson nolanlawson

nolanlawson / index.html

Last active July 10, 2022 15:49

Test Windows 11 emoji

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test Windows 11 emoji</title>
	<style>
	.emoji-1 {
	font-family: "Segoe UI Emoji";
	}
	.emoji-2 {

nolanlawson / index.html

Created July 6, 2022 18:08

Test event capture

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test event capture</title>
	</head>
	<body>

	<h1>Test event capture</h1>

nolanlawson / .gitignore

Last active June 30, 2022 18:46

Separate styles versus concatenated styles benchmark

node_modules

nolanlawson / chrome.results.json

Last active June 25, 2022 20:09

Raw numbers from Shadow DOM selector benchmark, Mac Mini

nolanlawson / chrome.results.json

Last active June 24, 2022 02:18

Raw numbers from shadow DOM selector benchmark

nolanlawson / max_dom_depth.js

Last active June 22, 2022 13:21

Measure max DOM depth

	Math.max(...[...document.querySelectorAll('*')].map(node => {
	let count = 0
	while ((node = node.parentNode)) { count++ }
	return count
	}))

nolanlawson / index.html

Last active June 19, 2022 02:50

Separate styles vs one big style

This file has been truncated, but you can view the full file.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>Separate styles vs one big style</title>
	</head>
	<body>
	<main style="max-width: 600px; margin: 0 auto;">
	<h1>Separate styles vs one big style</h1>

nolanlawson / imports.html

Last active June 16, 2022 22:25

Speculative preparser test

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS preparser: imports</title>
	</head>
	<body>
	<h1>CSS preparser: imports</h1>
	<pre id="display"></pre>
	<script>

nolanlawson / index.html

Created June 16, 2022 20:19

delegation

	<!-- delegation -->
	<x-input aria-labelledby="foo">
	#shadow-root
	<input type=text autoarialabelledby> <!-- delegates aria-labelledby to the host -->
	</x-input>

	<!-- reflection -->
	<x-label id="foo">
	#shadow-root reflects=ariaLabelledBy
	<label reflectsAriaLabelledBy> <!-- reflects its "id" upward, in a sense -->

nolanlawson / index.html

Last active June 14, 2022 05:34

Dialog element - repro browser issue with shadow element

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Dialog element and shadow DOM - first element is in a closed shadow root</title>
	<style>
	body {
	margin: 0 auto;
	max-width: 400px;
	padding: 40px;