layout/style/test/test_variables.html

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

     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">
     7 <style id="test1">
     8 </style>
    10 <style id="test2">
    11 </style>
    13 <style id="test3">
    14 </style>
    16 <style id="test4">
    17 </style>
    19 <div id="t4"></div>
    21 <script>
    22 var tests = [
    23   function() {
    24     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
    25     var test1 = document.getElementById("test1");
    26     test1.textContent = "p { --a:123!important; }";
    27     var declaration = test1.sheet.cssRules[0].style;
    28     declaration.cssText;
    29     declaration.setProperty("color", "black");
    30     is(declaration.getPropertyValue("--a"), "123");
    31   },
    33   function() {
    34     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
    35     var test2 = document.getElementById("test2");
    36     test2.textContent = "p { --a: a !important; }";
    37     var declaration = test2.sheet.cssRules[0].style;
    38     is(declaration.getPropertyPriority("--a"), "important");
    39   },
    41   function() {
    42     // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
    43     var test3 = document.getElementById("test3");
    44     test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
    45     var declaration = test3.sheet.cssRules[0].style;
    46     is(declaration[declaration.length - 1], "--decoration");
    47   },
    49   function() {
    50     // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
    51     var test4 = document.getElementById("test4");
    52     test4.textContent = "#t4 { background-image: var(--a); }";
    54     var element = document.getElementById("t4");
    55     var path = window.location.pathname;
    56     var currentDir = path.substring(0, path.lastIndexOf('/'));
    57     var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
    59     is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
    60   },
    61 ];
    63 function prepareTest() {
    64   // Load an external style sheet for test 4.
    65   var e = document.createElement("link");
    66   e.addEventListener("load", runTest);
    67   e.setAttribute("rel", "stylesheet");
    68   e.setAttribute("href", "support/external-variable-url.css");
    69   document.head.appendChild(e);
    70 }
    72 function runTest() {
    73   tests.forEach(function(fn) { fn(); });
    74   SimpleTest.finish();
    75 }
    77 SimpleTest.waitForExplicitFinish();
    78 SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
    79                           prepareTest);
    80 </script>

mercurial