Ryosuke Niwa rniwa

## no-layout.html
<!DOCTYPE html>
<html>
<body>
<script>

var NoLayout = (function () {
    var layoutGuardCount = 0;

    function wrapMethod(name, propertyName) {
        if (NoLayout.InProduction)

## DOMTransactionSketch.js

transaction = new DOMTransaction(function (container, articleList) {
    var childCount = container.childNodes.length;
    for (let article of articleList)
        container.append(article);
    // No DOM mutation is made until this function exits.
    console.assert(childCount == container.childNodes.length);
});

transaction.commit(element, articles);

## timing-of-connectedCallback-affected-by-presence-of-disconnectedCallback.html
<!doctype html>
<html>
<body>
<pre id="log"></pre>
<script>

function log(text) {
    document.getElementById('log').textContent += `${text}\n`;
}

## slotchange-removal.html
<!DOCTYPE html>
<html>
<body>
<pre id="result"></pre>
<script>

async function createTree(shadowContent)
{
    const host = document.createElement('div');
    host.innerHTML = '<span></span>';

## disabled-mouse-event.html
<!DOCTYPE html>
<html>
<body>
<div><button id="button" type="submit" disabled><span>Go</span></button></div>
<pre id="log"></pre>
<script>

function logEventCapturing(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} capturing path:${event.composedPath().length}\n`; }
function logEventBubbling(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} bubbling path:${event.composedPath().length}\n`; }

## form-stop-propagation.html
<!DOCTYPE html>
<html>
<body>
<form id="outer-form" action="javascript:doAction(outerForm)">
</form>
<form id="inner-form" method="GET" action="javascript:doAction(innerForm)">
    <div id="buttonParent">
        <input>
        <button id="submitButton" type="submit">Go</button>
    </div>

## radio-click.html
<!DOCTYPE html>
<html>
<body>
<input type="radio">
<script>

const input = document.querySelector('input');
const clickEvent = new MouseEvent('click', {button: 0, which: 1});
input.addEventListener('change', () => {
    alert(clickEvent.eventPhase);

## resize.html
<!DOCTYPE html>
<html>
<body>
<pre id="log"></pre>
<script>

let lastSize = null;
function updateSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
	<!DOCTYPE html>
	<html>
	<body>
	<script>

	var NoLayout = (function () {
	var layoutGuardCount = 0;

	function wrapMethod(name, propertyName) {
	if (NoLayout.InProduction)

	transaction = new DOMTransaction(function (container, articleList) {
	var childCount = container.childNodes.length;
	for (let article of articleList)
	container.append(article);
	// No DOM mutation is made until this function exits.
	console.assert(childCount == container.childNodes.length);
	});

	transaction.commit(element, articles);