michael@0: <!DOCTYPE type>
michael@0: <title>Assorted CSS variable tests</title>
michael@0: <script src="/MochiKit/MochiKit.js"></script>
michael@0: <script src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0: <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
michael@0: 
michael@0: <style id="test1">
michael@0: </style>
michael@0: 
michael@0: <style id="test2">
michael@0: </style>
michael@0: 
michael@0: <style id="test3">
michael@0: </style>
michael@0: 
michael@0: <style id="test4">
michael@0: </style>
michael@0: 
michael@0: <div id="t4"></div>
michael@0: 
michael@0: <script>
michael@0: var tests = [
michael@0:   function() {
michael@0:     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
michael@0:     var test1 = document.getElementById("test1");
michael@0:     test1.textContent = "p { --a:123!important; }";
michael@0:     var declaration = test1.sheet.cssRules[0].style;
michael@0:     declaration.cssText;
michael@0:     declaration.setProperty("color", "black");
michael@0:     is(declaration.getPropertyValue("--a"), "123");
michael@0:   },
michael@0: 
michael@0:   function() {
michael@0:     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
michael@0:     var test2 = document.getElementById("test2");
michael@0:     test2.textContent = "p { --a: a !important; }";
michael@0:     var declaration = test2.sheet.cssRules[0].style;
michael@0:     is(declaration.getPropertyPriority("--a"), "important");
michael@0:   },
michael@0: 
michael@0:   function() {
michael@0:     // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
michael@0:     var test3 = document.getElementById("test3");
michael@0:     test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
michael@0:     var declaration = test3.sheet.cssRules[0].style;
michael@0:     is(declaration[declaration.length - 1], "--decoration");
michael@0:   },
michael@0: 
michael@0:   function() {
michael@0:     // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
michael@0:     var test4 = document.getElementById("test4");
michael@0:     test4.textContent = "#t4 { background-image: var(--a); }";
michael@0: 
michael@0:     var element = document.getElementById("t4");
michael@0:     var path = window.location.pathname;
michael@0:     var currentDir = path.substring(0, path.lastIndexOf('/'));
michael@0:     var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
michael@0: 
michael@0:     is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
michael@0:   },
michael@0: ];
michael@0: 
michael@0: function prepareTest() {
michael@0:   // Load an external style sheet for test 4.
michael@0:   var e = document.createElement("link");
michael@0:   e.addEventListener("load", runTest);
michael@0:   e.setAttribute("rel", "stylesheet");
michael@0:   e.setAttribute("href", "support/external-variable-url.css");
michael@0:   document.head.appendChild(e);
michael@0: }
michael@0: 
michael@0: function runTest() {
michael@0:   tests.forEach(function(fn) { fn(); });
michael@0:   SimpleTest.finish();
michael@0: }
michael@0: 
michael@0: SimpleTest.waitForExplicitFinish();
michael@0: SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
michael@0:                           prepareTest);
michael@0: </script>