1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_variables.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,80 @@
1.4 +<!DOCTYPE type>
1.5 +<title>Assorted CSS variable tests</title>
1.6 +<script src="/MochiKit/MochiKit.js"></script>
1.7 +<script src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 +<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
1.9 +
1.10 +<style id="test1">
1.11 +</style>
1.12 +
1.13 +<style id="test2">
1.14 +</style>
1.15 +
1.16 +<style id="test3">
1.17 +</style>
1.18 +
1.19 +<style id="test4">
1.20 +</style>
1.21 +
1.22 +<div id="t4"></div>
1.23 +
1.24 +<script>
1.25 +var tests = [
1.26 + function() {
1.27 + // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
1.28 + var test1 = document.getElementById("test1");
1.29 + test1.textContent = "p { --a:123!important; }";
1.30 + var declaration = test1.sheet.cssRules[0].style;
1.31 + declaration.cssText;
1.32 + declaration.setProperty("color", "black");
1.33 + is(declaration.getPropertyValue("--a"), "123");
1.34 + },
1.35 +
1.36 + function() {
1.37 + // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
1.38 + var test2 = document.getElementById("test2");
1.39 + test2.textContent = "p { --a: a !important; }";
1.40 + var declaration = test2.sheet.cssRules[0].style;
1.41 + is(declaration.getPropertyPriority("--a"), "important");
1.42 + },
1.43 +
1.44 + function() {
1.45 + // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
1.46 + var test3 = document.getElementById("test3");
1.47 + test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
1.48 + var declaration = test3.sheet.cssRules[0].style;
1.49 + is(declaration[declaration.length - 1], "--decoration");
1.50 + },
1.51 +
1.52 + function() {
1.53 + // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
1.54 + var test4 = document.getElementById("test4");
1.55 + test4.textContent = "#t4 { background-image: var(--a); }";
1.56 +
1.57 + var element = document.getElementById("t4");
1.58 + var path = window.location.pathname;
1.59 + var currentDir = path.substring(0, path.lastIndexOf('/'));
1.60 + var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
1.61 +
1.62 + is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
1.63 + },
1.64 +];
1.65 +
1.66 +function prepareTest() {
1.67 + // Load an external style sheet for test 4.
1.68 + var e = document.createElement("link");
1.69 + e.addEventListener("load", runTest);
1.70 + e.setAttribute("rel", "stylesheet");
1.71 + e.setAttribute("href", "support/external-variable-url.css");
1.72 + document.head.appendChild(e);
1.73 +}
1.74 +
1.75 +function runTest() {
1.76 + tests.forEach(function(fn) { fn(); });
1.77 + SimpleTest.finish();
1.78 +}
1.79 +
1.80 +SimpleTest.waitForExplicitFinish();
1.81 +SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
1.82 + prepareTest);
1.83 +</script>
