Ryosuke Niwa rniwa

I'm a @WebKit reviewer.

rniwa / no-layout.html

Last active August 29, 2015 14:22

no-layout

	<!DOCTYPE html>
	<html>
	<body>
	<script>

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

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

rniwa / DOMTransactionSketch.js

Last active May 31, 2016 01:50


	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);

Created August 15, 2018 03:25

Demo that the presence of disconnectedCallback can expedite an invocation of connectedCallback

	<!doctype html>
	<html>
	<body>
	<pre id="log"></pre>
	<script>

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

rniwa / slotchange-removal.html

Created August 30, 2018 23:45

Demonstrating the problem that the setter of textContent creates a superfluous slotchange events

	<!DOCTYPE html>
	<html>
	<body>
	<pre id="result"></pre>
	<script>

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

rniwa / disabled-mouse-event.html

Last active March 8, 2022 09:52

Dispatching a mouse event and a non-mouse on a disabled button

	<!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`; }

rniwa / form-stop-propagation.html

Created September 6, 2018 07:22

Stopping of submit event at a form element

	<!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>

rniwa / radio-click.html

Created September 6, 2018 20:05

Dispatching click event on a radio button and observing the event phase inside a change event listener

	<!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);

rniwa / resize.html

Created October 15, 2019 02:10

resize event test

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

	let lastSize = null;
	function updateSize() {
	const width = window.innerWidth;
	const height = window.innerHeight;