ie11-custom-properties
Version:
Custom Properties polyfill for IE11.
602 lines (549 loc) • 17.1 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 {
--green:green;
--red:red;
}
body {
--body-green:green;
--body-red:red;
}
.tests > * {
color:#fff;
padding:.5em;
margin:.5em 0;
background-color:red;
position:relative;
display:block;
}
.tests .code {
display:none;
color:black;
position:absolute;
padding:20px;
background:#555;
z-index:1;
right:0;
top:0;
}
.tests > *:hover .code {
display:block;
}
.tests .code > pre,
.tests .code > style,
.tests .code > script {
padding:1em;
display:block;
white-space:pre;
font-family: monospace;
background:#eee;
font-size:12px;
}
.tests .code > pre::before,
.tests .code > script::before,
.tests .code > style::before {
display:block;
font-size:1.2em;
}
.tests .code > style::before { content:'transformed'; }
.tests .code > pre::before { content:'original'; }
.tests .code > script::before { content:'script'; }
</style>
<!--
Dear contributor, pre tags are dynamicly changed to style tags.
This to make it possible to show the original style on hover.
-->
<div class=tests>
<div class=root-cp>
root custom property
<div class=code>
<pre>
.root-cp {
background:var(--green);
}
</pre>
</div>
</div>
<div class=non-root-cp>
non root custom property
<div class=code>
<pre>
.non-root-cp {
background:var(--body-green);
}
</pre>
</div>
</div>
<div class=fallback>
fallback
<div class=code>
<pre>
.fallback {
background-color:var(--notdefined, green);
}
</pre>
</div>
</div>
<div class=fallback-var>
other var as fallback
<div class=code>
<pre>
.fallback-var {
background-color:var(--notdefined, var(--green));
}
</pre>
</div>
</div>
<div class=fallback-var-mixed>
fallback var mixed, including round brackets (url())
<div class=code>
<pre>
.fallback-var-mixed {
background:var(--notdefined, repeat-y var(--undefined, var(--green)) fixed url(x.y));
}
</pre>
</div>
</div>
<div class=multiple-vars>
multiple vars inside brackets (linear-gradient)
<div class=code>
<pre>
.multiple-vars {
--my-green:green;
background: var(--green) linear-gradient(var(--green), var(--body-green), var(--my-green), transparent);
}
</pre>
</div>
</div>
<div class=fallback-non-body-var>
other non root var as fallback
<div class=code>
<pre>
.fallback-non-body-var {
background-color:var(--notdefined, var(--body-green));
}
</pre>
</div>
</div>
<div class=chaining>
chaining
<div class=code>
<pre>
.chaining {
--a:var(--green);
--b:var(--a);
--c:var(--b);
background-color:var(--c);
}
</pre>
</div>
</div>
<div class=nested-calc>
nested calc
<div class=code>
<pre>
.nested-calc {
--two:calc(1 + 1);
background-image: linear-gradient(green, green 50%, transparent 50%, transparent);
background-size: 100% calc(var(--two) * 100%);
}
</pre>
</div>
</div>
<div id=hover>
:hover (please hover to test)
<div class=code>
<pre>
#hover {
background-color:#ccc;
}
#hover:hover {
background-color:var(--green);
}
</pre>
</div>
</div>
<div id=hover_root>
:hover on :root (please hover to test)
<div class=code>
<pre>
#hover_root {
background-color:var(--root-hover-green);
}
:root {
--root-hover-green:red;
}
:root:hover {
--root-hover-green:green;
}
</pre>
</div>
</div>
<a id=target href="#target">
:target (please click to make it the target)
<div class=code>
<pre>
#target {
background-color:#ccc;
}
#target:target {
background-color:var(--green);
}
</pre>
</div>
</a>
<div id=focus tabindex=0>
:focus (please click to get focus)
<div class=code>
<pre>
#focus {
background-color:#ccc;
}
#focus:focus {
background-color:var(--green);
}
</pre>
</div>
</div>
<div class=before>
<div style="position:relative; z-index:1">::before</div>
<div class=code>
<pre>
.before::before {
content:'';
position:absolute;
top:0; left:0; right:0; bottom:0; z-index:0;
background-color:var(--green);
}
</pre>
</div>
</div>
<div class=beforeAndElement>
<div style="position:relative; z-index:1">::before and same property (background-color) on element</div>
<div class=code>
<pre>
.beforeAndElement::before {
content:'';
position:absolute;
bottom:0; top:0; left:0; right:0; z-index:0;
background-color:var(--body-green);
}
.beforeAndElement.beforeAndElement {
background-color:var(--red);
}
</pre>
</div>
</div>
<div class=attr style="background-color:var(--green)" ie-style="background-color:var(--green)">
attribute (ie-style="")
<div class=code>
<pre>
see the attribute in dev-tools
</pre>
</div>
</div>
<div class=dom_change>
parent dom change
<div class=code>
<script>
setTimeout(function(){
document.body.classList.add('dom_changed');
},200)
</script>
<pre>
body {
--dom-changed-green:red; /* todo? if this is not set, the polyfill does not know that this test is a target */
}
body.dom_changed {
--dom-changed-green:green;
}
.dom_change {
background-color:var(--dom-changed-green);
}
</pre>
</div>
</div>
<div id=svg>
<div style="position:relative; z-index:1">svg</div>
<svg style="position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; height:100%; width:100%" viewbox="0 0 10 10" preserveAspectRatio="none"><rect x="0" y="0" width="10" height="10"></rect></svg>
<div class=code>
<pre>
#svg rect {
fill:var(--green);
}
</pre>
</div>
</div>
<div id=js_getPV>
js computedStyle.getPropertyValue
<div class=code>
<script>
setTimeout(function(){
if (getComputedStyle(js_getPV).getPropertyValue('--green') === 'green') {
js_getPV.style.backgroundColor = 'green';
}
},10)
</script>
</div>
</div>
<div id=js_setP>
setProperty on own element
<div class=code>
<script>
js_setP.style.setProperty('--myGreen','green');
</script>
<pre>
#js_setP {
background-color:var(--myGreen);
}
</pre>
</div>
</div>
<div id=bodyDynamic inactive>
setProperty on body
<div class=code>
<script>
document.body.style.setProperty('--dyn-body-green', 'green');
</script>
<pre>
#bodyDynamic {
background-color:var(--dyn-body-green);
}
</pre>
</div>
</div>
<div id=rootDynamic inactive>
setProperty on root
<div class=code>
<script>
document.documentElement.style.setProperty('--dyn-root-green', 'green');
</script>
<pre>
#rootDynamic {
background-color:var(--dyn-root-green);
}
</pre>
</div>
</div>
<div id=rootDynamic_delayed inactive>
setProperty on root delayed
<div class=code>
<script>
setTimeout(function(){
document.documentElement.style.setProperty('--dyn-root-green-delayed', 'green');
},400)
</script>
<pre>
#rootDynamic_delayed {
background-color:var(--dyn-root-green-delayed);
}
</pre>
</div>
</div>
<div id=media>
media-query
<div class=code>
<pre>
@media (min-width: 10px) {
#media {
background:var(--green);
}
}
</pre>
</div>
</div>
<div id=important-getter class=important-getter>
!important getter
<div class=code>
<pre>
.important-getter {
background-color:var(--green) !important;
}
#important-getter {
background-color:var(--red);
}
</pre>
</div>
</div>
<div id=important-setter class=important-setter>
!important setter
<div class=code>
<pre>
.important-setter {
background-color:var(--green);
--green:green !important;
}
#important-setter {
--green:red;
}
</pre>
</div>
</div>
<div id=register-property-no-inherit>
non-inherited registered property
<div class=code>
<script>
CSS.registerProperty({
name:'--not-inheriting-green',
inherits:false,
initialValue:'green',
});
</script>
<pre>
body {
--not-inheriting-green:red;
}
#register-property-no-inherit {
background-color:var(--not-inheriting-green);
}
</pre>
</div>
</div>
<div id=inherit-keyword>
"inherit" keyword
<div class=code>
<pre>
#inherit-keyword {
--green:inherit;
background-color:var(--green);
}
</pre>
</div>
</div>
<div id=inherit-keyword-overwrite-registerProperty style="padding:0;">
<div class=-box style="padding:10px;">"inherit" keyword, overwrites "registerProperty"</div>
<div class=code>
<pre>
#inherit-keyword-overwrite-registerProperty {
--not-inheriting-green:green;
}
#inherit-keyword-overwrite-registerProperty .-box {
--not-inheriting-green:inherit;
background-color:var(--not-inheriting-green);
}
</pre>
</div>
</div>
<div id=addLater inactive>
later added html
<div class=code>
<script>
setTimeout(function(){
addLater.outerHTML = addLater.outerHTML.replace('inactive', 'active');
},200);
</script>
<pre>
#addLater[active] {
background-color:var(--green);
}
</pre>
</div>
</div>
<div id=specificity_id class=specificity_id>
specificity: .CP-getter will not overwrite #id
<div class=code>
<pre>
#specificity_id {
background-color:green;
}
.specificity_id {
background-color:var(--red);
}
</pre>
</div>
</div>
<div class=specificity_class>
specificity: .CP-getter will not overwrite .class.class
<div class=code>
<pre>
.specificity_class.specificity_class {
background-color:green;
}
.specificity_class {
background-color:var(--red);
}
</pre>
</div>
</div>
<div class=specificity_imortant id=specificity_imortant>
specificity: #CP-getter will not overwrite !important
<div class=code>
<pre>
.specificity_imortant {
background-color:green !important;
}
#specificity_imortant {
background-color:var(--red);
}
</pre>
</div>
</div>
<div class=specificity_cp_before>
specificity: CP-getter before not overwrites same selector after
<div class=code>
<pre>
.specificity_cp_before {
background-color:var(--red);
}
.specificity_cp_before {
background-color:green;
}
</pre>
</div>
</div>
<div class=specificity_cp_after>
specificity: CP-getter after overwrites same selector before
<div class=code>
<pre>
.specificity_cp_after {
background-color:red;
}
.specificity_cp_after {
background-color:var(--green);
}
</pre>
</div>
</div>
<div class=specificity_cp_before_non_root>
specificity: Non root CP-getter before not overwrites same selector after
<div class=code>
<pre>
.specificity_cp_before_non_root {
background-color:var(--body-red);
}
.specificity_cp_before_non_root {
background-color:green;
}
</pre>
</div>
</div>
<div class=specificity_cp_after_non_root>
specificity: Non-root CP-getter after overwrites same selector before
<div class=code>
<pre>
.specificity_cp_after_non_root {
background-color:red;
}
.specificity_cp_after_non_root {
background-color:var(--body-green);
}
</pre>
</div>
</div>
</div>
<script>
!document.body.msMatchesSelector && alert("You are not visiting this page in IE11, open it in IE11 to compare");
var pres = document.querySelectorAll('pre');
for (var i=0, pre; pre = pres[i++];) {
const style = document.createElement('style');
style.innerHTML = pre.innerHTML;
pre.parentNode.appendChild(style)
}
</script>