test/test-nestedTables.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- Qunit -->
    <script src="qunit/jquery.js"></script>
    <link rel="stylesheet" href="qunit/qunit.css" type="text/css"
          media="screen"/>
    <script type="text/javascript" src="qunit/qunit.js"></script>
    <!-- Lib -->
    <script src="../lib/wef/build/wef.js"></script>
    <!-- Src -->
    <script src="../src/templateLayout.js"></script>
    <script src="../src/templateLayout.compiler.js"></script>
    <script src="../src/templateLayout.generator.js"></script>
    <!-- Example style -->
    <link rel="stylesheet" href="test.css" type="text/css"
          media="screen"/>

    <script type="text/javascript">
        window.onload = function () {
            var text =
                    "#parent {display: \"xy\"} " +
                    "#id11{display: \"ab\" /100px 100px 200px; position: x} " +
                    "#id21{display: \"cd\" /200px 100px 200px; position: y} " +
                    "#id12a{position: d} " +
                    "#id12b{position: c} " +
                    "#id22a{position: b} " +
                    "#id22b{position: a}";
            templateLayout(text).transform();

            <!-- Test code -->
            test("root elements", function () {
                equal(1, $("#parent").children().length,
                      "there are 1 root templates");
                //parent->table->row->cell->child = 4 x children()
                equal($("#id11").attr("id"),
                      $("#parent .templateLayoutTable tr:eq(0) td:eq(0) div div").attr("id"),
                      "#parent[x] == #id11");
                equal($("#id21").attr("id"),
                      $("#parent .templateLayoutTable tr:eq(0) td:eq(3) div div").attr("id"),
                      "#parent[y] == #id21");

                equal($("#id11").children().children().children().children().length, 2,
                      "#id11 has 2 children");
                equal($("#id22b").attr("id"),
                      $("#id11 .templateLayoutTable tr:eq(0) td:eq(0) div div").attr("id"),
                      "#id11[a] == #id22b");
                equal($("#id22a").attr("id"),
                      $("#id11 .templateLayoutTable tr:eq(0) td:eq(1) div div").attr("id"),
                      "#id11[b] == #id22a");

                equal($("#id21").children().children().children().children().length, 2,
                      "#id21 has 2 children");
                equal($("#id12b").attr("id"),
                      $("#id21 .templateLayoutTable tr:eq(0) td:eq(0) div div").attr("id"),
                      "#id21[a] == #id12b");
                equal($("#id12a").attr("id"),
                      $("#id21 .templateLayoutTable tr:eq(0) td:eq(1) div div").attr("id"),
                      "#id21[b] == #id12a");
            })
        }
    </script>
    <title></title>
</head>
<body>
<!-- Qunit code -->
<div>
    <div id="qunit-header">CSS Template Layout test - Nested templates
        handling
    </div>
    <div id="qunit-banner"></div>
    <div id="qunit-testrunner-toolbar"></div>
    <div id="qunit-userAgent"></div>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture">test markup, will be hidden</div>
    <div style="margin: 50px"></div>
</div>
<!-- Test -->
<div id=sourceHTML>
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
</div>
<hr/>
<pre id="sourceTemplate">
    #parent {display: "xy"}
    #id11{display: "ab" /100px 100px 200px; position: x}
    #id21{display: "cd" /200px 100px 200px; position: y}
    #id12a{position: d}
    #id12b{position: c}
    #id22a{position: b}
    #id22b{position: a}
</pre>
<hr/>
<div id="parent">
    <div id="id11">one</div>
    <div id="id12a">two</div>
    <div id="id12b">three</div>
    <div id="id21">four</div>
    <div id="id22a">five</div>
    <div id="id22b">six</div>
</div>
</body>
</html>