Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"       "http://www.w3.org/TR/html4/strict.dtd">
<!--
        we use a strict-mode DTD to ensure that the box model is the same for these
        basic tests
-->
<html>
        <head>
                <title> test html.js Box utils</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");
                        
                        var margin = '1px';
                        var border = '3px solid black';
                        var padding = '5px';
                        var defaultStyles = {
                                height: '100px',
                                width: '100px',
                                position: 'absolute',
                                backgroundColor: 'red'
                        };
                        
                        var defaultChildStyles = {
                                height: '20px',
                                width: '20px',
                                backgroundColor: 'blue'
                        }
                        
                        var testStyles = [
                                {},
                                {margin: margin},
                                {border: border},
                                {padding: padding},
                                {margin: margin, border: border},
                                {margin: margin, padding: padding},
                                {border: border, padding: padding},
                                {margin: margin, border: border, padding: padding}                      
                        ]
                        
                        
                        function sameBox(inBox1, inBox2) {
                                for (var i in inBox1)
                                        if (inBox1[i] != inBox2[i]) {
                                                console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]);
                                                return false;
                                        }       
                                return true;            
                        }
                        
                        function reciprocalMarginBoxTest(inNode, inBox) {
                                var s = inBox || dojo.marginBox(inNode);
                                dojo.marginBox(inNode, s);
                                var e = dojo.marginBox(inNode);
                                return sameBox(s, e);
                        }
                        
                        function fitTest(inParent, inChild) {
                                var pcb = dojo.contentBox(inParent);
                                return reciprocalMarginBoxTest(inChild, pcb);
                        }
                        
                        function createStyledElement(inStyle, inParent, inElement, inNoDefault) {
                                inStyle = inStyle||{};
                                if (!inNoDefault) {
                                        for (var i in defaultStyles)
                                                if (!inStyle[i])
                                                        inStyle[i] = defaultStyles[i];
                                }                       
                                var n = document.createElement(inElement || 'div');
                                (inParent||document.body).appendChild(n);
                                dojo.mixin(n.style, inStyle);
                                return n;                               
                        }
                        
                        var _testTopInc = 0;
                        var _testTop = 150;
                        var _testInitTop = 250;
                        function styleIncTop(inStyle) {
                                inStyle = dojo.mixin({}, inStyle||{});
                                inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px';
                                _testTopInc++;
                                return inStyle;
                        }
                        
                        function removeTestNode(inNode) {
                                // leave nodes for inspection or don't return to delete them
                                return;
                                inNode = dojo.byId(inNode);
                                inNode.parentNode.removeChild(inNode);
                                _testTopInc--;
                        }
                        
                        function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {
                                inTest.assertTrue('/* ' + inComment +  '*/' + inAssert);
                                if (inAssert)
                                        inOk&&inOk();
                                else
                                        inErr&&inErr(); 
                        }
                        
                        // args are (styles, parent, element name, no default)
                        function mixCreateElementArgs(inMix, inArgs) {
                                args = [{}];
                                if (inArgs&&inArgs[0])
                                        dojo.mixin(args[0], inArgs[0]);
                                if (inMix.length)
                                        dojo.mixin(args[0], inMix[0]||{});
                                // parent comes from source
                                if (inMix.length > 1)
                                        args[1] = inMix[1];
                                args[2] = inArgs[2];
                                args[3] = inArgs[3]     
                                return args;    
                        };
                        
                        function createStyledNodes(inArgs, inFunc) {
                                for (var i=0, n; (s=testStyles[i]); i++) {
                                        n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs));
                                        inFunc&&inFunc(n);
                                }       
                        }
                        
                        function createStyledParentChild(inParentArgs, inChildArgs, inFunc) {
                                for (var i=0, s, p, c; (s=testStyles[i]); i++) {
                                        p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
                                        c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
                                        inFunc&&inFunc(p, c);
                                }       
                        }
                        
                        function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) {
                                for (var i=0, s, p; (s=testStyles[i]); i++)
                                        for (var j=0, sc, c, props; (sc=testStyles[j]); j++) {
                                                p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
                                                c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs));
                                                inFunc&&inFunc(p, c);
                                        }       
                                
                                for (var i=0, s, p, c; (s=testStyles[i]); i++) {
                                        p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
                                        c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
                                        inFunc&&inFunc(p, c);
                                }       
                        }
                        
                        
                        function runFitTest(inTest, inParentStyles, inChildStyles) {
                                createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) {
                                        testAndCallback(inTest, fitTest(p, c), '', function() {removeTestNode(p); });
                                });
                        }
                        
                        dojo.addOnLoad(function(){
                                doh.register("t", 
                                        [
                                                function reciprocalTests(t) {
                                                        createStyledNodes([], function(n) {
                                                                testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });
                                                        });
                                                },
                                                function fitTests(t) {
                                                        runFitTest(t, null, dojo.mixin({}, defaultChildStyles));
                                                },
                                                function fitTestsOverflow(t) {
                                                        runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
                                                        runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles));
                                                        runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
                                                },
                                                function fitTestsFloat(t) {
                                                        runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles));
                                                        runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles));
                                                        runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles));
                                                },
                                                function reciprocalTestsInline(t) {
                                                        createStyledParentChild([], [{}, null, 'span'], function(p, c) {
                                                                c.innerHTML = 'Hello World';
                                                                testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
                                                        });
                                                },
                                                function reciprocalTestsButtonChild(t) {
                                                        createStyledParentChild([], [{}, null, 'button'], function(p, c) {
                                                                c.innerHTML = 'Hello World';
                                                                testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
                                                        });
                                                }
                                        ]
                                );
                                doh.run();
                        });
                </script>
                <style type="text/css">
                        html, body {
                                padding: 0px;
                                margin: 0px;
                                border: 0px;
                        }
                </style>
        </head>
        <body>
        </body>
</html>