@qooxdoo/framework/source/class/qx/test/bom/Basic.js

The JS Framework for Coders

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2007-2008 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     MIT: https://opensource.org/licenses/MIT
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Fabian Jakobs (fjakobs)

************************************************************************ */

qx.Class.define("qx.test.bom.Basic", {
  extend: qx.dev.unit.TestCase,

  members: {
    setUp() {
      var div = document.createElement("div");
      div.id = "html_basics";

      div.innerHTML =
        '<div id="test1" class="hello world" title="hello world title">' +
        ' <input id="test2" name="foo2" type="text" maxlength="20" value="hello"/>' +
        '  <input tabindex="2" id="test3" type="checkbox" checked="true" name="foo3" value="bar"/>' +
        '  <input id="test4" type="text" disabled="disabled"/>' +
        '  <input id="test5" type="text" disabled="false" READONLY="true"/>' + // <- note this div will be disabled!!
        '  <a id="test6" style="color:red;background:blue" href="../foo.html"><b>Foo</b>-Link</a>' +
        '  <table id="test7" valign="bottom"><tr><td colspan="3"></td></tr></table>' +
        '  <span id="test8">Black</span>' +
        "</div>";
      document.body.appendChild(div);
    },

    tearDown() {
      var div = document.getElementById("html_basics");
      document.body.removeChild(div);
    },

    testElementAttributes() {
      var attrib = qx.bom.element.Attribute;
      var style = qx.bom.element.Style;
      var opac = qx.bom.element.Opacity;

      var test1 = document.getElementById("test1");

      this.assertEquals("hello world", attrib.get(test1, "class"));
      this.assertEquals("hello world title", attrib.get(test1, "title"));

      var test2 = document.getElementById("test2");
      this.assertEquals("foo2", attrib.get(test2, "name"));
      this.assertEquals("hello", attrib.get(test2, "value"));
      this.assertEquals("text", attrib.get(test2, "type"));
      this.assertEquals(20, attrib.get(test2, "maxlength"));

      var test3 = document.getElementById("test3");
      this.assertEquals("foo3", attrib.get(test3, "name"));
      this.assertEquals("bar", attrib.get(test3, "value"));
      this.assertEquals("checkbox", attrib.get(test3, "type"));
      this.assertTrue(attrib.get(test3, "checked"));
      this.assertFalse(attrib.get(test3, "disabled"));
      this.assertEquals(2, attrib.get(test3, "tabindex"));

      this.info("test4");
      this.assertTrue(attrib.get(document.getElementById("test4"), "disabled"));
      this.assertFalse(
        attrib.get(document.getElementById("test4"), "readonly")
      );

      this.info("test5");
      this.assertTrue(attrib.get(document.getElementById("test5"), "disabled"));
      this.assertTrue(attrib.get(document.getElementById("test5"), "readonly"));

      this.info("test6");
      this.assert(
        attrib
          .get(document.getElementById("test6"), "href")
          .endsWith("/foo.html")
      );

      var test6Color = style.get(document.getElementById("test6"), "color");
      this.assertCssColor("red", test6Color);

      var test6BackgroundColor = style.get(
        document.getElementById("test6"),
        "backgroundColor"
      );

      this.assertCssColor("blue", test6BackgroundColor);

      this.assertIdentical(
        "",
        style.get(document.getElementById("test6"), "font", style.LOCAL_MODE)
      );

      // This test fails in IE, Webkit and Opera but the value is correct
      //this.assertEquals("serif", style.get(document.getElementById("test6"), "fontFamily"));
      this.assertEquals(
        "Foo-Link",
        attrib.get(document.getElementById("test6"), "text")
      );

      this.assertEquals(
        "<b>foo</b>-link",
        attrib.get(document.getElementById("test6"), "html").toLowerCase()
      );

      this.assertEquals(1, opac.get(document.getElementById("test6")));

      this.info("test7");
      this.assertEquals(
        "bottom",
        attrib.get(document.getElementById("test7"), "valign")
      );

      this.assertEquals(
        3,
        attrib.get(
          document.getElementById("test7").getElementsByTagName("td")[0],
          "colspan"
        )
      );

      this.info("test8");
      style.set(document.getElementById("test8"), "color", "red");
      style.set(document.getElementById("test8"), "backgroundColor", "black");

      opac.set(document.getElementById("test8"), 0.5);

      var test8Color = style.get(document.getElementById("test8"), "color");
      this.assertCssColor("red", test8Color);

      var test8BackgroundColor = style.get(
        document.getElementById("test8"),
        "backgroundColor"
      );

      this.assertCssColor("black", test8BackgroundColor);

      this.assertEquals(0.5, opac.get(document.getElementById("test8")));
    }
  }
});