mochikit_v14/tests/test_MochiKit-Style.html

   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>