layout/style/test/test_variables.html

   1 <!DOCTYPE type>
   2 <title>Assorted CSS variable tests</title>
   3 <script src="/MochiKit/MochiKit.js"></script>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
   6
   7 <style id="test1">
   8 </style>
   9
  10 <style id="test2">
  11 </style>
  12
  13 <style id="test3">
  14 </style>
  15
  16 <style id="test4">
  17 </style>
  18
  19 <div id="t4"></div>
  20
  21 <style id="test5">
  22 </style>
  23
  24 <div id="t5"></div>
  25
  26 <style id="test6">
  27 </style>
  28
  29 <style id="test7">
  30 </style>
  31
  32 <style id="test8">
  33 </style>
  34
  35 <script>
  36 var tests = [
  37   function() {
  38     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
  39     var test1 = document.getElementById("test1");
  40     test1.textContent = "p { --a:123!important; }";
  41     var declaration = test1.sheet.cssRules[0].style;
  42     declaration.cssText;
  43     declaration.setProperty("color", "black");
  44     is(declaration.getPropertyValue("--a"), "123");
  45   },
  46
  47   function() {
  48     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
  49     var test2 = document.getElementById("test2");
  50     test2.textContent = "p { --a: a !important; }";
  51     var declaration = test2.sheet.cssRules[0].style;
  52     is(declaration.getPropertyPriority("--a"), "important");
  53   },
  54
  55   function() {
  56     // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
  57     var test3 = document.getElementById("test3");
  58     test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
  59     var declaration = test3.sheet.cssRules[0].style;
  60     is(declaration[declaration.length - 1], "--decoration");
  61   },
  62
  63   function() {
  64     // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
  65     var test4 = document.getElementById("test4");
  66     test4.textContent = "#t4 { background-image: var(--a); }";
  67
  68     var element = document.getElementById("t4");
  69     var path = window.location.pathname;
  70     var currentDir = path.substring(0, path.lastIndexOf('/'));
  71     var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
  72
  73     is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
  74   },
  75
  76   function() {
  77     // https://bugzilla.mozilla.org/show_bug.cgi?id=1043713
  78     var test5 = document.getElementById("test5");
  79     test5.textContent = "#t5 { --SomeVariableName: a; }";
  80
  81     var declaration = test5.sheet.cssRules[0].style;
  82     is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
  83     is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
  84
  85     var element = document.getElementById("t5");
  86     var cs = window.getComputedStyle(element);
  87
  88     is(cs.item(cs.length - 1), "--SomeVariableName", "custom property name returned by item() on computed style");
  89     is(cs[cs.length - 1], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
  90   },
  91
  92   function() {
  93     // https://bugzilla.mozilla.org/show_bug.cgi?id=1154356
  94     var test7 = document.getElementById("test7");
  95     test7.textContent = "p { --weird\\;name: green; }";
  96     is(test7.sheet.cssRules[0].style.cssText, "--weird\\;name: green;");
  97     test7.textContent = "p { --0: green; }";
  98     is(test7.sheet.cssRules[0].style.cssText, "--0: green;");
  99   },
 100
 101   function() {
 102     // https://bugzilla.mozilla.org/show_bug.cgi?id=1330172
 103     var test8 = document.getElementById("test8");
 104     test8.textContent = "p { --a:inHerit; }";
 105     is(test8.sheet.cssRules[0].style.cssText, "--a: inherit;");
 106     test8.textContent = "p { --b: initial!important; }";
 107     is(test8.sheet.cssRules[0].style.cssText, "--b: initial !important;");
 108     test8.textContent = "p { --c:   UNSET  !important }";
 109     is(test8.sheet.cssRules[0].style.cssText, "--c: unset !important;");
 110   },
 111 ];
 112
 113 function prepareTest() {
 114   // Load an external style sheet for test 4.
 115   var e = document.createElement("link");
 116   e.addEventListener("load", runTest);
 117   e.setAttribute("rel", "stylesheet");
 118   e.setAttribute("href", "support/external-variable-url.css");
 119   document.head.appendChild(e);
 120 }
 121
 122 function runTest() {
 123   tests.forEach(function(fn) { fn(); });
 124   SimpleTest.finish();
 125 }
 126
 127 SimpleTest.waitForExplicitFinish();
 128 prepareTest();
 129 </script>