Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed

<html>
        <!--
                we use a quirks-mode DTD on purpose to ensure that things go tilt. Wheee!!
        -->
        <head>
                <title>testing Core HTML/DOM/CSS/Style utils in quirks mode</title>
                <style type="text/css">
                        @import "../../resources/dojo.css";
                </style>
                <script type="text/javascript" 
                        src="../../dojo.js" 
                        djConfig="isDebug: true"></script>
                <script type="text/javascript">
                        dojo.require("doh.runner");
                        dojo.addOnLoad(function(){
                                doh.register("t", 
                                        [
                                                "t.is(100, dojo.marginBox('sq100').w);",
                                                "t.is(100, dojo.marginBox('sq100').h);",

                                                "t.is(120, dojo.marginBox('sq100margin10').w);",
                                                "t.is(120, dojo.marginBox('sq100margin10').h);",
                                                "t.is(100, dojo.contentBox('sq100margin10').w);",
                                                "t.is(100, dojo.contentBox('sq100margin10').h);",

                                                // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
                                                //"t.is(100, dojo.marginBox('sq100nopos').w);",
                                                "t.is(100, dojo.marginBox('sq100nopos').h);",

                                                function coordsBasic(t){
                                                        var pos = dojo.coords("sq100", false);
                                                        // console.debug(pos);
                                                        t.is(100, pos.x);
                                                        t.is(100, pos.y);
                                                        t.is(100, pos.w);
                                                        t.is(100, pos.h);
                                                },
                                                function coordsMargin(t){
                                                        // coords is getting us the margin-box location, is
                                                        // this right?
                                                        var pos = dojo.coords("sq100margin10", false);
                                                        t.is(260, pos.x);
                                                        t.is(110, pos.y);
                                                        t.is(120, pos.w);
                                                        t.is(120, pos.h);
                                                },
                                                function sq100nopos(t){
                                                        var pos = dojo.coords("sq100nopos", false);
                                                        // console.debug(pos);
                                                        t.is(0, pos.x);
                                                        t.t(pos.y > 0);
                                                        // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
                                                        //t.is(100, pos.w);
                                                        t.is(100, pos.h);
                                                }
                                        ]
                                );
                                if(dojo.isIE){ 
                                        // IE collapses padding in quirks mode. We just report on it.
                                        doh.register("t", 
                                                [
                                                        "t.is(120, dojo.marginBox('sq100margin10pad10').w);",
                                                        "t.is(120, dojo.marginBox('sq100margin10pad10').h);",

                                                        "t.is(100, dojo.marginBox('sq100pad10').w);",
                                                        "t.is(100, dojo.marginBox('sq100pad10').h);",

                                                        "t.is(100, dojo.marginBox('sq100ltpad10').w);",
                                                        "t.is(100, dojo.marginBox('sq100ltpad10').h);",
                                                        "t.is(90, dojo.contentBox('sq100ltpad10').w);",
                                                        "t.is(90, dojo.contentBox('sq100ltpad10').h);",

                                                        "t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').w);",
                                                        "t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').h);",

                                                        "t.is(100, dojo.marginBox('sq100border10').w);",
                                                        "t.is(100, dojo.marginBox('sq100border10').h);",
                                                        "t.is(80, dojo.contentBox('sq100border10').w);",
                                                        "t.is(80, dojo.contentBox('sq100border10').h);",

                                                        "t.is(120, dojo.marginBox('sq100border10margin10').w);",
                                                        "t.is(120, dojo.marginBox('sq100border10margin10').h);",
                                                        "t.is(80, dojo.contentBox('sq100border10margin10').w);",
                                                        "t.is(80, dojo.contentBox('sq100border10margin10').h);",

                                                        "t.is(120, dojo.marginBox('sq100border10margin10pad10').w);",
                                                        "t.is(120, dojo.marginBox('sq100border10margin10pad10').h);",
                                                        "t.is(60, dojo.contentBox('sq100border10margin10pad10').w);",
                                                        "t.is(60, dojo.contentBox('sq100border10margin10pad10').h);"
                                                ]
                                        );
                                }else{
                                        doh.register("t", 
                                                [
                                                        "t.is(140, dojo.marginBox('sq100margin10pad10').w);",
                                                        "t.is(140, dojo.marginBox('sq100margin10pad10').h);",

                                                        "t.is(120, dojo.marginBox('sq100pad10').w);",
                                                        "t.is(120, dojo.marginBox('sq100pad10').h);",

                                                        "t.is(110, dojo.marginBox('sq100ltpad10').w);",
                                                        "t.is(110, dojo.marginBox('sq100ltpad10').h);",
                                                        "t.is(100, dojo.contentBox('sq100ltpad10').w);",
                                                        "t.is(100, dojo.contentBox('sq100ltpad10').h);",

                                                        "t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
                                                        "t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",

                                                        "t.is(120, dojo.marginBox('sq100border10').w);",
                                                        "t.is(120, dojo.marginBox('sq100border10').h);",
                                                        "t.is(100, dojo.contentBox('sq100border10').w);",
                                                        "t.is(100, dojo.contentBox('sq100border10').h);",

                                                        "t.is(140, dojo.marginBox('sq100border10margin10').w);",
                                                        "t.is(140, dojo.marginBox('sq100border10margin10').h);",
                                                        "t.is(100, dojo.contentBox('sq100border10margin10').w);",
                                                        "t.is(100, dojo.contentBox('sq100border10margin10').h);",

                                                        "t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
                                                        "t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
                                                        "t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
                                                        "t.is(100, dojo.contentBox('sq100border10margin10pad10').h);"
                                                ]
                                        );
                                }

                                doh.run();
                        });
                </script>
                <style type="text/css">
                        html, body {
                                padding: 0px;
                                margin: 0px;
                                border: 0px;
                        }

                        #sq100 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 100px;
                                top: 100px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding: 0px;
                                margin: 0px;
                                overflow: hidden;
                        }

                        #sq100margin10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 250px;
                                top: 100px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding: 0px;
                                margin: 10px;
                                overflow: hidden;
                        }

                        #sq100margin10pad10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 400px;
                                top: 100px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding: 10px;
                                margin: 10px;
                                overflow: hidden;
                        }

                        #sq100pad10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 100px;
                                top: 250px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding: 10px;
                                margin: 0px;
                                overflow: hidden;
                        }

                        #sq100ltpad10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 250px;
                                top: 250px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding-left: 10px;
                                padding-top: 10px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                margin: 0px;
                                overflow: hidden;
                        }

                        #sq100ltpad10rbmargin10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 400px;
                                top: 250px;
                                width: 100px;
                                height: 100px;
                                border: 0px;
                                padding-left: 10px;
                                padding-top: 10px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                margin-left: 0px;
                                margin-top: 0px;
                                margin-right: 10px;
                                margin-bottom: 10px;
                                overflow: hidden;
                        }

                        #sq100border10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 100px;
                                top: 400px;
                                width: 100px;
                                height: 100px;
                                border: 10px solid yellow;
                                padding: 0px;
                                margin: 0px;
                                overflow: hidden;
                        }

                        #sq100border10margin10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 250px;
                                top: 400px;
                                width: 100px;
                                height: 100px;
                                border: 10px solid yellow;
                                padding: 0px;
                                margin: 10px;
                                overflow: hidden;
                        }

                        #sq100border10margin10pad10 {
                                background-color: black;
                                color: white;
                                position: absolute;
                                left: 400px;
                                top: 400px;
                                width: 100px;
                                height: 100px;
                                border: 10px solid yellow;
                                padding: 10px;
                                margin: 10px;
                                overflow: hidden;
                        }

                        #sq100nopos {
                                background-color: black;
                                color: white;
                                width: 100px;
                                height: 100px;
                                padding: 0px;
                                margin: 0px;
                        }

                </style>
        </head>
        <body>
                <h1>testing Core HTML/DOM/CSS/Style utils</h1>
                <div id="sq100">
                        100px square, abs
                </div>
                <div id="sq100margin10">
                        100px square, abs, 10px margin
                </div>
                <div id="sq100margin10pad10">
                        100px square, abs, 10px margin, 10px padding
                </div>
                <div id="sq100pad10">
                        100px square, abs, 10px padding
                </div>
                <div id="sq100ltpad10">
                        100px square, abs, 10px left and top padding
                </div>
                <div id="sq100ltpad10rbmargin10">
                        100px square, abs, 10px left and top padding, 10px bottom and right margin
                </div>
                <div id="sq100border10">
                        100px square, abs, 10px yellow border
                </div>
                <div id="sq100border10margin10">
                        100px square, abs, 10px yellow border, 10px margin
                </div>
                <div id="sq100border10margin10pad10">
                        100px square, abs, 10px yellow border, 10px margin, 10px padding
                </div>
                <div id="sq100nopos">
                        100px square, no positioning
                </div>
        </body>
</html>