test/test-multipleRoot.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 = "#id11{display: \"ab\"} #id21{display: \"cd\"} #id12a{position: d} #id12b{position: c} #id22a{position: b} #id22b{position: a}";
            templateLayout(text).transform();

            <!-- Test code -->
            test("root elements", function () {
                equal(2, $("#parent").children().length, "there are 2 root templates");
                equal($("#id11").attr("id"), $("#parent").children().get(0)
                        .id, "child_1 == template1");
                equal($("#id21").attr("id"), $("#parent").children().get(1).id, "child_2 == template2");
            });
        }
    </script>
    <title></title>
</head>
<body>
<!-- Qunit code -->
<div>
    <div id="qunit-header">CSS Template Layout test - Multiple root level
        layouts
    </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>
        default content
    </div>
    <div>
        one
    </div>
    <div>
        two
    </div>
    <div>
    </div>
    <div>
        three
    </div>
    <div>
        four
    </div>
</div>
<hr/>
<pre id="sourceTemplate">
    #id11{display: "ab"}
    #id21{display: "cd"}
    #id12a{position: d}
    #id12b{position: c}
    #id22a{position: b}
    #id22b{position: a}
</pre>
<hr/>
<div id="parent">
    <div id="id11">
        default content
    </div>
    <div id="id12a">
        one
    </div>
    <div id="id12b">
        two
    </div>
    <div id="id21">
    </div>
    <div id="id22a">
        three
    </div>
    <div id="id22b">
        four
    </div>
</div>

<div id=testNotes>
    <h2>Issues</h2>
    <ul>
        <li>
            In webkit browsers, there are vertical scrollbars,
            but height sizes are OK. In Firefox, Opera and IE9 there aren't.
        </li>
    </ul>
</div>
</body>
</html>