blob: f1dae778018c134b244944986d2f1e9c250d2098 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description('Tests the classList attribute and its properties.');
var element;
function createElement(className)
{
element = document.createElement('p');
element.className = className;
}
debug('Tests from http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/setting/001.htm
createElement('x');
element.classList = 'y';
shouldBeEqualToString('String(element.classList)', 'y');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/001.htm
createElement('');
shouldEvaluateTo('element.classList.length', 0);
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/002.htm
createElement('x');
shouldEvaluateTo('element.classList.length', 1);
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/003.htm
createElement('x x');
shouldEvaluateTo('element.classList.length', 1);
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/004.htm
createElement('x y');
shouldEvaluateTo('element.classList.length', 2);
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/005.htm
createElement('');
element.classList.add('x');
shouldBeEqualToString('element.className', 'x');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/006.htm
createElement('x');
element.classList.add('x');
shouldBeEqualToString('element.className', 'x');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/007.htm
createElement('x x');
element.classList.add('x');
shouldBeEqualToString('element.className', 'x');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/008.htm
createElement('y');
element.classList.add('x');
shouldBeEqualToString('element.className', 'y x');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/009.htm
createElement('');
element.classList.remove('x');
shouldBeEqualToString('element.className', '');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/010.htm
createElement('x');
element.classList.remove('x');
shouldBeEqualToString('element.className', '');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/011.htm
createElement(' y x y ');
element.classList.remove('x');
shouldBeEqualToString('element.className', 'y');
// http://simon.html5.org/test/html/dom/reflecting/DOMTokenList/getting/012.htm
createElement(' x y x ');
element.classList.remove('x');
shouldBeEqualToString('element.className', 'y');
debug('Ensure that we can handle empty class name correctly');
element = document.createElement('span');
shouldBeTrue("element.classList.toggle('x')");
shouldBeEqualToString('element.className', 'x');
shouldBeFalse("element.classList.toggle('x')");
shouldBeEqualToString('element.className', '');
element = document.createElement('span');
shouldBeFalse('element.classList.contains(\'x\')');
shouldBeUndefined('element.classList[1]');
element.classList.remove('x');
element.classList.add('x')
debug('Test toggle with force argument')
createElement('');
shouldBeTrue("element.classList.toggle('x', true)");
shouldBeEqualToString('element.className', 'x');
shouldBeTrue("element.classList.toggle('x', true)");
shouldBeEqualToString('element.className', 'x');
shouldBeFalse("element.classList.toggle('x', false)");
shouldBeEqualToString('element.className', '');
shouldBeFalse("element.classList.toggle('x', false)");
shouldBeEqualToString('element.className', '');
shouldThrowDOMException(function() {
element.classList.toggle('', true);
}, DOMException.SYNTAX_ERR);
shouldThrowDOMException(function() {
element.classList.toggle('x y', false);
}, DOMException.INVALID_CHARACTER_ERR);
debug('Testing add in presence of trailing white spaces.');
createElement('x ');
element.classList.add('y');
shouldBeEqualToString('element.className', 'x y');
createElement('x\t');
element.classList.add('y');
shouldBeEqualToString('element.className', 'x y');
createElement(' ');
element.classList.add('y');
shouldBeEqualToString('element.className', 'y');
debug('Test invalid tokens');
// Testing exception due to invalid token
// shouldThrow from js-test-pre.js is not sufficient.
function shouldThrowDOMException(f, ec)
{
try {
f();
testFailed('Expected an exception');
} catch (ex) {
if (!(ex instanceof DOMException)) {
testFailed('Exception is not an instance of DOMException, found: ' +
Object.toString.call(ex));
return;
}
if (ec !== ex.code) {
testFailed('Wrong exception code: ' + ex.code);
return;
}
}
var formattedFunction = String(f).replace(/^function.+\{\s*/m, '').
replace(/;?\s+\}/m, '');
testPassed(formattedFunction + ' threw expected DOMException with code ' + ec);
}
createElement('x');
shouldBeFalse("element.classList.contains('')");
createElement('x y');
shouldBeFalse("element.classList.contains('x y')");
createElement('');
shouldThrowDOMException(function() {
element.classList.add('');
}, DOMException.SYNTAX_ERR);
createElement('');
shouldThrowDOMException(function() {
element.classList.add('x y');
}, DOMException.INVALID_CHARACTER_ERR);
createElement('');
shouldThrowDOMException(function() {
element.classList.remove('');
}, DOMException.SYNTAX_ERR);
createElement('');
shouldThrowDOMException(function() {
element.classList.remove('x y');
}, DOMException.INVALID_CHARACTER_ERR);
createElement('');
shouldThrowDOMException(function() {
element.classList.toggle('');
}, DOMException.SYNTAX_ERR);
createElement('x y');
shouldThrowDOMException(function() {
element.classList.toggle('x y');
}, DOMException.INVALID_CHARACTER_ERR);
createElement('');
shouldThrow("element.classList.toggle()");
debug('Indexing');
createElement('x');
shouldBeEqualToString('element.classList[0]', 'x');
shouldBeEqualToString('element.classList.item(0)', 'x');
createElement('x x');
shouldBeUndefined('element.classList[1]');
shouldBeNull('element.classList.item(1)');
createElement('x y');
shouldBeEqualToString('element.classList[1]', 'y');
shouldBeEqualToString('element.classList.item(1)', 'y');
createElement('');
shouldBeUndefined('element.classList[0]');
shouldBeNull('element.classList.item(0)');
createElement('x y z');
shouldBeUndefined('element.classList[4]');
shouldBeNull('element.classList.item(4)');
shouldBeUndefined('element.classList[-1]'); // Not a valid index so should not trigger item().
shouldBeNull('element.classList.item(-1)');
shouldThrow('element.classList.item()');
debug('Test case since DOMTokenList is case sensitive');
createElement('x');
shouldBeTrue('element.classList.contains(\'x\')');
shouldBeFalse('element.classList.contains(\'X\')');
shouldBeEqualToString('element.classList[0]', 'x');
shouldThrow('element.classList.contains()');
createElement('X');
shouldBeTrue('element.classList.contains(\'X\')');
shouldBeFalse('element.classList.contains(\'x\')');
shouldBeEqualToString('element.classList[0]', 'X');
debug('Testing whitespace');
// U+0020 SPACE, U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF),
// U+000C FORM FEED (FF), and U+000D CARRIAGE RETURN (CR)
createElement('x\u0020y');
shouldEvaluateTo('element.classList.length', 2);
createElement('x\u0009y');
shouldEvaluateTo('element.classList.length', 2);
createElement('x\u000Ay');
shouldEvaluateTo('element.classList.length', 2);
createElement('x\u000Cy');
shouldEvaluateTo('element.classList.length', 2);
createElement('x\u000Dy');
shouldEvaluateTo('element.classList.length', 2);
debug('DOMTokenList presence and type');
// Safari returns object
// Firefox returns object
// IE8 returns object
// Chrome returns function
// assertEquals('object', typeof DOMTokenList);
shouldBeTrue('\'undefined\' != typeof DOMTokenList');
shouldBeEqualToString('typeof DOMTokenList.prototype', 'object');
createElement('x');
shouldBeEqualToString('typeof element.classList', 'object');
shouldEvaluateTo('element.classList.constructor', 'DOMTokenList');
shouldBeTrue('element.classList === element.classList');
// Bug 93628
document.body.classList.add('FAIL');
shouldBeTrue('document.body.classList.contains("FAIL")');
document.body.classList.remove('FAIL');
shouldBeEqualToString('document.body.className', '');
// Variadic
debug('Variadic calls');
createElement('');
element.classList.add('a', 'b');
shouldBeEqualToString('element.className', 'a b');
element.classList.add('a', 'b', 'c');
shouldBeEqualToString('element.className', 'a b c');
element.classList.add(null, {toString: function() { return 'd' }}, undefined, 0, false);
shouldBeEqualToString('element.className', 'a b c null d undefined 0 false');
createElement('');
element.classList.add('a', 'b', 'a');
shouldBeEqualToString('element.className', 'a b');
createElement('');
shouldThrowDOMException(function() {
element.classList.add('a', 'b', '');
}, DOMException.SYNTAX_ERR);
shouldBeEqualToString('element.className', '');
shouldThrowDOMException(function() {
element.classList.add('a', 'b', 'c d');
}, DOMException.INVALID_CHARACTER_ERR);
shouldBeEqualToString('element.className', '');
shouldThrow('element.classList.add("a", {toString: function() { throw new Error("user error"); }}, "b")', '"Error: user error"');
shouldBeEqualToString('element.className', '');
createElement('');
shouldNotThrow('element.classList.add()');
createElement('');
var observer = new WebKitMutationObserver(function() {});
observer.observe(element, {attributes: true});
element.classList.add('a', 'c');
shouldBe('observer.takeRecords().length', '1');
createElement('a b c d ');
element.classList.remove('a', 'c');
shouldBeEqualToString('element.className', 'b d');
element.classList.remove('b', 'b');
shouldBeEqualToString('element.className', 'd');
createElement('a b c null d undefined 0 false');
element.classList.remove(null, {toString: function() { return 'd' }}, undefined, 0, false);
shouldBeEqualToString('element.className', 'a b c');
createElement('a b');
shouldThrowDOMException(function() {
element.classList.remove('a', 'b', '');
}, DOMException.SYNTAX_ERR);
shouldBeEqualToString('element.className', 'a b');
shouldThrow('element.classList.remove("a", {toString: function() { throw new Error("user error"); }}, "b")', '"Error: user error"');
shouldBeEqualToString('element.className', 'a b');
shouldThrowDOMException(function() {
element.classList.remove('a', 'b', 'c d');
}, DOMException.INVALID_CHARACTER_ERR);
shouldBeEqualToString('element.className', 'a b');
shouldNotThrow('element.classList.remove()');
createElement('a b c');
observer = new WebKitMutationObserver(function() {});
observer.observe(element, {attributes: true});
element.classList.remove('a', 'c');
shouldBe('observer.takeRecords().length', '1');
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>