diff --git a/scripts/ColorTestCase.js b/scripts/ColorTestCase.js
index 7f5bc92..075009f 100644
--- a/scripts/ColorTestCase.js
+++ b/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 = $( '
' )
+ .addClass( 'color-display' )
+ );
+ },
+
'public render': function( id, $element )
{
- $element.text( id );
+ this._$color.css( 'background-color', id );
}
} );
diff --git a/scripts/TestCase.js b/scripts/TestCase.js
index eadbd3a..050ab09 100644
--- a/scripts/TestCase.js
+++ b/scripts/TestCase.js
@@ -3,5 +3,7 @@ rectest.TestCase = Interface( 'TestCase',
{
'public getSet': [ 'set_id' ],
+ 'public initRender': [ 'element' ],
+
'public render': [ 'id', 'element' ]
} );
diff --git a/scripts/TestRunner.js b/scripts/TestRunner.js
index 7073a78..01faf99 100644
--- a/scripts/TestRunner.js
+++ b/scripts/TestRunner.js
@@ -56,8 +56,7 @@ rectest.TestRunner = Class( 'TestRunner',
'private _createDestElement': function()
{
return this._jQuery( '
' )
- .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;
diff --git a/style.css b/style.css
index 3a9f922..0914f31 100644
--- a/style.css
+++ b/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;
+}