valdrinkoshi/unconditional-paint.html

## unconditional-paint.html
<!DOCTYPE html>
<!-- Open the dev tools and from the console run `runTests(10)` and observe the paiting that is triggered. -->
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>unconditional paint for user-select and pointer-events</title>
  <style>
    .pointerEventsNone {
      pointer-events: none;
    }

    .userSelectNone {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
    }
  </style>
</head>

<body>
  <script>
    var c = document.createElement('div');
    for (var i = 0; i < 100; i++) {
      var el = document.createElement('div');
      el.textContent = 'lorem';
      var t = document.createElement('button');
      t.textContent = 'lorem';
      el.appendChild(t);
      t = document.createElement('input');
      t.value = 'lorem';
      el.appendChild(t);
      c.appendChild(el);
    }
    document.body.appendChild(c);

    function runTests(runs) {
      waitPromise(1000)
        .then(toggleClass.bind(window, 'pointerEventsNone', runs))
        .then(waitPromise.bind(window, 1000))
        .then(toggleClass.bind(window, 'userSelectNone', runs));
    }

    function toggleClass(cssClass, runs) {
      console.log('toggleClass start', cssClass);
      var promise = waitPromise(0);
      for (var i = 0; i < runs; i++) {
        promise = promise.then(function() {
          c.classList.toggle(cssClass);
          return waitPromise(100);
        });
      }
      return promise.then(function() {
        console.log('toggleClass end', cssClass);
      });
    }

    function waitPromise(ms) {
      return new Promise(function(resolve) {
        setTimeout(resolve, ms);
      });
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<!-- Open the dev tools and from the console run `runTests(10)` and observe the paiting that is triggered. -->
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

	<title>unconditional paint for user-select and pointer-events</title>
	<style>
	.pointerEventsNone {
	pointer-events: none;
	}

	.userSelectNone {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	}
	</style>
	</head>

	<body>
	<script>
	var c = document.createElement('div');
	for (var i = 0; i < 100; i++) {
	var el = document.createElement('div');
	el.textContent = 'lorem';
	var t = document.createElement('button');
	t.textContent = 'lorem';
	el.appendChild(t);
	t = document.createElement('input');
	t.value = 'lorem';
	el.appendChild(t);
	c.appendChild(el);
	}
	document.body.appendChild(c);

	function runTests(runs) {
	waitPromise(1000)
	.then(toggleClass.bind(window, 'pointerEventsNone', runs))
	.then(waitPromise.bind(window, 1000))
	.then(toggleClass.bind(window, 'userSelectNone', runs));
	}

	function toggleClass(cssClass, runs) {
	console.log('toggleClass start', cssClass);
	var promise = waitPromise(0);
	for (var i = 0; i < runs; i++) {
	promise = promise.then(function() {
	c.classList.toggle(cssClass);
	return waitPromise(100);
	});
	}
	return promise.then(function() {
	console.log('toggleClass end', cssClass);
	});
	}

	function waitPromise(ms) {
	return new Promise(function(resolve) {
	setTimeout(resolve, ms);
	});
	}
	</script>
	</body>

	</html>