Test Case Boilerplate

Fork this way...

HTML

<body>
<div id='log'></div>
</body>

JavaScript

// we play around with the display property of elem
var elem = $('<div>');
$('body').append(elem);

// set the display to inline, then hide, then show
// we expect elem.style.display to be 'inline' again
test(elem, 'inline');

log('<br>');

// set the display to flex, then hide, then show
// we expect elem.style.display to be 'flex' again
// but it is again inline
test(elem, 'flex');

function test(elem, display)
{
	log('setting display to "' + display + '"');
	elem.css('display', display);
	trace(elem, display);

	log('call hide()');
	elem.hide();
	trace(elem, 'none');

	log('call show()');
	elem.show();
	trace(elem, display);
}


function trace(elem, expected)
{
	var display = elem[0].style.display;
	var message = '- now display is "' + display + '", ';
	if (display === expected)
		message += 'ok';
	else
		message += 'error: expected "' + expected + '"';
	log(message);
}

function log(s)
{	
	$('#log').append(s).append('<br>');
}