dlls/mshtml/tests/dom.js

   1 /*
   2  * Copyright 2017 Jacek Caban for CodeWeavers
   3  *
   4  * This library is free software; you can redistribute it and/or
   5  * modify it under the terms of the GNU Lesser General Public
   6  * License as published by the Free Software Foundation; either
   7  * version 2.1 of the License, or (at your option) any later version.
   8  *
   9  * This library is distributed in the hope that it will be useful,
  10  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12  * Lesser General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU Lesser General Public
  15  * License along with this library; if not, write to the Free Software
  16  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA
  17  */
  18
  19 var tests = [];
  20
  21 sync_test("input_selection", function() {
  22     var input = document.createElement("input");
  23     input.type = "text";
  24     input.value = "test";
  25     document.body.appendChild(input);
  26
  27     function test_range(start, end) {
  28         ok(input.selectionStart === start, "input.selectionStart = " + input.selectionStart + " expected " + start);
  29         ok(input.selectionEnd === end, "input.selectionEnd = " + input.selectionEnd + " expected " + end);
  30     }
  31
  32     test_range(0, 0);
  33
  34     input.selectionStart = 2;
  35     test_range(2, 2);
  36
  37     input.selectionStart = -1;
  38     test_range(0, 2);
  39
  40     input.selectionStart = 10;
  41     test_range(4, 4);
  42
  43     input.selectionEnd = 2;
  44     test_range(2, 2);
  45
  46     input.selectionEnd = -1;
  47     test_range(0, 0);
  48
  49     input.selectionEnd = 10;
  50     test_range(0, 4);
  51
  52     input.setSelectionRange(2, 3);
  53     test_range(2, 3);
  54
  55     input.setSelectionRange(-1, 10);
  56     test_range(0, 4);
  57
  58     input.setSelectionRange(3, 3);
  59     test_range(3, 3);
  60 });
  61
  62 sync_test("textContent", function() {
  63     var text = document.createTextNode("test");
  64     ok(text.textContent === "test", "text.textContent = " + text.textContent);
  65
  66     var div = document.createElement("div");
  67     document.body.appendChild(div);
  68     div.innerHTML = "abc<script>/* */</script><div>text</div>";
  69     ok(div.textContent === "abc/* */text", "div.textContent = " + div.textContent);
  70
  71     div.textContent = "test";
  72     ok(div.textContent === "test", "div.textContent = " + div.textContent);
  73     ok(div.childNodes.length === 1, "div.childNodes.length = " + div.childNodes.length);
  74     ok(div.firstChild.textContent === "test", "div.firstChild.textContent = " + div.firstChild.textContent);
  75
  76     div.textContent = "";
  77     ok(div.textContent === "", "div.textContent = " + div.textContent);
  78     ok(div.childNodes.length === 0, "div.childNodes.length = " + div.childNodes.length);
  79
  80     div.textContent = null;
  81     ok(div.textContent === "", "div.textContent = " + div.textContent);
  82     div.textContent = 11;
  83     ok(div.textContent === "11", "div.textContent = " + div.textContent);
  84     div.textContent = 10.5;
  85     ok(div.textContent === "10.5", "div.textContent = " + div.textContent);
  86
  87     ok(document.textContent === null, "document.textContent = " + document.textContent);
  88 });
  89
  90 sync_test("ElementTraversal", function() {
  91     var div = document.createElement("div");
  92     div.innerHTML = "abc<b>bold</b><script>/* */<script><div>text</div>def";
  93     ok(div.firstElementChild.outerHTML === "<b>bold</b>",
  94             "div.firstElementChild.outerHTML = " + div.firstElementChild.outerHTML);
  95
  96     div.innerHTML = "abc";
  97     ok(div.firstElementChild === null, "div.firstElementChild = " + div.firstElementChild);
  98
  99     ok(!("firstElementChild" in document), "firstElementChild found in document");
 100 });
 101
 102 sync_test("head", function() {
 103     var h = document.head;
 104     ok(h.tagName === "HEAD", "h.tagName = " + h.tagName);
 105     ok(h === document.getElementsByTagName("head")[0], "unexpected head element");
 106 });
 107
 108 async_test("iframe", function() {
 109     document.body.innerHTML = '<iframe src="runscript.html?frame.js"></iframe>'
 110     var iframe = document.body.firstChild;
 111
 112     iframe.onload = guard(function() {
 113         var r = iframe.contentWindow.global_object.get_global_value();
 114         ok(r === "global value", "get_global_value() returned " + r);
 115
 116         var f = iframe.contentWindow.global_object.get_global_value;
 117         ok(f() === "global value", "f() returned " + f());
 118
 119         next_test();
 120     });
 121 });
 122
 123 async_test("iframe_location", function() {
 124     document.body.innerHTML = '<iframe src="emptyfile"></iframe>'
 125     var iframe = document.body.firstChild;
 126
 127     iframe.onload = function() {
 128         ok(iframe.contentWindow.location.pathname === "/emptyfile",
 129            "path = " + iframe.contentWindow.location.pathname);
 130         iframe.onload = function () {
 131             ok(iframe.contentWindow.location.pathname === "/empty/file",
 132                "path = " + iframe.contentWindow.location.pathname);
 133             next_test();
 134         }
 135         iframe.src = "empty/file";
 136     }
 137 });
 138
 139 sync_test("anchor", function() {
 140     var iframe = document.body.firstChild;
 141     var anchor = document.createElement("a");
 142
 143     var anchor_tests = [
 144         { href: "http://www.winehq.org:123/about", protocol: "http:", host: "www.winehq.org:123" },
 145         { href: "https://www.winehq.org:123/about", protocol: "https:", host: "www.winehq.org:123" },
 146         { href: "about:blank", protocol: "about:", host: "" },
 147         { href: "file:///c:/dir/file.html", protocol: "file:", host: "" },
 148         { href: "http://www.winehq.org/about", protocol: "http:", host: "www.winehq.org:80", todo_host: true },
 149         { href: "https://www.winehq.org/about", protocol: "https:", host: "www.winehq.org:443", todo_host: true },
 150     ];
 151
 152     for(var i in anchor_tests) {
 153         var t = anchor_tests[i];
 154         anchor.href = t.href;
 155         ok(anchor.protocol === t.protocol, "anchor(" + t.href + ").protocol = " + anchor.protocol);
 156         todo_wine_if("todo_host" in t).
 157         ok(anchor.host === t.host, "anchor(" + t.href + ").host = " + anchor.host);
 158     }
 159 });
 160
 161 sync_test("getElementsByClassName", function() {
 162     var elems;
 163
 164     document.body.innerHTML = '<div class="class1">'
 165         + '<div class="class1"></div>'
 166         + '<a id="class1" class="class2"></a>'
 167         + '</div>'
 168         + '<script class="class1"></script>';
 169
 170     elems = document.getElementsByClassName("class1");
 171     ok(elems.length === 3, "elems.length = " + elems.length);
 172     ok(elems[0].tagName === "DIV", "elems[0].tagName = " + elems[0].tagName);
 173     ok(elems[1].tagName === "DIV", "elems[1].tagName = " + elems[1].tagName);
 174     ok(elems[2].tagName === "SCRIPT", "elems[2].tagName = " + elems[2].tagName);
 175
 176     elems = document.getElementsByClassName("class2");
 177     ok(elems.length === 1, "elems.length = " + elems.length);
 178     ok(elems[0].tagName === "A", "elems[0].tagName = " + elems[0].tagName);
 179
 180     elems = document.getElementsByClassName("classnotfound");
 181     ok(elems.length == 0, "elems.length = " + elems.length);
 182 });
 183
 184 sync_test("createElementNS", function() {
 185     var svg_ns = "http://www.w3.org/2000/svg";
 186     var elem;
 187
 188     elem = document.createElementNS(null, "test");
 189     ok(elem.tagName === "test", "elem.tagName = " + elem.tagName);
 190     ok(elem.namespaceURI === null, "elem.namespaceURI = " + elem.namespaceURI);
 191
 192     elem = document.createElementNS(svg_ns, "test");
 193     ok(elem.tagName === "test", "elem.tagName = " + elem.tagName);
 194     ok(elem.namespaceURI === svg_ns, "elem.namespaceURI = " + elem.namespaceURI);
 195
 196     elem = document.createElementNS(svg_ns, "svg");
 197     ok(elem.tagName === "svg", "elem.tagName = " + elem.tagName);
 198     ok(elem.namespaceURI === svg_ns, "elem.namespaceURI = " + elem.namespaceURI);
 199
 200     elem = document.createElementNS("test", "svg");
 201     ok(elem.tagName === "svg", "elem.tagName = " + elem.tagName);
 202     ok(elem.namespaceURI === "test", "elem.namespaceURI = " + elem.namespaceURI);
 203 });
 204
 205 sync_test("query_selector", function() {
 206     document.body.innerHTML = '<div class="class1">'
 207         + '<div class="class1"></div>'
 208         + '<a id="class1" class="class2"></a>'
 209         + '</div>'
 210         + '<script class="class1"></script>';
 211
 212     var e = document.querySelector("nomatch");
 213     ok(e === null, "e = " + e);
 214     e = document.body.querySelector("nomatch");
 215     ok(e === null, "e = " + e);
 216
 217     e = document.querySelector(".class1");
 218     ok(e.tagName === "DIV", "e.tagName = " + e.tagName);
 219     e = document.body.querySelector(".class1");
 220     ok(e.tagName === "DIV", "e.tagName = " + e.tagName);
 221     ok(e.msMatchesSelector(".class1") === true, "msMatchesSelector returned " + e.msMatchesSelector(".class1"));
 222     ok(e.msMatchesSelector(".class2") === false, "msMatchesSelector returned " + e.msMatchesSelector(".class2"));
 223
 224     e = document.querySelector("a");
 225     ok(e.tagName === "A", "e.tagName = " + e.tagName);
 226     e = document.body.querySelector("a");
 227     ok(e.tagName === "A", "e.tagName = " + e.tagName);
 228 });
 229
 230 sync_test("compare_position", function() {
 231     document.body.innerHTML = '<div><div></div><div></div></div>';
 232
 233     var parent = document.body.firstChild;
 234     var child1 = parent.firstChild;
 235     var child2 = child1.nextSibling;
 236     var elem = document.createElement("div");
 237
 238     function compare_position(node1, node2, expected_result, ignore_mask) {
 239         var cmp = node1.compareDocumentPosition(node2);
 240         ok((cmp & ~ignore_mask) == expected_result,
 241            "compareDocumentPosition returned " + cmp + " expected " + expected_result);
 242     }
 243
 244     compare_position(child1, child2, 4);
 245     compare_position(child2, child1, 2);
 246     compare_position(parent, child1, 0x14);
 247     compare_position(parent, child2, 0x14);
 248     compare_position(parent, elem, 0x21, 6);
 249     compare_position(elem, parent, 0x21, 6);
 250 });
 251
 252 sync_test("rects", function() {
 253     document.body.innerHTML = '<div>test</div>';
 254     var elem = document.body.firstChild;
 255     var rects = elem.getClientRects();
 256     var rect = elem.getBoundingClientRect();
 257
 258     ok(rects.length === 1, "rect.length = " + rects.length);
 259     ok(rects[0].top === rect.top, "rects[0].top = " + rects[0].top + " rect.top = " + rect.top);
 260     ok(rects[0].bottom === rect.bottom, "rects[0].bottom = " + rects[0].bottom + " rect.bottom = " + rect.bottom);
 261
 262     elem = document.createElement("style");
 263     rects = elem.getClientRects();
 264     ok(rects.length === 0, "rect.length = " + rects.length);
 265 });
 266
 267 sync_test("document_owner", function() {
 268     var node;
 269
 270     ok(document.ownerDocument === null, "ownerDocument = " + document.ownerDocument);
 271     ok(document.body.ownerDocument === document,
 272        "body.ownerDocument = " + document.body.ownerDocument);
 273     ok(document.documentElement.ownerDocument === document,
 274        "documentElement.ownerDocument = " + document.documentElement.ownerDocument);
 275
 276     node = document.createElement("test");
 277     ok(node.ownerDocument === document, "element.ownerDocument = " + node.ownerDocument);
 278
 279     node = document.createDocumentFragment();
 280     ok(node.ownerDocument === document, "fragment.ownerDocument = " + node.ownerDocument);
 281
 282     node = document.createTextNode("test");
 283     ok(node.ownerDocument === document, "text.ownerDocument = " + node.ownerDocument);
 284 });
 285
 286 sync_test("style_properties", function() {
 287     document.body.innerHTML = '<div>test</div><svg></svg>';
 288     var elem = document.body.firstChild;
 289     var style = elem.style;
 290     var current_style = elem.currentStyle;
 291     var computed_style = window.getComputedStyle(elem);
 292     var val;
 293
 294     style.cssFloat = "left";
 295     ok(style.cssFloat === "left", "cssFloat = " + style.cssFloat);
 296     ok(style.getPropertyValue("float") === "left",
 297        'style.getPropertyValue("float") = ' + style.getPropertyValue("float"));
 298     ok(style.getPropertyValue("cssFloat") === "",
 299        'style.getPropertyValue("cssFloat") = ' + style.getPropertyValue("cssFloat"));
 300
 301     val = style.removeProperty("float");
 302     ok(val === "left", "removeProperty() returned " + val);
 303     ok(style.cssFloat === "", "cssFloat = " + style.cssFloat);
 304
 305     style.cssFloat = "left";
 306     val = style.removeProperty("FloaT");
 307     ok(val === "left", "removeProperty() returned " + val);
 308     ok(style.cssFloat === "", "cssFloat = " + style.cssFloat);
 309
 310     style.cssFloat = "left";
 311     val = style.removeProperty("cssFloat");
 312     ok(val === "", "removeProperty() returned " + val);
 313     ok(style.cssFloat === "left", "cssFloat = " + style.cssFloat);
 314     ok(style["float"] === "left", "float = " + style["float"]);
 315
 316     style.testVal = "test";
 317     val = style.removeProperty("testVal");
 318     ok(val === "", "removeProperty() returned " + val);
 319     ok(style.testVal === "test", "testVal = " + style.testVal);
 320
 321     style["z-index"] = 1;
 322     ok(style.zIndex === 1, "zIndex = " + style.zIndex);
 323     ok(style["z-index"] === 1, "z-index = " + style["z-index"]);
 324     ok(style.getPropertyValue("z-index") === "1",
 325        'style.getPropertyValue("x-index") = ' + style.getPropertyValue("z-index"));
 326     ok(style.getPropertyValue("zIndex") === "",
 327        'style.getPropertyValue("xIndex") = ' + style.getPropertyValue("zIndex"));
 328
 329     style.setProperty("border-width", "5px");
 330     ok(style.borderWidth === "5px", "style.borderWidth = " + style.borderWidth);
 331
 332     try {
 333         style.setProperty("border-width", 6);
 334         ok(style.borderWidth === "5px", "style.borderWidth = " + style.borderWidth);
 335     }catch(e) {
 336         win_skip("skipping setProperty tests on too old IE version");
 337         return;
 338     }
 339
 340     style.setProperty("border-width", "7px", "test");
 341     ok(style.borderWidth === "5px", "style.borderWidth = " + style.borderWidth);
 342
 343     style.setProperty("border-width", "6px", "");
 344     ok(style.borderWidth === "6px", "style.borderWidth = " + style.borderWidth);
 345
 346     style.setProperty("border-width", "7px", "important");
 347     ok(style.borderWidth === "7px", "style.borderWidth = " + style.borderWidth);
 348
 349     style.setProperty("border-width", "8px", undefined);
 350     ok(style.borderWidth === "7px", "style.borderWidth = " + style.borderWidth);
 351
 352     style.clip = "rect(1px 1px 10px 10px)";
 353     ok(style.clip === "rect(1px, 1px, 10px, 10px)", "style.clip = " + style.clip);
 354     ok(current_style.clip === "rect(1px, 1px, 10px, 10px)",
 355        "current_style.clip = " + current_style.clip);
 356     ok(computed_style.clip === "rect(1px, 1px, 10px, 10px)",
 357        "computed_style.clip = " + current_style.clip);
 358
 359     style.zIndex = 2;
 360     ok(current_style.zIndex === 2, "current_style.zIndex = " + current_style.zIndex);
 361     ok(computed_style.zIndex === 2, "computed_style.zIndex = " + computed_style.zIndex);
 362
 363     try {
 364         current_style.zIndex = 1;
 365         ok(false, "expected exception");
 366     }catch(e) {}
 367
 368     try {
 369         computed_style.zIndex = 1;
 370         ok(false, "expected exception");
 371     }catch(e) {}
 372
 373     elem = elem.nextSibling;
 374     computed_style = window.getComputedStyle(elem);
 375
 376     elem.style.zIndex = 4;
 377     ok(computed_style.zIndex === 4, "computed_style.zIndex = " + computed_style.zIndex);
 378
 379     window.getComputedStyle(elem, null);
 380 });
 381
 382 sync_test("stylesheets", function() {
 383     document.body.innerHTML = '<style>.div { margin-right: 1px; }</style>';
 384     var elem = document.body.firstChild;
 385
 386     ok(document.styleSheets.length === 1, "document.styleSheets.length = " + document.styleSheets.length);
 387
 388     var stylesheet = document.styleSheets.item(0);
 389     ok(stylesheet.rules.length === 1, "stylesheet.rules.length = " + stylesheet.rules.length);
 390     ok(typeof(stylesheet.rules.item(0)) === "object",
 391        "typeof(stylesheet.rules.item(0)) = " + typeof(stylesheet.rules.item(0)));
 392
 393     try {
 394         stylesheet.rules.item(1);
 395         ok(false, "expected exception");
 396     }catch(e) {}
 397
 398     ok(stylesheet.href === null, "stylesheet.href = " + stylesheet.href);
 399
 400     var id = stylesheet.insertRule(".input { margin-left: 1px; }", 0);
 401     ok(id === 0, "id = " + id);
 402     ok(document.styleSheets.length === 1, "document.styleSheets.length = " + document.styleSheets.length);
 403
 404     try {
 405         stylesheet.insertRule(".input { margin-left: 1px; }", 3);
 406         ok(false, "expected exception");
 407     }catch(e) {}
 408 });
 409
 410 sync_test("storage", function() {
 411     ok(typeof(window.sessionStorage) === "object",
 412        "typeof(window.sessionStorage) = " + typeof(window.sessionStorage));
 413     ok(typeof(window.localStorage) === "object" || typeof(window.localStorage) === "unknown",
 414        "typeof(window.localStorage) = " + typeof(window.localStorage));
 415 });
 416
 417 async_test("animation", function() {
 418     document.body.innerHTML =
 419         "<style>" +
 420         "  @keyframes testAnimation {0% { opacity: 0; } 100% { opacity: 1; }}" +
 421         "  .testAnimation { animation-name: testAnimation; animation-duration: 0.01s; }" +
 422         "</style>";
 423     var div = document.createElement("div");
 424     div.addEventListener("animationstart", function() {
 425         div.addEventListener("animationend", next_test);
 426     });
 427     document.body.appendChild(div);
 428     div.className = "testAnimation";
 429 });
 430
 431 sync_test("navigator", function() {
 432     ok(typeof(window.navigator) === "object",
 433        "typeof(window.navigator) = " + typeof(window.navigator));
 434
 435     var v = window.navigator;
 436     ok(v === window.navigator, "v != window.navigator");
 437     v.testProp = true;
 438     ok(window.navigator.testProp, "window.navigator.testProp = " + window.navigator.testProp);
 439 });
 440
 441 sync_test("elem_props", function() {
 442     var elem = document.body;
 443
 444     ok(elem.accessKey === "", "accessKey = " + elem.accessKey);
 445     elem.accessKey = "q";
 446     ok(elem.accessKey === "q", "accessKey = " + elem.accessKey + " expected q");
 447 });