migrate more tests to htmlRunner

2025-10-30 15:41:48 +00:00 · 2025-09-11 12:07:17 +08:00
parent 31fe2807aa
commit ede35718ae
26 changed files with 602 additions and 631 deletions
--- a/src/tests/html/abort_controller.html
+++ b/src/tests/html/abort_controller.html
@@ -0,0 +1,40 @@
+<script src="../testing.js"></script>
+
+<script id=abortController>
+  var a1 = new AbortController();
+
+  var s1 = a1.signal;
+  testing.expectEqual(undefined, s1.throwIfAborted());
+  testing.expectEqual(undefined, s1.reason);
+
+  let target;;
+  let called = 0;
+  s1.addEventListener('abort', (e) => {
+    called += 1;
+    target = e.target;
+  });
+
+  a1.abort();
+  testing.expectEqual(true, s1.aborted)
+  testing.expectEqual(s1, target)
+  testing.expectEqual('AbortError', s1.reason)
+  testing.expectEqual(1, called)
+</script>
+
+<script id=abort>
+  var s2 = AbortSignal.abort('over 9000');
+  testing.expectEqual(true, s2.aborted);
+  testing.expectEqual('over 9000', s2.reason);
+  testing.expectEqual('AbortError', AbortSignal.abort().reason);
+</script>
+
+<script id=timeout>
+  var s3 = AbortSignal.timeout(10);
+  testing.eventually(() => {
+    testing.expectEqual(true, s3.aborted);
+    testing.expectEqual('TimeoutError', s3.reason);
+    testing.expectError('Error: TimeoutError', () => {
+      s3.throwIfAborted()
+    });
+  });
+</script>
--- a/src/tests/html/dataset.html
+++ b/src/tests/html/dataset.html
@@ -0,0 +1,29 @@
+<script src="../testing.js"></script>
+<div id=x data-power="over 9000" data-empty data-some-long-key=ok></div>
+
+<script id=dataset>
+  let el1 = document.createElement('div');
+  testing.expectEqual(undefined, el1.dataset.x);
+
+  el1.dataset.x = '123';
+  testing.expectEqual(true, delete el1.dataset.x);
+  testing.expectEqual(undefined, el1.dataset.x);
+  // yes, this is right
+  testing.expectEqual(true, delete el1.dataset.other);
+
+  let ds1 = el1.dataset;
+  ds1.helloWorld = 'yes';
+  testing.expectEqual('yes', el1.getAttribute('data-hello-world'));
+  el1.setAttribute('data-this-will-work', 'positive');
+  testing.expectEqual('positive', ds1.thisWillWork);
+</script>
+
+<script id=element>
+  let div = $('#x');
+  testing.expectEqual(undefined, div.dataset.nope);
+  testing.expectEqual('over 9000', div.dataset.power);
+  testing.expectEqual('', div.dataset.empty);
+  testing.expectEqual('ok', div.dataset.someLongKey);
+  testing.expectEqual(true, delete div.dataset.power);
+  testing.expectEqual(undefined, div.dataset.power);
+</script>
--- a/src/tests/html/document.html
+++ b/src/tests/html/document.html
@@ -0,0 +1,84 @@
+<html>
+  <body>
+    <div id=content><a id=link href=#></a></div>
+  </body>
+</html>
+
+<script src="../testing.js"></script>
+
+<script id=document>
+  testing.expectEqual('HTMLDocument', document.__proto__.constructor.name);
+  testing.expectEqual('Document', document.__proto__.__proto__.constructor.name);
+  testing.expectEqual('body', document.body.localName);
+
+  testing.expectEqual('localhost:9582', document.domain);
+  testing.expectEqual('', document.referrer);
+  testing.expectEqual('', document.title);
+  testing.expectEqual('body', document.body.localName);
+  testing.expectEqual('head', document.head.localName);
+  testing.expectEqual(0, document.images.length);
+  testing.expectEqual(0, document.embeds.length);
+  testing.expectEqual(0, document.plugins.length);
+  testing.expectEqual(2, document.scripts.length);
+  testing.expectEqual(0, document.forms.length);
+  testing.expectEqual(1, document.links.length);
+  testing.expectEqual(0, document.applets.length);
+  testing.expectEqual(0, document.anchors.length);
+  testing.expectEqual(7, document.all.length);
+  testing.expectEqual('document', document.currentScript.id);
+
+  document.title = 'foo';
+  testing.expectEqual('foo', document.title);
+  document.title = '';
+
+  document.getElementById('link').setAttribute('name', 'foo');
+  let list = document.getElementsByName('foo');
+  testing.expectEqual(1, list.length);
+
+  testing.expectEqual('', document.cookie);
+  document.cookie = 'name=Oeschger;';
+  document.cookie = 'favorite_food=tripe;';
+
+  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+  // "" should be returned, but the framework overrules it atm
+  document.cookie = 'IgnoreMy=Ghost; HttpOnly';
+  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+
+  // Return null since we only return elements when they have previously been localized
+  testing.expectEqual(null, document.elementFromPoint(0.5, 0.5));
+  testing.expectEqual([], document.elementsFromPoint(0.5, 0.5));
+
+  let div1 = document.createElement('div');
+  document.body.appendChild(div1);
+  div1.getClientRects(); // clal this to position it
+  testing.expectEqual('[object HTMLDivElement]', document.elementFromPoint(0.5, 0.5).toString());
+
+  let elems = document.elementsFromPoint(0.5, 0.5);
+  testing.expectEqual(3, elems.length);
+  testing.expectEqual('[object HTMLDivElement]', elems[0].toString());
+  testing.expectEqual('[object HTMLBodyElement]', elems[1].toString());
+  testing.expectEqual('[object HTMLHtmlElement]', elems[2].toString());
+
+  let a = document.createElement('a');
+  a.href = "https://lightpanda.io";
+  document.body.appendChild(a);
+  // Note this will be placed after the div of previous test
+  a.getClientRects();
+
+  let a_again = document.elementFromPoint(1.5, 0.5);
+  testing.expectEqual('[object HTMLAnchorElement]', a_again.toString());
+  testing.expectEqual('https://lightpanda.io', a_again.href);
+
+  let a_agains = document.elementsFromPoint(1.5, 0.5);
+  testing.expectEqual('https://lightpanda.io', a_agains[0].href);
+
+
+  testing.expectEqual(true, !document.all);
+  testing.expectEqual(false, !!document.all);
+  testing.expectEqual('[object HTMLScriptElement]', document.all(5).toString());
+  testing.expectEqual('[object HTMLDivElement]', document.all('content').toString());
+
+
+  testing.expectEqual(document, document.defaultView.document );
+  testing.expectEqual('loading', document.readyState);
+</script>
--- a/src/tests/html/element.html
+++ b/src/tests/html/element.html
@@ -0,0 +1,52 @@
+<script src="../testing.js"></script>
+<div id=content>a<strong>b</strong>cc</div>
+<script id=inner>
+  const content = $('#content');
+  testing.expectEqual('a<strong>b</strong>cc', content.innerHTML);
+  testing.expectEqual('abcc', content.innerText);
+  content. innerText = 'foo';
+
+  testing.expectEqual('foo', content.innerHTML);
+  testing.expectEqual('foo', content.innerText);
+</script>
+
+<script id=addEventListene>
+  let click_count = 0;
+  content.addEventListener('click', function() { click_count++ });
+  content.click()
+  testing.expectEqual(1, click_count);
+</script>
+
+<script id=style>
+  let style = content.style;
+  style.cssText = 'color: red; font-size: 12px; margin: 5px !important';
+  testing.expectEqual(3, style.length);
+  style.setProperty('background-color', 'blue')
+  testing.expectEqual('blue', style.getPropertyValue('background-color'));
+  testing.expectEqual(4, style.length);
+</script>
+
+<script id=a>
+  let a = document.createElement('a');
+  testing.expectEqual('', a.href);
+  testing.expectEqual('', a.host);
+  a.href = 'about';
+  testing.expectEqual('http://localhost:9582/src/tests/html/about', a.href);
+</script>
+
+<script id=focus>
+  // detached node cannot be focused
+  const focused = document.activeElement;
+  document.createElement('a').focus();
+  testing.expectEqual(focused, document.activeElement);
+</script>
+
+<script id=link>
+  let l2 = document.createElement('link');
+  testing.expectEqual('', l2.href);
+  l2.href = 'https://lightpanda.io/opensource-browser/15';
+  testing.expectEqual('https://lightpanda.io/opensource-browser/15', l2.href);
+
+  l2.href = '/over/9000';
+  testing.expectEqual('http://localhost:9582/over/9000', l2.href);
+</script>
--- a/src/tests/html/error_event.html
+++ b/src/tests/html/error_event.html
@@ -22,8 +22,3 @@
  testing.expectEqual(8999, e2.colno);
  testing.expectEqual('under 9000!', e2.error);
 </script>
