mirror of
https://github.com/lightpanda-io/browser.git
synced 2026-03-29 16:10:04 +00:00
b139c05960
1 - Make element.classList settable 2 - On replace, validate in expected order 3 - On replace, fire mutation observer even if new == old 4 - On replace, handle duplicate values
650 lines
16 KiB
HTML
650 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../testing.js"></script>
|
|
|
|
<div id=test1></div>
|
|
<div id=test2 class="foo bar"></div>
|
|
|
|
<script id=basic>
|
|
{
|
|
const div = $('#test1');
|
|
|
|
testing.expectEqual(0, div.classList.length);
|
|
|
|
div.classList.add('foo');
|
|
testing.expectEqual('foo', div.className);
|
|
testing.expectEqual(1, div.classList.length);
|
|
|
|
div.classList.add('bar', 'baz');
|
|
testing.expectEqual('foo bar baz', div.className);
|
|
testing.expectEqual(3, div.classList.length);
|
|
|
|
div.classList.add('bar');
|
|
testing.expectEqual('foo bar baz', div.className);
|
|
testing.expectEqual(3, div.classList.length);
|
|
}
|
|
</script>
|
|
|
|
<script id=contains>
|
|
{
|
|
const div = $('#test2');
|
|
|
|
testing.expectEqual(false, div.classList.contains(''));
|
|
testing.expectEqual(true, div.classList.contains('foo'));
|
|
testing.expectEqual(true, div.classList.contains('bar'));
|
|
testing.expectEqual(false, div.classList.contains('baz'));
|
|
}
|
|
</script>
|
|
|
|
<script id=remove>
|
|
{
|
|
const div = $('#test2');
|
|
|
|
div.classList.remove('foo');
|
|
testing.expectEqual('bar', div.className);
|
|
testing.expectEqual(1, div.classList.length);
|
|
|
|
div.classList.remove('nonexistent');
|
|
testing.expectEqual('bar', div.className);
|
|
|
|
div.classList.remove('bar');
|
|
testing.expectEqual('', div.className);
|
|
testing.expectEqual(0, div.classList.length);
|
|
}
|
|
</script>
|
|
|
|
<script id=toggle>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
let result = div.classList.toggle('foo');
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('foo', div.className);
|
|
|
|
result = div.classList.toggle('foo');
|
|
testing.expectEqual(false, result);
|
|
testing.expectEqual('', div.className);
|
|
|
|
result = div.classList.toggle('bar', true);
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('bar', div.className);
|
|
|
|
result = div.classList.toggle('bar', true);
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('bar', div.className);
|
|
|
|
result = div.classList.toggle('baz', false);
|
|
testing.expectEqual(false, result);
|
|
testing.expectEqual('bar', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=replace>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo bar baz';
|
|
|
|
let result = div.classList.replace('bar', 'qux');
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('foo qux baz', div.className);
|
|
|
|
result = div.classList.replace('nonexistent', 'other');
|
|
testing.expectEqual(false, result);
|
|
testing.expectEqual('foo qux baz', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=replace_errors>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo bar';
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('SyntaxError', err.name);
|
|
}, () => div.classList.replace('', 'baz'));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('SyntaxError', err.name);
|
|
}, () => div.classList.replace('foo', ''));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.replace('foo bar', 'baz'));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.replace('foo', 'bar baz'));
|
|
}
|
|
</script>
|
|
|
|
<script id=item>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'alpha beta gamma';
|
|
|
|
testing.expectEqual('alpha', div.classList.item(0));
|
|
testing.expectEqual('beta', div.classList.item(1));
|
|
testing.expectEqual('gamma', div.classList.item(2));
|
|
testing.expectEqual(null, div.classList.item(3));
|
|
testing.expectEqual(null, div.classList.item(-1));
|
|
|
|
testing.expectEqual('alpha', div.classList[0]);
|
|
testing.expectEqual('beta', div.classList[1]);
|
|
testing.expectEqual('gamma', div.classList[2]);
|
|
testing.expectEqual(undefined, div.classList[3]);
|
|
}
|
|
</script>
|
|
|
|
<script id=iteration>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'one two three';
|
|
|
|
const result = [];
|
|
for (const cls of div.classList) {
|
|
result.push(cls);
|
|
}
|
|
testing.expectEqual(['one', 'two', 'three'], result);
|
|
}
|
|
</script>
|
|
|
|
<script id=sync>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
div.setAttribute('class', 'alpha beta');
|
|
testing.expectEqual(2, div.classList.length);
|
|
testing.expectEqual(true, div.classList.contains('alpha'));
|
|
testing.expectEqual(true, div.classList.contains('beta'));
|
|
|
|
div.className = 'gamma delta';
|
|
testing.expectEqual(2, div.classList.length);
|
|
testing.expectEqual(true, div.classList.contains('gamma'));
|
|
testing.expectEqual(false, div.classList.contains('alpha'));
|
|
|
|
div.classList.add('epsilon');
|
|
testing.expectEqual('gamma delta epsilon', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=whitespace>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = ' foo bar \t\n baz ';
|
|
|
|
testing.expectEqual(3, div.classList.length);
|
|
testing.expectEqual('foo', div.classList[0]);
|
|
testing.expectEqual('bar', div.classList[1]);
|
|
testing.expectEqual('baz', div.classList[2]);
|
|
}
|
|
</script>
|
|
|
|
<script id=value>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.classList.value = 'test1 test2';
|
|
|
|
testing.expectEqual('test1 test2', div.classList.value);
|
|
testing.expectEqual('test1 test2', div.className);
|
|
testing.expectEqual(2, div.classList.length);
|
|
}
|
|
</script>
|
|
|
|
<script id=classList_assignment>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
// Direct assignment should work (equivalent to classList.value = ...)
|
|
div.classList = 'foo bar baz';
|
|
testing.expectEqual('foo bar baz', div.className);
|
|
testing.expectEqual(3, div.classList.length);
|
|
testing.expectEqual(true, div.classList.contains('foo'));
|
|
|
|
// Assigning again should replace
|
|
div.classList = 'qux';
|
|
testing.expectEqual('qux', div.className);
|
|
testing.expectEqual(1, div.classList.length);
|
|
testing.expectEqual(false, div.classList.contains('foo'));
|
|
|
|
// Empty assignment
|
|
div.classList = '';
|
|
testing.expectEqual('', div.className);
|
|
testing.expectEqual(0, div.classList.length);
|
|
}
|
|
</script>
|
|
|
|
<script id=errors>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('SyntaxError', err.name);
|
|
}, () => div.classList.add(''));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.add('foo bar'));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.add('foo\tbar'));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.add('foo\nbar'));
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('SyntaxError', err.name);
|
|
}, () => div.classList.toggle(''));
|
|
|
|
|
|
testing.withError((err) => {
|
|
testing.expectEqual('InvalidCharacterError', err.name);
|
|
}, () => div.classList.remove('has space'));
|
|
}
|
|
</script>
|
|
|
|
<script id=identity>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
testing.expectEqual(div.classList, div.classList);
|
|
const classList = div.classList;
|
|
div.className = 'changed';
|
|
testing.expectEqual(classList, div.classList);
|
|
}
|
|
</script>
|
|
|
|
<script id=attribute_lifecycle>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
testing.expectEqual(null, div.getAttribute('class'));
|
|
testing.expectEqual(0, div.classList.length);
|
|
|
|
div.classList.add('foo');
|
|
testing.expectEqual('foo', div.getAttribute('class'));
|
|
|
|
div.classList.remove('foo');
|
|
testing.expectEqual('', div.getAttribute('class'));
|
|
testing.expectEqual(0, div.classList.length);
|
|
|
|
div.className = 'bar';
|
|
testing.expectEqual('bar', div.getAttribute('class'));
|
|
|
|
div.className = '';
|
|
testing.expectEqual('', div.getAttribute('class'));
|
|
}
|
|
</script>
|
|
|
|
<script id=duplicates>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo foo bar';
|
|
|
|
testing.expectEqual(2, div.classList.length);
|
|
testing.expectEqual('foo', div.classList[0]);
|
|
testing.expectEqual('bar', div.classList[1]);
|
|
|
|
div.classList.add('foo');
|
|
testing.expectEqual('foo bar', div.className);
|
|
|
|
div.classList.remove('foo');
|
|
testing.expectEqual('bar', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=replace_edge_cases>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo bar';
|
|
|
|
let result = div.classList.replace('foo', 'foo');
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('foo bar', div.className);
|
|
|
|
result = div.classList.replace('foo', 'bar');
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('bar', div.className);
|
|
|
|
div.className = 'alpha beta gamma';
|
|
result = div.classList.replace('beta', 'gamma');
|
|
testing.expectEqual(true, result);
|
|
testing.expectEqual('alpha gamma', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=empty_calls>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo bar';
|
|
|
|
div.classList.add();
|
|
testing.expectEqual('foo bar', div.className);
|
|
|
|
div.classList.remove();
|
|
testing.expectEqual('foo bar', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=case_sensitivity>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
div.classList.add('Foo');
|
|
div.classList.add('foo');
|
|
div.classList.add('FOO');
|
|
|
|
testing.expectEqual('Foo foo FOO', div.className);
|
|
testing.expectEqual(3, div.classList.length);
|
|
testing.expectEqual(true, div.classList.contains('Foo'));
|
|
testing.expectEqual(true, div.classList.contains('foo'));
|
|
testing.expectEqual(true, div.classList.contains('FOO'));
|
|
testing.expectEqual(false, div.classList.contains('fOO'));
|
|
}
|
|
</script>
|
|
|
|
<script id=special_characters>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
div.classList.add('class-name');
|
|
div.classList.add('class_name');
|
|
div.classList.add('class123');
|
|
div.classList.add('123class');
|
|
div.classList.add('über');
|
|
div.classList.add('日本語');
|
|
|
|
testing.expectEqual(6, div.classList.length);
|
|
testing.expectEqual(true, div.classList.contains('class-name'));
|
|
testing.expectEqual(true, div.classList.contains('class_name'));
|
|
testing.expectEqual(true, div.classList.contains('class123'));
|
|
testing.expectEqual(true, div.classList.contains('123class'));
|
|
testing.expectEqual(true, div.classList.contains('über'));
|
|
testing.expectEqual(true, div.classList.contains('日本語'));
|
|
}
|
|
</script>
|
|
|
|
<script id=multiple_operations>
|
|
{
|
|
const div = document.createElement('div');
|
|
|
|
div.classList.add('a', 'b', 'c', 'd', 'e');
|
|
testing.expectEqual('a b c d e', div.className);
|
|
|
|
div.classList.remove('b', 'd');
|
|
testing.expectEqual('a c e', div.className);
|
|
|
|
div.classList.add('b', 'c', 'f');
|
|
testing.expectEqual('a c e b f', div.className);
|
|
}
|
|
</script>
|
|
|
|
<script id=toString>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo bar baz';
|
|
|
|
testing.expectEqual('foo bar baz', div.classList.toString());
|
|
|
|
div.className = '';
|
|
testing.expectEqual('', div.classList.toString());
|
|
|
|
div.className = ' alpha beta ';
|
|
testing.expectEqual(' alpha beta ', div.classList.toString());
|
|
}
|
|
</script>
|
|
|
|
<script id=keys_iterator>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'one two three';
|
|
|
|
const keys = [];
|
|
const iter = div.classList.keys();
|
|
|
|
let result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual(0, result.value);
|
|
keys.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual(1, result.value);
|
|
keys.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual(2, result.value);
|
|
keys.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(true, result.done);
|
|
testing.expectEqual(undefined, result.value);
|
|
|
|
testing.expectEqual([0, 1, 2], keys);
|
|
}
|
|
</script>
|
|
|
|
<script id=keys_for_of>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'alpha beta gamma';
|
|
|
|
const keys = [];
|
|
for (const key of div.classList.keys()) {
|
|
keys.push(key);
|
|
}
|
|
testing.expectEqual([0, 1, 2], keys);
|
|
}
|
|
</script>
|
|
|
|
<script id=values_iterator>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'red green blue';
|
|
|
|
const values = [];
|
|
const iter = div.classList.values();
|
|
|
|
let result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual('red', result.value);
|
|
values.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual('green', result.value);
|
|
values.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual('blue', result.value);
|
|
values.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(true, result.done);
|
|
testing.expectEqual(undefined, result.value);
|
|
|
|
testing.expectEqual(['red', 'green', 'blue'], values);
|
|
}
|
|
</script>
|
|
|
|
<script id=values_for_of>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'x y z';
|
|
|
|
const values = [];
|
|
for (const value of div.classList.values()) {
|
|
values.push(value);
|
|
}
|
|
testing.expectEqual(['x', 'y', 'z'], values);
|
|
}
|
|
</script>
|
|
|
|
<script id=entries_iterator>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'first second third';
|
|
|
|
const entries = [];
|
|
const iter = div.classList.entries();
|
|
|
|
let result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual([0, 'first'], result.value);
|
|
entries.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual([1, 'second'], result.value);
|
|
entries.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(false, result.done);
|
|
testing.expectEqual([2, 'third'], result.value);
|
|
entries.push(result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(true, result.done);
|
|
testing.expectEqual(undefined, result.value);
|
|
|
|
testing.expectEqual([[0, 'first'], [1, 'second'], [2, 'third']], entries);
|
|
}
|
|
</script>
|
|
|
|
<script id=entries_for_of>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'a b c';
|
|
|
|
const entries = [];
|
|
for (const entry of div.classList.entries()) {
|
|
entries.push(entry);
|
|
}
|
|
testing.expectEqual([[0, 'a'], [1, 'b'], [2, 'c']], entries);
|
|
}
|
|
</script>
|
|
|
|
<script id=forEach_basic>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'red green blue';
|
|
|
|
const values = [];
|
|
const indices = [];
|
|
const lists = [];
|
|
|
|
div.classList.forEach((value, index, list) => {
|
|
values.push(value);
|
|
indices.push(index);
|
|
lists.push(list);
|
|
});
|
|
|
|
testing.expectEqual(['red', 'green', 'blue'], values);
|
|
testing.expectEqual([0, 1, 2], indices);
|
|
testing.expectEqual(3, lists.length);
|
|
testing.expectEqual(div.classList, lists[0]);
|
|
testing.expectEqual(div.classList, lists[1]);
|
|
testing.expectEqual(div.classList, lists[2]);
|
|
}
|
|
</script>
|
|
|
|
<script id=forEach_with_this>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'one two';
|
|
|
|
const context = { count: 0 };
|
|
|
|
div.classList.forEach(function(value) {
|
|
this.count++;
|
|
}, context);
|
|
|
|
testing.expectEqual(2, context.count);
|
|
}
|
|
</script>
|
|
|
|
<script id=forEach_empty_list>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = '';
|
|
|
|
let callCount = 0;
|
|
div.classList.forEach(() => {
|
|
callCount++;
|
|
});
|
|
|
|
testing.expectEqual(0, callCount);
|
|
}
|
|
</script>
|
|
|
|
<script id=forEach_duplicates>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'foo foo bar';
|
|
|
|
const values = [];
|
|
div.classList.forEach((value) => {
|
|
values.push(value);
|
|
});
|
|
|
|
testing.expectEqual(['foo', 'bar'], values);
|
|
}
|
|
</script>
|
|
|
|
<script id=iterators_empty_list>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = '';
|
|
|
|
const keys = [...div.classList.keys()];
|
|
testing.expectEqual([], keys);
|
|
|
|
const values = [...div.classList.values()];
|
|
testing.expectEqual([], values);
|
|
|
|
const entries = [...div.classList.entries()];
|
|
testing.expectEqual([], entries);
|
|
}
|
|
</script>
|
|
|
|
<script id=iterators_with_duplicates>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'alpha alpha beta alpha';
|
|
|
|
const values = [...div.classList.values()];
|
|
testing.expectEqual(['alpha', 'beta'], values);
|
|
|
|
const entries = [...div.classList.entries()];
|
|
testing.expectEqual([[0, 'alpha'], [1, 'beta']], entries);
|
|
}
|
|
</script>
|
|
|
|
<script id=iterator_live_behavior>
|
|
{
|
|
const div = document.createElement('div');
|
|
div.className = 'one two three';
|
|
|
|
const iter = div.classList.values();
|
|
|
|
let result = iter.next();
|
|
testing.expectEqual('one', result.value);
|
|
|
|
div.classList.add('four');
|
|
|
|
result = iter.next();
|
|
testing.expectEqual('two', result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual('three', result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual('four', result.value);
|
|
|
|
result = iter.next();
|
|
testing.expectEqual(true, result.done);
|
|
}
|
|
</script>
|