summaryrefslogtreecommitdiffstats
path: root/dom/tests/mochitest/ajax/mochikit/tests/MochiKit-Style.html
blob: b01adc6e7ef85ec0d49a676eb297bbd8c17df7d6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
    <script type="text/javascript" src="../MochiKit/MockDOM.js"></script>
    <script type="text/javascript" src="../MochiKit/Base.js"></script>
    <script type="text/javascript" src="../MochiKit/DOM.js"></script>
    <script type="text/javascript" src="../MochiKit/Iter.js"></script>
    <script type="text/javascript" src="../MochiKit/Style.js"></script>
    <script type="text/javascript" src="../MochiKit/Color.js"></script>
    <script type="text/javascript" src="../MochiKit/Logging.js"></script>
    <script type="text/javascript" src="SimpleTest/SimpleTest.js"></script>        
    <link rel="stylesheet" type="text/css" href="SimpleTest/test.css">
</head>
<body style="border: 0; margin: 0; padding: 0;">

<div id="styleTest" style="position: absolute; left: 400px; top: 100px; width: 100px; height: 100px; background: rgb(255, 0, 0); opacity: 0.5; filter: alpha(opacity=50); font-size: 10px">TEST<span id="styleSubTest">SUB</span></div>

<pre id="test">
<script type="text/javascript">

try {

    // initial
    var pos = getElementPosition('styleTest');
    is(pos.x, 400, 'initial x position');
    is(pos.y, 100, 'initial y position');
    
    // moved
    var newPos = new MochiKit.Style.Coordinates(500, 200);
    setElementPosition('styleTest', newPos);
    pos = getElementPosition('styleTest');
    is(pos.x, 500, 'updated x position');
    is(pos.y, 200, 'updated y position');

    // moved with relativeTo
    anotherPos = new MochiKit.Style.Coordinates(100, 100);
    pos = getElementPosition('styleTest', anotherPos);
    is(pos.x, 400, 'updated x position (using relativeTo parameter)');
    is(pos.y, 100, 'updated y position (using relativeTo parameter)');
    
    // Coordinates object
    pos = getElementPosition({x: 123, y: 321});
    is(pos.x, 123, 'passthrough x position');
    is(pos.y, 321, 'passthrough y position');
    
    // Coordinates object with relativeTo
    pos = getElementPosition({x: 123, y: 321}, {x: 100, y: 50});
    is(pos.x, 23, 'passthrough x position (using relativeTo parameter)');
    is(pos.y, 271, 'passthrough y position (using relativeTo parameter)');
    
    pos = getElementPosition('garbage'); 
    is(typeof(pos), 'undefined', 
        'invalid element should return an undefined position');
    
    // Only set one coordinate
    setElementPosition('styleTest', {'x': 300});
    pos = getElementPosition('styleTest');
    is(pos.x, 300, 'updated only x position');
    is(pos.y, 200, 'not updated y position');
    
    var mc = MochiKit.Color.Color;
    var red = mc.fromString('rgb(255,0,0)');
    var color = null;
    
    color = mc.fromString(getStyle('styleTest', 'background-color'));
    is(color.toHexString(), red.toHexString(), 
        'test getStyle selector case');
       
    color = mc.fromString(getStyle('styleTest', 'backgroundColor'));
    is(color.toHexString(), red.toHexString(), 
        'test getStyle camel case');

    is(getStyle('styleSubTest', 'font-size'), '10px', 
        'test computed getStyle selector case');
       
    is(getStyle('styleSubTest', 'fontSize'), '10px', 
        'test computed getStyle camel case');

    is(eval(getStyle('styleTest', 'opacity')), 0.5, 
        'test getStyle opacity');

    is(getStyle('styleTest', 'opacity'), 0.5, 'test getOpacity');
    
    setStyle('styleTest', {'opacity': 0.2});
    is(getStyle('styleTest', 'opacity'), 0.2, 'test setOpacity');

    setStyle('styleTest', {'opacity': 0});
    is(getStyle('styleTest', 'opacity'), 0, 'test setOpacity');

    setStyle('styleTest', {'opacity': 1});
    var t = getStyle('styleTest', 'opacity');
    ok(t > 0.999 && t <= 1, 'test setOpacity');

    var dims = getElementDimensions('styleTest');
    is(dims.w, 100, 'getElementDimensions w ok');
    is(dims.h, 100, 'getElementDimensions h ok');

    setElementDimensions('styleTest', {'w': 200, 'h': 150});
    dims = getElementDimensions('styleTest');
    is(dims.w, 200, 'setElementDimensions w ok');
    is(dims.h, 150, 'setElementDimensions h ok');

    setElementDimensions('styleTest', {'w': 150});
    dims = getElementDimensions('styleTest');
    is(dims.w, 150, 'setElementDimensions only w ok');
    is(dims.h, 150, 'setElementDimensions h not updated ok');

    hideElement('styleTest');
    dims = getElementDimensions('styleTest');
    is(dims.w, 150, 'getElementDimensions w ok when display none');
    is(dims.h, 150, 'getElementDimensions h ok when display none');

    dims = getViewportDimensions();
    is(dims.w > 0, true, 'test getViewportDimensions w');
    is(dims.h > 0, true, 'test getViewportDimensions h');

    pos = getViewportPosition();
    is(pos.x, 0, 'test getViewportPosition x');
    is(pos.y, 0, 'test getViewportPosition y');

    ok( true, "test suite finished!");
    
    
} catch (err) {
    
    var s = "test suite failure!\n";
    var o = {};
    var k = null;
    for (k in err) {
        // ensure unique keys?!
        if (!o[k]) {
            s +=  k + ": " + err[k] + "\n";
            o[k] = err[k];
        }
    }
    ok ( false, s );

}
</script>
</pre>
</body>
</html>