mirror of
https://github.com/lightpanda-io/browser.git
synced 2025-10-29 07:03:29 +00:00
329 lines
12 KiB
HTML
329 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../testing.js"></script>
|
|
|
|
<div id="content" dir="ltr">
|
|
<a id="link" href="foo" class="ok">OK</a>
|
|
<p id="para-empty" class="ok empty">
|
|
<span id="para-empty-child"></span>
|
|
</p>
|
|
<p id="para"> And</p>
|
|
<!--comment-->
|
|
</div>
|
|
|
|
<script id=element>
|
|
let content = document.getElementById('content');
|
|
testing.expectEqual('http://www.w3.org/1999/xhtml', content.namespaceURI);
|
|
testing.expectEqual(null, content.prefix);
|
|
testing.expectEqual('div', content.localName);
|
|
testing.expectEqual('DIV', content.tagName);
|
|
testing.expectEqual('content', content.id);
|
|
testing.expectEqual('ltr', content.dir);
|
|
|
|
content.id = 'foo';
|
|
testing.expectEqual('foo', content.id);
|
|
|
|
content.id = 'content';
|
|
testing.expectEqual('', content.className);
|
|
|
|
let p1 = document.getElementById('para-empty');
|
|
testing.expectEqual('ok empty', p1.className);
|
|
testing.expectEqual('', p1.dir);
|
|
|
|
p1.className = 'foo bar baz';
|
|
testing.expectEqual('foo bar baz', p1.className);
|
|
|
|
p1.className = 'ok empty';
|
|
testing.expectEqual(2, p1.classList.length);
|
|
</script>
|
|
|
|
<script id=closest>
|
|
const el2 = document.createElement('div');
|
|
el2.id = 'closest';
|
|
el2.className = 'ok';
|
|
|
|
testing.expectEqual(el2, el2.closest('#closest'));
|
|
testing.expectEqual(el2, el2.closest('.ok'));
|
|
testing.expectEqual(null, el2.closest('#9000'));
|
|
testing.expectEqual(null, el2.closest('.notok'));
|
|
|
|
const sp = document.createElement('span');
|
|
el2.appendChild(sp);
|
|
testing.expectEqual(el2, sp.closest('#closest'));
|
|
testing.expectEqual(null, sp.closest('#9000'));
|
|
</script>
|
|
|
|
<script id=attributes>
|
|
testing.expectEqual(true, content.hasAttributes());
|
|
testing.expectEqual(2, content.attributes.length);
|
|
testing.expectEqual(['id', 'dir'], content.getAttributeNames());
|
|
testing.expectEqual('content', content.getAttribute('id'));
|
|
testing.expectEqual('content', content.attributes['id'].value);
|
|
|
|
let x = '';
|
|
for (const attr of content.attributes) {
|
|
x += attr.name + '=' + attr.value + ',';
|
|
}
|
|
testing.expectEqual('id=content,dir=ltr,', x);
|
|
|
|
testing.expectEqual(false, content.hasAttribute('foo'));
|
|
testing.expectEqual(null, content.getAttribute('foo'));
|
|
|
|
content.setAttribute('foo', 'bar');
|
|
testing.expectEqual(true, content.hasAttribute('foo'));
|
|
testing.expectEqual('bar', content.getAttribute('foo'));
|
|
testing.expectEqual(['id', 'dir', 'foo'], content.getAttributeNames());
|
|
|
|
testing.expectError('Error: InvalidCharacterError', () => {
|
|
content.setAttribute('.foo', 'invalid')
|
|
});
|
|
|
|
content.setAttribute('foo', 'baz');
|
|
testing.expectEqual(true, content.hasAttribute('foo'));
|
|
testing.expectEqual('baz', content.getAttribute('foo'));
|
|
|
|
content.removeAttribute('foo');
|
|
testing.expectEqual(false, content.hasAttribute('foo'));
|
|
testing.expectEqual(null, content.getAttribute('foo'));
|
|
|
|
let b = document.getElementById('content');
|
|
testing.expectEqual(true, b.toggleAttribute('foo'));
|
|
testing.expectEqual(true, b.hasAttribute('foo'));
|
|
testing.expectEqual('', b.getAttribute('foo'));
|
|
|
|
testing.expectEqual(false, b.toggleAttribute('foo'));
|
|
testing.expectEqual(false, b.hasAttribute('foo'));
|
|
|
|
testing.expectEqual(false, document.createElement('a').hasAttributes());
|
|
|
|
const div2 = document.createElement('div');
|
|
div2.innerHTML = '<p id=1 .lit$id=9>a</p>';
|
|
testing.expectEqual('<p id="1" .lit$id="9">a</p>', div2.innerHTML);
|
|
testing.expectEqual(['id', '.lit$id'], div2.childNodes[0].getAttributeNames());
|
|
</script>
|
|
|
|
<script id=children>
|
|
testing.expectEqual(3, content.children.length);
|
|
testing.expectEqual('A', content.firstElementChild.nodeName);
|
|
testing.expectEqual('P', content.lastElementChild.nodeName);
|
|
testing.expectEqual(3, content.childElementCount);
|
|
</script>
|
|
|
|
<script id=sibling>
|
|
content.prepend(document.createTextNode('foo'));
|
|
content.append(document.createTextNode('bar'));
|
|
|
|
let d = document.getElementById('para');
|
|
testing.expectEqual('P', d.previousElementSibling.nodeName);
|
|
testing.expectEqual(null, d.nextElementSibling);
|
|
</script>
|
|
|
|
<script id=querySelector>
|
|
testing.expectEqual(null, content.querySelector('foo'));
|
|
testing.expectEqual(null, content.querySelector('#foo'));
|
|
testing.expectEqual('link', content.querySelector('#link').id);
|
|
testing.expectEqual('para', content.querySelector('#para').id);
|
|
testing.expectEqual('link', content.querySelector('*').id);
|
|
testing.expectEqual(null, content.querySelector(''));
|
|
testing.expectEqual('link', content.querySelector('*').id);
|
|
testing.expectEqual(null, content.querySelector('#content'));
|
|
testing.expectEqual('para', content.querySelector('#para').id);
|
|
testing.expectEqual('link', content.querySelector('.ok').id);
|
|
testing.expectEqual('para-empty', content.querySelector('a ~ p').id);
|
|
|
|
testing.expectEqual(0, content.querySelectorAll('foo').length);
|
|
testing.expectEqual(0, content.querySelectorAll('#foo').length);
|
|
testing.expectEqual(1, content.querySelectorAll('#link').length);
|
|
testing.expectEqual('link', content.querySelectorAll('#link').item(0).id);
|
|
testing.expectEqual(1, content.querySelectorAll('#para').length);
|
|
testing.expectEqual('para', content.querySelectorAll('#para').item(0).id);
|
|
testing.expectEqual(4, content.querySelectorAll('*').length);
|
|
testing.expectEqual(2, content.querySelectorAll('p').length);
|
|
testing.expectEqual('link', content.querySelectorAll('.ok').item(0).id);
|
|
</script>
|
|
|
|
<script id=createdAttributes>
|
|
let ff = document.createAttribute('foo');
|
|
content.setAttributeNode(ff);
|
|
testing.expectEqual('foo', content.getAttributeNode('foo').name);
|
|
testing.expectEqual('foo', content.removeAttributeNode(ff).name);
|
|
testing.expectEqual(null, content.getAttributeNode('bar'));
|
|
</script>
|
|
|
|
<script id=innerHTML>
|
|
testing.expectEqual(' And', document.getElementById('para').innerHTML);
|
|
testing.expectEqual('<span id="para-empty-child"></span>', $('#para-empty').innerHTML.trim());
|
|
|
|
let h = $('#para-empty');
|
|
const prev = h.innerHTML;
|
|
h.innerHTML = '<p id="hello">hello world</p>';
|
|
testing.expectEqual('<p id="hello">hello world</p>', h.innerHTML);
|
|
testing.expectEqual('P', h.firstChild.nodeName);
|
|
testing.expectEqual('hello', h.firstChild.id);
|
|
testing.expectEqual('hello world', h.firstChild.textContent);
|
|
|
|
h.innerHTML = prev;
|
|
testing.expectEqual('<span id="para-empty-child"></span>', $('#para-empty').innerHTML.trim());
|
|
testing.expectEqual('<p id="para"> And</p>', $('#para').outerHTML);
|
|
</script>
|
|
|
|
<script id=dimensions>
|
|
const para = document.getElementById('para');
|
|
testing.expectEqual(1, para.clientWidth);
|
|
testing.expectEqual(1, para.clientHeight);
|
|
|
|
// let r1 = document.getElementById('para').getBoundingClientRect();
|
|
// testing.expectEqual(0, r1.x);
|
|
// testing.expectEqual(0, r1.y);
|
|
// testing.expectEqual(1, r1.width);
|
|
// testing.expectEqual(2, r1.height);
|
|
|
|
// let r2 = document.getElementById('content').getBoundingClientRect();
|
|
// testing.expectEqual(1, r2.x);
|
|
// testing.expectEqual(0, r2.y);
|
|
// testing.expectEqual(1, r2.width);
|
|
// testing.expectEqual(1, r2.height);
|
|
|
|
// let r3 = document.getElementById('para').getBoundingClientRect();
|
|
// testing.expectEqual(0, r3.x);
|
|
// testing.expectEqual(0, r3.y);
|
|
// testing.expectEqual(1, r3.width);
|
|
// testing.expectEqual(1, r3.height);
|
|
|
|
// testing.expectEqual(1, para.clientWidth);
|
|
// testing.expectEqual(1, para.clientHeight);
|
|
|
|
// let r4 = document.createElement('div').getBoundingClientRect();
|
|
// testing.expectEqual(0, r4.x);
|
|
// testing.expectEqual(0, r4.y);
|
|
// testing.expectEqual(0, r4.width);
|
|
// testing.expectEqual(0, r4.height);
|
|
</script>
|
|
|
|
<script id=matches>
|
|
const el = document.createElement('div');
|
|
el.id = 'matches';
|
|
el.className = 'ok';
|
|
testing.expectEqual(true, el.matches('#matches'));
|
|
testing.expectEqual(true, el.matches('.ok'));
|
|
testing.expectEqual(false, el.matches('#9000'));
|
|
testing.expectEqual(false, el.matches('.notok'));
|
|
</script>
|
|
|
|
<script id=scroll>
|
|
const el3 = document.createElement('div');
|
|
el3.scrollIntoViewIfNeeded();
|
|
el3.scrollIntoViewIfNeeded(false);
|
|
// doesn't throw is good enough
|
|
testing.skip();
|
|
</script>
|
|
|
|
<script id=before>
|
|
const before_container = document.createElement('div');
|
|
document.append(before_container);
|
|
|
|
const b1 = document.createElement('div');
|
|
before_container.append(b1);
|
|
|
|
const b1_a = document.createElement('p');
|
|
b1.before(b1_a, 'over 9000');
|
|
testing.expectEqual('<p></p>over 9000<div></div>', before_container.innerHTML);
|
|
</script>
|
|
|
|
<script id=after>
|
|
const after_container = document.createElement('div');
|
|
document.append(after_container);
|
|
const a1 = document.createElement('div');
|
|
after_container.append(a1);
|
|
|
|
const a1_a = document.createElement('p');
|
|
a1.after('over 9000', a1_a);
|
|
testing.expectEqual('<div></div>over 9000<p></p>', after_container.innerHTML);
|
|
</script>
|
|
|
|
<script id=getElementsByTagName>
|
|
var div1 = document.createElement('div');
|
|
div1.innerHTML = " <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
|
|
testing.expectEqual(1, div1.getElementsByTagName('a').length);
|
|
</script>
|
|
|
|
<script id=outerHTML>
|
|
let fc = document.createElement('div')
|
|
fc.innerHTML = '<script><\/script>';
|
|
testing.expectEqual('<div><script><\/script></div>', fc.outerHTML);
|
|
|
|
fc = document.createElement('div')
|
|
fc.innerHTML = '<script><\/script><p>hello</p>';
|
|
testing.expectEqual('<div><script><\/script><p>hello</p></div>', fc.outerHTML);
|
|
</script>
|
|
|
|
<script id=remove>
|
|
const rm = document.createElement('div');
|
|
testing.expectEqual([], rm.getAttributeNames());
|
|
rm.id = 'to-remove';
|
|
|
|
document.getElementsByTagName('body')[0].appendChild(rm);
|
|
$('#to-remove').remove();
|
|
testing.expectEqual(null, $('#to-remove'));
|
|
</script>
|
|
|
|
<script id=elementDir>
|
|
const divElement = document.createElement("div");
|
|
// Always initialized with empty string if `dir` attribute not provided.
|
|
testing.expectEqual("", divElement.dir);
|
|
|
|
divElement.dir = "ltr";
|
|
testing.expectEqual("ltr", divElement.dir);
|
|
|
|
divElement.dir = "rtl";
|
|
testing.expectEqual("rtl", divElement.dir);
|
|
|
|
divElement.dir = "auto";
|
|
testing.expectEqual("auto", divElement.dir);
|
|
</script>
|
|
|
|
<script id=linkRel>
|
|
const linkElement = document.createElement("link");
|
|
// A newly created link element must have it's rel set to empty string.
|
|
testing.expectEqual("", linkElement.rel);
|
|
|
|
linkElement.rel = "stylesheet";
|
|
testing.expectEqual("stylesheet", linkElement.rel);
|
|
</script>
|
|
|
|
<!-- This structure will get mutated by insertAdjacentHTML test -->
|
|
<div id="insert-adjacent-html-outer-wrapper">
|
|
<div id="insert-adjacent-html-inner-wrapper">
|
|
<span></span>
|
|
<p>content</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script id=insertAdjacentHTML>
|
|
// Insert "beforeend".
|
|
const wrapper = $("#insert-adjacent-html-inner-wrapper");
|
|
wrapper.insertAdjacentHTML("beforeend", "<h1>title</h1>");
|
|
let newElement = wrapper.lastElementChild;
|
|
testing.expectEqual("H1", newElement.tagName);
|
|
testing.expectEqual("title", newElement.innerText);
|
|
|
|
// Insert "beforebegin".
|
|
wrapper.insertAdjacentHTML("beforebegin", "<h2>small title</h2>");
|
|
newElement = wrapper.previousElementSibling;
|
|
testing.expectEqual("H2", newElement.tagName);
|
|
testing.expectEqual("small title", newElement.innerText);
|
|
|
|
// Insert "afterend".
|
|
wrapper.insertAdjacentHTML("afterend", "<div id=\"afterend\">after end</div>");
|
|
newElement = wrapper.nextElementSibling;
|
|
testing.expectEqual("DIV", newElement.tagName);
|
|
testing.expectEqual("after end", newElement.innerText);
|
|
testing.expectEqual("afterend", newElement.id);
|
|
|
|
// Insert "afterbegin".
|
|
wrapper.insertAdjacentHTML("afterbegin", "<div class=\"afterbegin\">after begin</div><yy></yy>");
|
|
newElement = wrapper.firstElementChild;
|
|
testing.expectEqual("DIV", newElement.tagName);
|
|
testing.expectEqual("after begin", newElement.innerText);
|
|
testing.expectEqual("afterbegin", newElement.className);
|
|
</script>
|