summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_variables.html
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style/test/test_variables.html')
-rw-r--r--layout/style/test/test_variables.html125
1 files changed, 125 insertions, 0 deletions
diff --git a/layout/style/test/test_variables.html b/layout/style/test/test_variables.html
new file mode 100644
index 000000000..a1dd341a7
--- /dev/null
+++ b/layout/style/test/test_variables.html
@@ -0,0 +1,125 @@
+<!DOCTYPE type>
+<title>Assorted CSS variable tests</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+
+<style id="test1">
+</style>
+
+<style id="test2">
+</style>
+
+<style id="test3">
+</style>
+
+<style id="test4">
+</style>
+
+<div id="t4"></div>
+
+<style id="test5">
+</style>
+
+<div id="t5"></div>
+
+<style id="test6">
+</style>
+
+<style id="test7">
+</style>
+
+<script>
+var tests = [
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
+ var test1 = document.getElementById("test1");
+ test1.textContent = "p { --a:123!important; }";
+ var declaration = test1.sheet.cssRules[0].style;
+ declaration.cssText;
+ declaration.setProperty("color", "black");
+ is(declaration.getPropertyValue("--a"), "123");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
+ var test2 = document.getElementById("test2");
+ test2.textContent = "p { --a: a !important; }";
+ var declaration = test2.sheet.cssRules[0].style;
+ is(declaration.getPropertyPriority("--a"), "important");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
+ var test3 = document.getElementById("test3");
+ test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
+ var declaration = test3.sheet.cssRules[0].style;
+ is(declaration[declaration.length - 1], "--decoration");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
+ var test4 = document.getElementById("test4");
+ test4.textContent = "#t4 { background-image: var(--a); }";
+
+ var element = document.getElementById("t4");
+ var path = window.location.pathname;
+ var currentDir = path.substring(0, path.lastIndexOf('/'));
+ var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
+
+ is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=1043713
+ var test5 = document.getElementById("test5");
+ test5.textContent = "#t5 { --SomeVariableName: a; }";
+
+ var declaration = test5.sheet.cssRules[0].style;
+ is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
+ is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
+
+ var element = document.getElementById("t5");
+ var cs = window.getComputedStyle(element);
+
+ is(cs.item(cs.length - 1), "--SomeVariableName", "custom property name returned by item() on computed style");
+ is(cs[cs.length - 1], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=969756
+ var test6 = document.getElementById("test6");
+ test6.textContent = "p { font: var(--var6) hangul mongolian; font-size-adjust: none; }";
+ var declaration = test6.sheet.cssRules[0].style;
+ test6.style.color = "white";
+ is(declaration.getPropertyValue("-x-system-font"), " var(--var6) hangul mongolian");
+ },
+
+ function() {
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=1154356
+ var test7 = document.getElementById("test7");
+ test7.textContent = "p { --weird\\;name: green; }";
+ is(test7.sheet.cssRules[0].style.cssText, "--weird\\;name: green;");
+ test7.textContent = "p { --0: green; }";
+ is(test7.sheet.cssRules[0].style.cssText, "--0: green;");
+ },
+];
+
+function prepareTest() {
+ // Load an external style sheet for test 4.
+ var e = document.createElement("link");
+ e.addEventListener("load", runTest);
+ e.setAttribute("rel", "stylesheet");
+ e.setAttribute("href", "support/external-variable-url.css");
+ document.head.appendChild(e);
+}
+
+function runTest() {
+ tests.forEach(function(fn) { fn(); });
+ SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
+ prepareTest);
+</script>