2009-08-26 02:35:21 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>LayoutConstructorsTest</title>
|
|
|
|
|
<script type="text/javascript" src="testcase.js"></script>
|
2009-10-20 01:41:55 +00:00
|
|
|
<script type="text/javascript" src="prototype.js"></script>
|
2009-08-26 02:35:21 +00:00
|
|
|
<script type="text/javascript" src="FloatedDivConstructor.js"></script>
|
2009-10-20 01:41:55 +00:00
|
|
|
<script type="text/javascript" src="TableConstructor.js"></script>
|
2009-08-26 02:35:21 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var FloatedDivConstructorTest = TestCase.create({
|
|
|
|
|
name: "Floated Div Constructor Test",
|
|
|
|
|
|
|
|
|
|
testGenerateHTML: function() {
|
|
|
|
|
var myThis = this;
|
|
|
|
|
[
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 3
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-27 22:15:34 +00:00
|
|
|
'expected_result': '<div id="container">\n' +
|
|
|
|
|
' <div id="header"><?php echo $header ?></div>\n' +
|
|
|
|
|
' <div id="comic"><?php echo $comic ?></div>\n' +
|
|
|
|
|
' <div id="body"><?php echo $body ?></div>\n' +
|
|
|
|
|
' <div id="footer"><?php echo $footer ?></div>\n' +
|
|
|
|
|
'</div>'
|
2009-08-26 02:35:21 +00:00
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 0
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-27 22:15:34 +00:00
|
|
|
'expected_result': '<div id="container">\n' +
|
|
|
|
|
' <div id="sidebar-container">\n' +
|
|
|
|
|
' <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
|
|
|
|
|
' <div id="header"><?php echo $header ?></div>\n' +
|
|
|
|
|
' <br class="clear" />\n' +
|
|
|
|
|
' </div>\n' +
|
|
|
|
|
' <div id="comic"><?php echo $comic ?></div>\n' +
|
|
|
|
|
' <div id="body"><?php echo $body ?></div>\n' +
|
|
|
|
|
' <div id="footer"><?php echo $footer ?></div>\n' +
|
|
|
|
|
'</div>'
|
2009-08-26 02:35:21 +00:00
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 1
|
|
|
|
|
}, 'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 3
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-27 22:15:34 +00:00
|
|
|
'expected_result': '<div id="container">\n' +
|
|
|
|
|
' <div id="sidebar-container">\n' +
|
|
|
|
|
' <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
|
|
|
|
|
' <div id="header"><?php echo $header ?></div>\n' +
|
|
|
|
|
' <div id="comic"><?php echo $comic ?></div>\n' +
|
|
|
|
|
' <br class="clear" />\n' +
|
|
|
|
|
' </div>\n' +
|
|
|
|
|
' <div id="body"><?php echo $body ?></div>\n' +
|
|
|
|
|
' <div id="footer"><?php echo $footer ?></div>\n' +
|
|
|
|
|
'</div>'
|
2009-08-26 02:35:21 +00:00
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'right': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 1
|
|
|
|
|
},
|
|
|
|
|
'left': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 3
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-27 22:15:34 +00:00
|
|
|
'expected_result': '<div id="container">\n' +
|
|
|
|
|
' <div id="sidebar-container">\n' +
|
|
|
|
|
' <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n' +
|
|
|
|
|
' <div id="header"><?php echo $header ?></div>\n' +
|
|
|
|
|
' <div id="comic"><?php echo $comic ?></div>\n' +
|
|
|
|
|
' <br class="clear" />\n' +
|
|
|
|
|
' </div>\n' +
|
|
|
|
|
' <div id="body"><?php echo $body ?></div>\n' +
|
|
|
|
|
' <div id="footer"><?php echo $footer ?></div>\n' +
|
|
|
|
|
'</div>'
|
|
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 1
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-27 22:15:34 +00:00
|
|
|
'expected_result': '<div id="container">\n' +
|
|
|
|
|
' <div id="whole-sidebar-container">\n' +
|
|
|
|
|
' <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
|
|
|
|
|
' <div id="sidebar-container">\n' +
|
|
|
|
|
' <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n' +
|
|
|
|
|
' <div id="header"><?php echo $header ?></div>\n' +
|
|
|
|
|
' <div id="comic"><?php echo $comic ?></div>\n' +
|
|
|
|
|
' <br class="clear" />\n' +
|
|
|
|
|
' </div>\n' +
|
|
|
|
|
' <div id="body"><?php echo $body ?></div>\n' +
|
|
|
|
|
' <div id="footer"><?php echo $footer ?></div>\n' +
|
|
|
|
|
' <br class="clear" />\n' +
|
|
|
|
|
' </div>\n' +
|
|
|
|
|
'</div>'
|
|
|
|
|
},
|
2009-08-26 02:35:21 +00:00
|
|
|
].each(function(info) {
|
|
|
|
|
var f = new FloatedDivConstructor();
|
|
|
|
|
myThis.assertEqual(info.expected_result, f.generate_html(info.input));
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
2009-08-26 02:43:44 +00:00
|
|
|
testGenerateCSS: function() {
|
2009-08-26 02:35:21 +00:00
|
|
|
var myThis = this;
|
|
|
|
|
[
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 0,
|
|
|
|
|
'width': 0
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 0,
|
|
|
|
|
'width': 0
|
|
|
|
|
}
|
|
|
|
|
},
|
2009-08-26 02:35:21 +00:00
|
|
|
'expected_result': ''
|
|
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'body': '800',
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3,
|
|
|
|
|
'width': 200
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 3,
|
|
|
|
|
'width': 175
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'expected_result': '#container { width: 800px }\n'
|
|
|
|
|
+ '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
|
2009-08-27 22:15:34 +00:00
|
|
|
+ '#left-sidebar { float: left; display: inline; width: 200px }\n'
|
2009-08-30 15:00:58 +00:00
|
|
|
+ '#header { margin-left: 200px }\n'
|
|
|
|
|
+ '#comic { margin-left: 200px }\n'
|
|
|
|
|
+ '#body { margin-left: 200px }\n'
|
|
|
|
|
+ '#footer { margin-left: 200px }\n'
|
2009-08-27 22:15:34 +00:00
|
|
|
+ '.clear { clear: both }'
|
2009-08-26 02:35:21 +00:00
|
|
|
},
|
|
|
|
|
{
|
2009-08-30 15:00:58 +00:00
|
|
|
'input': {
|
|
|
|
|
'body': '800',
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 2,
|
|
|
|
|
'width': 200
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 1,
|
|
|
|
|
'end': 3,
|
|
|
|
|
'width': 175
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'expected_result': '#container { width: 800px }\n'
|
|
|
|
|
+ '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
|
|
|
|
|
+ '#left-sidebar { float: left; display: inline; width: 200px }\n'
|
|
|
|
|
+ '#comic { margin-left: 200px }\n'
|
|
|
|
|
+ '#body { margin-left: 200px }\n'
|
|
|
|
|
+ '.clear { clear: both }'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'input': {
|
|
|
|
|
'body': '800',
|
|
|
|
|
'left': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 1,
|
|
|
|
|
'width': 200
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': true,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3,
|
|
|
|
|
'width': 100
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'expected_result': '#container { width: 800px }\n'
|
|
|
|
|
+ '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
|
2009-08-27 22:15:34 +00:00
|
|
|
+ '#left-sidebar { float: left; display: inline; width: 200px }\n'
|
|
|
|
|
+ '#right-sidebar { float: right; display: inline; width: 100px }\n'
|
2009-08-30 15:00:58 +00:00
|
|
|
+ '#header { margin-left: 200px; margin-right: 100px }\n'
|
|
|
|
|
+ '#comic { margin-left: 200px; margin-right: 100px }\n'
|
|
|
|
|
+ '#body { margin-right: 100px }\n'
|
|
|
|
|
+ '#footer { margin-right: 100px }\n'
|
2009-08-27 22:15:34 +00:00
|
|
|
+ '.clear { clear: both }'
|
2009-08-26 02:35:21 +00:00
|
|
|
}
|
|
|
|
|
].each(function(info) {
|
|
|
|
|
var f = new FloatedDivConstructor();
|
|
|
|
|
myThis.assertEqual(info.expected_result, f.generate_css(info.input));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2009-10-20 01:41:55 +00:00
|
|
|
var TableConstructorTest = TestCase.create({
|
|
|
|
|
name: "Table Constructor Test",
|
|
|
|
|
|
|
|
|
|
testGenerateHTML: function() {
|
|
|
|
|
var myThis = this;
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
'input': {
|
|
|
|
|
'left': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3
|
|
|
|
|
},
|
|
|
|
|
'right': {
|
|
|
|
|
'active': false,
|
|
|
|
|
'start': 0,
|
|
|
|
|
'end': 3
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'expected_result': '<table id="container" cellspacing="0">\n' +
|
|
|
|
|
' <tr><td id="header"><?php echo $header ?></td></tr>\n' +
|
|
|
|
|
' <tr><td id="comic"><?php echo $comic ?></td></tr>\n' +
|
|
|
|
|
' <tr><td id="body"><?php echo $body ?></td></tr>\n' +
|
|
|
|
|
' <tr><td id="footer"><?php echo $footer ?></td></tr>\n' +
|
|
|
|
|
'</table>'
|
|
|
|
|
}
|
|
|
|
|
].each(function(info) {
|
|
|
|
|
var f = new FloatedDivConstructor();
|
|
|
|
|
myThis.assertEqual(info.expected_result, f.generate_html(info.input));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2009-08-26 02:35:21 +00:00
|
|
|
FloatedDivConstructorTest.run();
|
2009-10-20 01:41:55 +00:00
|
|
|
TableConstructorTest.run();
|
2009-08-26 02:35:21 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