-
-<script id=ErrorEvent>
-  let e3 = new ErrorEvent('err3')
-  e3.addEventListener('change', () => {});
-</script>
--- a/src/tests/html/history.html
+++ b/src/tests/html/history.html
@@ -0,0 +1,23 @@
+<script src="../testing.js"></script>
+
+<script id=history>
+  testing.expectEqual('auto', history.scrollRestoration);
+
+  history.scrollRestoration = 'manual';
+  history.scrollRestoration = 'foo';
+  testing.expectEqual('manual', history.scrollRestoration);
+
+  history.scrollRestoration = 'auto';
+  testing.expectEqual('auto', history.scrollRestoration);
+
+  testing.expectEqual(null, history.state)
+
+  history.pushState({}, null, '');
+  history.replaceState({}, null, '');
+
+  testing.expectEqual(undefined, history.go());
+  testing.expectEqual(undefined, history.go(1));
+  testing.expectEqual(undefined, history.go(-1));
+  testing.expectEqual(undefined, history.forward());
+  testing.expectEqual(undefined, history.back());
+</script>
--- a/src/tests/html/image.html
+++ b/src/tests/html/image.html
@@ -0,0 +1,31 @@
+<script src="../testing.js"></script>
+
+<script id=image>
+  img = new Image();
+  testing.expectEqual(0, img.width);
+  testing.expectEqual(0, img.height);
+
+  img = new Image(4);
+  testing.expectEqual(4, img.width);
+  testing.expectEqual(0, img.height);
+
+  img = new Image(5, 6);
+  testing.expectEqual(5, img.width);
+  testing.expectEqual(6, img.height);
+
+  let fruit = new Image
+  testing.expectEqual(0, fruit.width);
+  fruit.width = 5;
+  testing.expectEqual(5, fruit.width);
+  fruit.width = '15';
+  testing.expectEqual(15, fruit.width);
+  fruit.width = 'apple';
+  testing.expectEqual(0, fruit.width);
+
+  let lyric = new Image
+  testing.expectEqual('', lyric.src);
+  lyric.src = 'okay';
+  testing.expectEqual('okay', lyric.src);
+  lyric.src = 15;
+  testing.expectEqual('15', lyric.src);
+</script>
--- a/src/tests/html/input.html
+++ b/src/tests/html/input.html
@@ -0,0 +1,110 @@
+<script src="../testing.js"></script>
+
+<form action="test.php" target="_blank" id=form>
+  <p>
+    <label>First name: <input type="text" name="first-name" id=input /></label>
+  </p>
+</form>
+
+<script id=input_properties>
+  let input = document.createElement('input');
+
+  testing.expectEqual(null, input.form);
+  input.form = 'foo';
+  testing.expectEqual(null, input.form);
+
+  testing.expectEqual('', input.name);
+  input.name = 'leto';
+  testing.expectEqual('leto', input.name);
+
+  testing.expectEqual('', input.accept);
+  input.accept = 'anything';
+  testing.expectEqual('anything', input.accept);
+
+  testing.expectEqual('', input.alt);
+  input.alt = 'x1';
+  testing.expectEqual('x1', input.alt);
+
+  testing.expectEqual(false, input.disabled);
+  input.disabled = true;
+  testing.expectEqual(true, input.disabled);
+  input.disabled = false;
+  testing.expectEqual(false, input.disabled);
+
+  testing.expectEqual(false, input.readOnly);
+  input.readOnly = true;
+  testing.expectEqual(true, input.readOnly);
+  input.readOnly = false;
+  testing.expectEqual(false, input.readOnly);
+
+  testing.expectEqual(-1, input.maxLength);
+  input.maxLength = 5;
+  testing.expectEqual(5, input.maxLength);
+  input.maxLength = 'banana';
+  testing.expectEqual(0, input.maxLength);
+  testing.expectError('Error: NegativeValueNotAllowed', () => { input.maxLength = -45;});
+
+  testing.expectEqual(20, input.size);
+  input.size = 5;
+  testing.expectEqual(5, input.size);
+  input.size = -449;
+  testing.expectEqual(20, input.size);
+  testing.expectError('Error: ZeroNotAllowed', () => { input.size = 0; });
+
+  testing.expectEqual('', input.src);
+  input.src = 'foo'
+  testing.expectEqual('http://localhost:9582/src/tests/html/foo', input.src);
+  input.src = '-3'
+  testing.expectEqual('http://localhost:9582/src/tests/html/-3', input.src);
+  input.src = ''
+  testing.expectEqual('http://localhost:9582/src/tests/html/input.html', input.src);
+
+  testing.expectEqual('text', input.type);
+  input.type = 'checkbox';
+  testing.expectEqual('checkbox', input.type);
+  input.type = '5';
+  testing.expectEqual('text', input.type);
+</script>
+
+<script id=related>
+  let input_checked = document.createElement('input')
+  testing.expectEqual(false, input_checked.defaultChecked);
+  testing.expectEqual(false, input_checked.checked);
+
+  input_checked.defaultChecked = true;
+  testing.expectEqual(true, input_checked.defaultChecked);
+  testing.expectEqual(true, input_checked.checked);
+
+  input_checked.checked = false;
+  testing.expectEqual(true, input_checked.defaultChecked);
+  testing.expectEqual(false, input_checked.checked);
+
+  input_checked.defaultChecked = true;
+  testing.expectEqual(false, input_checked.checked);
+</script>
+
+<script id=defaultValue>
+  testing.expectEqual('', input.defaultValue);
+  testing.expectEqual('', input.value);
+
+  input.defaultValue = 3.1;
+  testing.expectEqual('3.1', input.defaultValue);
+  testing.expectEqual('3.1', input.value)
+
+  input.value = 'mango';
+  testing.expectEqual('3.1', input.defaultValue);
+  testing.expectEqual('mango', input.value);
+
+  input.defaultValue = true;
+  testing.expectEqual('mango', input.value);
+</script>
+
+<script id=form>
+  const form = $('#form');
+  input = $('#input');
+  testing.expectEqual(form, input.form);
+
+  // invalid
+  input.form = 'foo';
+  testing.expectEqual(form, input.form);
+</script>
--- a/src/tests/html/link.html
+++ b/src/tests/html/link.html
@@ -0,0 +1,59 @@
+<script src="../testing.js"></script>
+<a id=link href=foo>OK</a>
+
+<script id=link>
+  let link = $('#link');
+  testing.expectEqual('', link.target);
+  link.target = '_blank';
+  testing.expectEqual('_blank', link.target);
+  link.target = '';
+
+  testing.expectEqual('foo', link.href);
+  link.href = 'https://lightpanda.io/';
+  testing.expectEqual('https://lightpanda.io/', link.href);
+
+  testing.expectEqual('https://lightpanda.io', link.origin);
+
+  link.host = 'lightpanda.io:443';
+  testing.expectEqual('lightpanda.io:443', link.host);
+  testing.expectEqual('443', link.port);
+  testing.expectEqual('lightpanda.io', link.hostname);
+
+  link.host = 'lightpanda.io';
+  testing.expectEqual('lightpanda.io', link.host);
+  testing.expectEqual('', link.port);
+  testing.expectEqual('lightpanda.io', link.hostname);
+
+  testing.expectEqual('lightpanda.io', link.host);
+  testing.expectEqual('lightpanda.io', link.hostname);
+  link.hostname = 'foo.bar';
+  testing.expectEqual('https://foo.bar/', link.href);
+
+  testing.expectEqual('', link.search);
+  link.search = 'q=bar';
+  testing.expectEqual('?q=bar', link.search);
+  testing.expectEqual('https://foo.bar/?q=bar', link.href);
+
+  testing.expectEqual('', link.hash);
+  link.hash = 'frag';
+  testing.expectEqual('#frag', link.hash);
+  testing.expectEqual('https://foo.bar/?q=bar#frag', link.href);
+
+  testing.expectEqual('', link.port);
+  link.port = '443';
+  testing.expectEqual('foo.bar:443', link.host);
+  testing.expectEqual('foo.bar', link.hostname);
+  testing.expectEqual('https://foo.bar:443/?q=bar#frag', link.href);
+  link.port = null;
+  testing.expectEqual('https://foo.bar/?q=bar#frag', link.href);
+
+  testing.expectEqual('foo', link.href = 'foo');
+
+  testing.expectEqual('', link.type);
+  link.type = 'text/html';
+  testing.expectEqual('text/html', link.type);
+
+  testing.expectEqual('OK', link.text);
+  link.text = 'foo';
+  testing.expectEqual('foo', link.text);
+</script>
--- a/src/tests/html/location.html
+++ b/src/tests/html/location.html
@@ -0,0 +1,14 @@
+<script src="../testing.js"></script>
+
+<script id=location>
+  testing.expectEqual('http://localhost:9582/src/tests/html/location.html', location.href);
+  testing.expectEqual('http://localhost:9582/src/tests/html/location.html', document.location.href);
+
+  testing.expectEqual("localhost:9582", location.host);
+  testing.expectEqual("localhost", location.hostname);
+  testing.expectEqual("http://localhost:9582", location.origin);
+  testing.expectEqual("/src/tests/html/location.html", location.pathname);
+  testing.expectEqual("", location.hash);
+  testing.expectEqual("9582", location.port);
+  testing.expectEqual("", location.search);
+</script>
--- a/src/tests/html/navigator.html
+++ b/src/tests/html/navigator.html
@@ -0,0 +1,7 @@
+<script src="../testing.js"></script>
+
+<script id=navigator>
+  testing.expectEqual('Lightpanda/1.0',  navigator.userAgent);
+  testing.expectEqual('1.0',  navigator.appVersion);
+  testing.expectEqual('en-US',  navigator.language);
+</script>
--- a/src/tests/html/script/script.html
+++ b/src/tests/html/script/script.html
@@ -0,0 +1,14 @@
+<script src="../../testing.js"></script>
+
+<script id=script>
+  let script = document.createElement('script')
+  script.src = 'foo.bar';
+
+  script.async = true;
+  testing.expectEqual(true, script.async);
+  script.async = false;
+  testing.expectEqual(false, script.async);
+
+  script.defer = true;
+  testing.expectEqual(true, script.defer);
+</script>
--- a/src/tests/html/select.html
+++ b/src/tests/html/select.html
@@ -0,0 +1,74 @@
+<script src="../testing.js"></script>
+
+<form id=f1>
+ <select id=s1 name=s1><option>o1<option>o2</select>
+</form>
+<select id=s2></select>
+
+<script id=select>
+  const s = document.getElementById('s1');
+  testing.expectEqual('[object HTMLFormElement]', s.form.toString());
+  testing.expectEqual(null, document.getElementById('s2').form);
+
+  testing.expectEqual(false, s.disabled);
+  s.disabled = true;
+  testing.expectEqual(true, s.disabled);
+
+  s.disabled = false;
+  testing.expectEqual(false, s.disabled);
+
+  testing.expectEqual(false, s.multiple);
+  s.multiple = true;
+  testing.expectEqual(true, s.multiple);
+  s.multiple = false;
+  testing.expectEqual(false, s.multiple);
+
+  testing.expectEqual('s1', s.name);
+  s.name = 'sel1';
+  testing.expectEqual('sel1', s.name);
+
+  testing.expectEqual(2, s.length);
+
+  testing.expectEqual(0, s.selectedIndex);
+  s.selectedIndex = 2; // out of range
+  testing.expectEqual(-1, s.selectedIndex);
+
+  s.selectedIndex = -1;
+  testing.expectEqual(-1, s.selectedIndex);
+
+  s.selectedIndex = 0;
+  testing.expectEqual(0, s.selectedIndex);
+
+  s.selectedIndex = 1;
+  testing.expectEqual(1, s.selectedIndex);
+
+  s.selectedIndex = -323;
+  testing.expectEqual(-1, s.selectedIndex);
+
+  let options = s.options;
+  testing.expectEqual(2, options.length);
+  testing.expectEqual('o2', options.item(1).value);
+  testing.expectEqual(-1, options.selectedIndex);
+
+  let o3 = document.createElement('option');
+  o3.value = 'o3';
+  options.add(o3)
+  testing.expectEqual(3, options.length);
+  testing.expectEqual('o3', options.item(2).value);
+
+  let o4 = document.createElement('option');
+  o4.value = 'o4';
+  options.add(o4, 1);
+  testing.expectEqual(4, options.length);
+  testing.expectEqual('o4', options.item(1).value);
+
+  let o5 = document.createElement('option');
+  o5.value = 'o5';
+  options.add(o5, o3)
+  testing.expectEqual(5, options.length);
+  testing.expectEqual('o5', options.item(3).value);
+
+  options.remove(3)
+  testing.expectEqual(4, options.length);
+  testing.expectEqual('o3', options.item(3).value);
+</script>
--- a/src/tests/html/html_slot_element.html
+++ b/src/tests/html/html_slot_element.html
--- a/src/tests/html/style.html
+++ b/src/tests/html/style.html
@@ -0,0 +1,7 @@
+<script src="../testing.js"></script>
+
+<script id=style>
+  let s = document.createElement('style');
+  testing.expectEqual('text/css', s.sheet.type);
+  testing.expectEqual(false, document.createElement('style').sheet == s.sheet);
+</script>
--- a/src/tests/html/svg.html
+++ b/src/tests/html/svg.html
@@ -0,0 +1,5 @@
+<script src="../testing.js"></script>
+
+<script id=svg>
+  testing.expectEqual(false, 'AString' instanceof SVGElement);
+</script>
--- a/src/tests/html/template.html
+++ b/src/tests/html/template.html
@@ -0,0 +1,21 @@
+<script src="../testing.js"></script>
+
+<div id=c></div>
+
+<script id=template>
+  let t = document.createElement('template');
+  let d = document.createElement('div');
+  d.id = 'abc';
+  t.content.append(d);
+
+  testing.expectEqual(null, document.getElementById('abc'));
+  document.getElementById('c').appendChild(t.content.cloneNode(true));
+  testing.expectEqual('abc', document.getElementById('abc').id);
+
+  t.innerHTML = '<span>over</span><p>9000!</p>';
+  testing.expectEqual(2, t.content.childNodes.length);
+  testing.expectEqual('SPAN', t.content.childNodes[0].tagName);
+  testing.expectEqual('over', t.content.childNodes[0].innerHTML);
+  testing.expectEqual('P', t.content.childNodes[1].tagName);
+  testing.expectEqual('9000!', t.content.childNodes[1].innerHTML);
+</script>