ie11-custom-properties
Version:
Custom Properties polyfill for IE11.
102 lines (93 loc) • 3.56 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>CSS Custom Properties IE11 Test</title>
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="../ie11CustomProperties.js"><\x2fscript>');</script>
<body>
<a href="https://github.com/nuxodin/ie11CustomProperties" style="flex-basis:100%; max-width:none; padding:.5em">back to project</a>
<style>
html {
--root-green:green;
--root-red:red;
}
body {
--body-green:green;
--body-red:red;
}
#tests > * {
border:1px solid black;
padding:10px;
}
</style>
<div id=tests>
</div>
<script>;
setTimeout(function(){
var html = '<div id=noVars>';
html += '<h2>no vars</h2>';
html += '<style>.noVars {color:green}</style>';
for (var i=0; i<1000;i++) {
html += '<span class="noVars">x </span>';
}
html += '<span class="noVars last">x </span>';
html += '</div>';
var zeit0 = performance.now();
tests.insertAdjacentHTML('beforeend', html);
requestAnimationFrame(function check(){
var last = document.getElementById('noVars').querySelector('.last');
var computed = getComputedStyle(last).getPropertyValue('color') !== 'rgb(0, 0, 0)';
if (computed) {
var zeit1 = performance.now();
last.innerHTML = "Duration " + (zeit1 - zeit0) + " ms.";
} else {
requestAnimationFrame(check);
}
})
}, 1000)
setTimeout(function(){
var html = '<div id=gettingRootVars>';
html += '<h2>getting root vars</h2>';
html += '<style>.rootGetter {color:var(--root-green)}</style>';
for (var i=0; i<1000;i++) {
html += '<span class="rootGetter">x </span>';
}
html += '<span class="rootGetter last">x </span>';
html += '</div>';
var zeit0 = performance.now();
tests.insertAdjacentHTML('beforeend', html);
requestAnimationFrame(function check(){
var last = document.getElementById('gettingRootVars').querySelector('.last');
var computed = getComputedStyle(last).getPropertyValue('color') !== 'rgb(0, 0, 0)';
if (computed) {
var zeit1 = performance.now();
last.innerHTML = "Duration " + (zeit1 - zeit0) + " ms.";
} else {
requestAnimationFrame(check);
}
})
}, 2000)
setTimeout(function(){
var html = '<div id=nonRoot>';
html += '<h2>getting non-root vars</h2>';
html += '<style>.non-root {color:var(--body-green)}</style>';
for (var i=0; i<1000;i++) {
html += '<span class="non-root">x </span>';
}
html += '<span class="non-root last">x </span>';
html += '</div>';
var zeit0 = performance.now();
tests.insertAdjacentHTML('beforeend', html);
requestAnimationFrame(function check(){
var last = document.getElementById('nonRoot').querySelector('.last');
var computed = getComputedStyle(last).getPropertyValue('color') !== 'rgb(0, 0, 0)';
if (computed) {
var zeit1 = performance.now();
last.innerHTML = "Duration " + (zeit1 - zeit0) + " ms.";
} else {
requestAnimationFrame(check);
}
})
}, 3000)
</script>