| 1 | <html> |
| 2 | <head> |
| 3 | <script type="text/javascript" src="../MochiKit/MockDOM.js"></script> |
| 4 | <script type="text/javascript" src="../MochiKit/Base.js"></script> |
| 5 | <script type="text/javascript" src="../MochiKit/DOM.js"></script> |
| 6 | <script type="text/javascript" src="../MochiKit/Iter.js"></script> |
| 7 | <script type="text/javascript" src="../MochiKit/Style.js"></script> |
| 8 | <script type="text/javascript" src="../MochiKit/Color.js"></script> |
| 9 | <script type="text/javascript" src="../MochiKit/Logging.js"></script> |
| 10 | <script type="text/javascript" src="SimpleTest/SimpleTest.js"></script> |
| 11 | <link rel="stylesheet" type="text/css" href="SimpleTest/test.css"> |
| 12 | </head> |
| 13 | <body style="border: 0; margin: 0; padding: 0;"> |
| 14 | |
| 15 | <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> |
| 16 | |
| 17 | <pre id="test"> |
| 18 | <script type="text/javascript"> |
| 19 | |
| 20 | try { |
| 21 | |
| 22 | // initial |
| 23 | var pos = getElementPosition('styleTest'); |
| 24 | is(pos.x, 400, 'initial x position'); |
| 25 | is(pos.y, 100, 'initial y position'); |
| 26 | |
| 27 | // moved |
| 28 | var newPos = new MochiKit.Style.Coordinates(500, 200); |
| 29 | setElementPosition('styleTest', newPos); |
| 30 | pos = getElementPosition('styleTest'); |
| 31 | is(pos.x, 500, 'updated x position'); |
| 32 | is(pos.y, 200, 'updated y position'); |
| 33 | |
| 34 | // moved with relativeTo |
| 35 | anotherPos = new MochiKit.Style.Coordinates(100, 100); |
| 36 | pos = getElementPosition('styleTest', anotherPos); |
| 37 | is(pos.x, 400, 'updated x position (using relativeTo parameter)'); |
| 38 | is(pos.y, 100, 'updated y position (using relativeTo parameter)'); |
| 39 | |
| 40 | // Coordinates object |
| 41 | pos = getElementPosition({x: 123, y: 321}); |
| 42 | is(pos.x, 123, 'passthrough x position'); |
| 43 | is(pos.y, 321, 'passthrough y position'); |
| 44 | |
| 45 | // Coordinates object with relativeTo |
| 46 | pos = getElementPosition({x: 123, y: 321}, {x: 100, y: 50}); |
| 47 | is(pos.x, 23, 'passthrough x position (using relativeTo parameter)'); |
| 48 | is(pos.y, 271, 'passthrough y position (using relativeTo parameter)'); |
| 49 | |
| 50 | pos = getElementPosition('garbage'); |
| 51 | is(typeof(pos), 'undefined', |
| 52 | 'invalid element should return an undefined position'); |
| 53 | |
| 54 | // Only set one coordinate |
| 55 | setElementPosition('styleTest', {'x': 300}); |
| 56 | pos = getElementPosition('styleTest'); |
| 57 | is(pos.x, 300, 'updated only x position'); |
| 58 | is(pos.y, 200, 'not updated y position'); |
| 59 | |
| 60 | var mc = MochiKit.Color.Color; |
| 61 | var red = mc.fromString('rgb(255,0,0)'); |
| 62 | var color = null; |
| 63 | |
| 64 | color = mc.fromString(getStyle('styleTest', 'background-color')); |
| 65 | is(color.toHexString(), red.toHexString(), |
| 66 | 'test getStyle selector case'); |
| 67 | |
| 68 | color = mc.fromString(getStyle('styleTest', 'backgroundColor')); |
| 69 | is(color.toHexString(), red.toHexString(), |
| 70 | 'test getStyle camel case'); |
| 71 | |
| 72 | is(getStyle('styleSubTest', 'font-size'), '10px', |
| 73 | 'test computed getStyle selector case'); |
| 74 | |
| 75 | is(getStyle('styleSubTest', 'fontSize'), '10px', |
| 76 | 'test computed getStyle camel case'); |
| 77 | |
| 78 | is(eval(getStyle('styleTest', 'opacity')), 0.5, |
| 79 | 'test getStyle opacity'); |
| 80 | |
| 81 | is(getStyle('styleTest', 'opacity'), 0.5, 'test getOpacity'); |
| 82 | |
| 83 | setStyle('styleTest', {'opacity': 0.2}); |
| 84 | is(getStyle('styleTest', 'opacity'), 0.2, 'test setOpacity'); |
| 85 | |
| 86 | setStyle('styleTest', {'opacity': 0}); |
| 87 | is(getStyle('styleTest', 'opacity'), 0, 'test setOpacity'); |
| 88 | |
| 89 | setStyle('styleTest', {'opacity': 1}); |
| 90 | var t = getStyle('styleTest', 'opacity'); |
| 91 | ok(t > 0.999 && t <= 1, 'test setOpacity'); |
| 92 | |
| 93 | var dims = getElementDimensions('styleTest'); |
| 94 | is(dims.w, 100, 'getElementDimensions w ok'); |
| 95 | is(dims.h, 100, 'getElementDimensions h ok'); |
| 96 | |
| 97 | setElementDimensions('styleTest', {'w': 200, 'h': 150}); |
| 98 | dims = getElementDimensions('styleTest'); |
| 99 | is(dims.w, 200, 'setElementDimensions w ok'); |
| 100 | is(dims.h, 150, 'setElementDimensions h ok'); |
| 101 | |
| 102 | setElementDimensions('styleTest', {'w': 150}); |
| 103 | dims = getElementDimensions('styleTest'); |
| 104 | is(dims.w, 150, 'setElementDimensions only w ok'); |
| 105 | is(dims.h, 150, 'setElementDimensions h not updated ok'); |
| 106 | |
| 107 | hideElement('styleTest'); |
| 108 | dims = getElementDimensions('styleTest'); |
| 109 | is(dims.w, 150, 'getElementDimensions w ok when display none'); |
| 110 | is(dims.h, 150, 'getElementDimensions h ok when display none'); |
| 111 | |
| 112 | dims = getViewportDimensions(); |
| 113 | is(dims.w > 0, true, 'test getViewportDimensions w'); |
| 114 | is(dims.h > 0, true, 'test getViewportDimensions h'); |
| 115 | |
| 116 | pos = getViewportPosition(); |
| 117 | is(pos.x, 0, 'test getViewportPosition x'); |
| 118 | is(pos.y, 0, 'test getViewportPosition y'); |
| 119 | |
| 120 | ok( true, "test suite finished!"); |
| 121 | |
| 122 | |
| 123 | } catch (err) { |
| 124 | |
| 125 | var s = "test suite failure!\n"; |
| 126 | var o = {}; |
| 127 | var k = null; |
| 128 | for (k in err) { |
| 129 | // ensure unique keys?! |
| 130 | if (!o[k]) { |
| 131 | s += k + ": " + err[k] + "\n"; |
| 132 | o[k] = err[k]; |
| 133 | } |
| 134 | } |
| 135 | ok ( false, s ); |
| 136 | |
| 137 | } |
| 138 | </script> |
| 139 | </pre> |
| 140 | </body> |
| 141 | </html> |