testing/mochitest/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/Color.js"></script>
   6     <script type="text/javascript" src="/MochiKit/Iter.js"></script>
   7     <script type="text/javascript" src="/MochiKit/DOM.js"></script>
   8     <script type="text/javascript" src="/MochiKit/Style.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);">TEST</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(computedStyle('styleTest', 'background-color'));
  65     is(color.asRGB, red.asRGB,
  66         'test computedStyle selector case');
  67
  68     color = mc.fromString(computedStyle('styleTest', 'backgroundColor'));
  69     is(color.asRGB, red.asRGB,
  70         'test computedStyle camel case');
  71
  72     is(computedStyle('styleTest', 'opacity'), '0.5',
  73         'test computedStyle opacity');
  74
  75     is(getOpacity('styleTest'), 0.5, 'test getOpacity');
  76
  77     setOpacity('styleTest', 0.2);
  78     is(getOpacity('styleTest'), 0.2, 'test setOpacity');
  79
  80     setOpacity('styleTest', 0);
  81     is(getOpacity('styleTest'), 0, 'test setOpacity');
  82
  83     setOpacity('styleTest', 1);
  84     var t = getOpacity('styleTest');
  85     ok(t > 0.999 && t <= 1, 'test setOpacity');
  86
  87     var dims = getElementDimensions('styleTest');
  88     is(dims.w, 100, 'getElementDimensions w ok');
  89     is(dims.h, 100, 'getElementDimensions h ok');
  90
  91     setElementDimensions('styleTest', {'w': 200, 'h': 150});
  92     dims = getElementDimensions('styleTest');
  93     is(dims.w, 200, 'setElementDimensions w ok');
  94     is(dims.h, 150, 'setElementDimensions h ok');
  95
  96     setElementDimensions('styleTest', {'w': 150});
  97     dims = getElementDimensions('styleTest');
  98     is(dims.w, 150, 'setElementDimensions only w ok');
  99     is(dims.h, 150, 'setElementDimensions h not updated ok');
 100
 101     hideElement('styleTest');
 102     dims = getElementDimensions('styleTest');
 103     is(dims.w, 150, 'getElementDimensions w ok when display none');
 104     is(dims.h, 150, 'getElementDimensions h ok when display none');
 105
 106     dims = getViewportDimensions();
 107     is(dims.w > 0, true, 'test getViewportDimensions w');
 108     is(dims.h > 0, true, 'test getViewportDimensions h');
 109
 110     pos = getViewportPosition();
 111     is(pos.x, 0, 'test getViewportPosition x');
 112     is(pos.y, 0, 'test getViewportPosition y');
 113
 114     ok( true, "test suite finished!");
 115
 116
 117 } catch (err) {
 118
 119     var s = "test suite failure!\n";
 120     var o = {};
 121     var k = null;
 122     for (k in err) {
 123         // ensure unique keys?!
 124         if (!o[k]) {
 125             s +=  k + ": " + err[k] + "\n";
 126             o[k] = err[k];
 127         }
 128     }
 129     ok ( false, s );
 130
 131 }
 132 </script>
 133 </pre>
 134 </body>
 135 </html>