Last active
August 10, 2016 21:22
-
-
Save valdrinkoshi/0e98ce7296939539043a2b67e0270edd to your computer and use it in GitHub Desktop.
unconditional paint for user-select and pointer-events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment