Added initRender() to allow test cases to prepare display

scripts/ColorTestCase.js

@@ -9,14 +9,28 @@ rectest.ColorTestCase = Class( 'ColorTestCase' )
         [ 'purple', 'brown', 'gray' ]
     ],
 
+    /**
+     * Element to contain color
+     * @var {jQuery}
+     */
+    'private _$color': null,
+
+
     'public getSet': function( set_id )
     {
         return this.__self.$( '_sets' )[ 0 ];
     },
 
+    'public initRender': function( $element )
+    {
+        $element.append( this._$color = $( '<div>' )
+            .addClass( 'color-display' )
+        );
+    },
+
     'public render': function( id, $element )
     {
-        $element.text( id );
+        this._$color.css( 'background-color', id );
     }
 } );
 

scripts/TestCase.js

@@ -3,5 +3,7 @@ rectest.TestCase = Interface( 'TestCase',
 {
     'public getSet': [ 'set_id' ],
 
+    'public initRender': [ 'element' ],
+
     'public render': [ 'id', 'element' ]
 } );

scripts/TestRunner.js

@@ -56,8 +56,7 @@ rectest.TestRunner = Class( 'TestRunner',
     'private _createDestElement': function()
     {
         return this._jQuery( '<div>' )
-            .addClass( 'render' )
-            .text( 'test' );
+            .addClass( 'render' );
     },
 
 
@@ -88,6 +87,9 @@ rectest.TestRunner = Class( 'TestRunner',
         var _self = this,
             run   = _self._TestRun( test_case, options );
 
+        // allow test case to initialize its display
+        test_case.initRender( this._$dest );
+
         // start test after the given delay
         setTimeout( function()
         {
@@ -146,7 +148,7 @@ rectest.TestRunner = Class( 'TestRunner',
     'private _blank': function()
     {
         // clear dest element
-        this._$dest.html( '' );
+        this._$dest.hide();
     },
 
 
@@ -160,7 +162,7 @@ rectest.TestRunner = Class( 'TestRunner',
         {
             // render this element
             this._history.push( next );
-            test_case.render( next, this._$dest );
+            test_case.render( next, this._$dest.show() );
         }
 
         return next;

style.css

@@ -62,3 +62,15 @@ dd {
 .render {
   position: absolute;
 }
+
+
+/*** color test ***/
+.render .color-display {
+  display: block;
+
+  margin: 0px auto;
+  border-radius: 2em;
+
+  width: 300px;
+  height: 300px;
+}