RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 13:07:46 +00:00
Code Issues Activity Actions

LibWeb: Implement named and indexed property access for HTMLFormElement

Browse source
This commit is contained in:
Andrew Kaster 2024-01-10 10:45:28 -07:00 • committed by Andreas Kling
parent 521ed0e911
commit b5ec520f84
7 changed files with 446 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Text/expected/HTML/Form-indexed-property-access.txt Normal file
View file

@ -0,0 +1,14 @@
form.length: 12
elements.length: 12
form[0].name: foo
form[1].name: bar
form[2].name: baz
form[3].name: qux
form[4].name: quux
form[5].name: corge
form[6].name: foo2
form[7].name: bar2
form[8].name: baz2
form[9].name: qux2
form[10].name: quux2
form[11].name: corge2

34
Tests/LibWeb/Text/expected/HTML/Form-named-property-access.txt Normal file
View file

@ -0,0 +1,34 @@
== Elements and Names ==
formy.length: 12
elements.length: 12
elements[0] === form.foo
elements[1] === form.bar
elements[2] === form.baz
elements[3] === form.qux
elements[4] === form.quux
elements[5] === form.corge
elements[6] === form.foo2
elements[7] === form.bar2
elements[8] === form.baz2
elements[9] === form.qux2
elements[10] === form.quux2
elements[11] === form.corge2
== If no listed elements, picks img ==
form.inside == image: true
== Form association ==
elements in form2: 2
elements in form3: 2
== Same name and id for many elements ==
elements in samename: 6
samename.a.length: 6
typeof samename.a: object
elements in sameid: 6
sameid.a.length: 6
typeof sameid.a: object
== Changing name/id ==
elements in changy: 1
hello is goodbye? true
Can we still use the same name?: true
new hello is goodbye? false
new hello is old hello? false
new hello is newInput? true

44
Tests/LibWeb/Text/input/HTML/Form-indexed-property-access.html Normal file
View file

@ -0,0 +1,44 @@
<form id="formy">
<input type="text" name="foo">
<button type="button" name="bar"></button>
<object name="baz"></object>
<select name="qux"></select>
<textarea name="quux"></textarea>
<fieldset name="corge">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" name="grault">
</fieldset>
<img id="inside" src="" alt="">
</form>
<input type="text" name="foo2" form="formy">
<button type="button" name="bar2" form="formy"></button>
<object name="baz2" form="formy"></object>
<select name="qux2" form="formy"></select>
<textarea name="quux2" form="formy"></textarea>
<fieldset name="corge2" form="formy">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" name="grault2" form="formy">
</fieldset>
<img id="outside" src="" alt="">
<script src="../include.js"></script>
<script>
test(() => {
let form = document.getElementById("formy");
let elements = form.elements;
for (let i = 0; i < elements.length; i++) {
if (elements[i] !== form[i]) {
println(`FAIL: elements[${i}] !== form[${i}]`);
}
}
println(`form.length: ${form.length}`);
println(`elements.length: ${elements.length}`);
for (let i = 0; i < form.length; i++) {
println(`form[${i}].name: ${form[i].name}`);
}
});
</script>

121
Tests/LibWeb/Text/input/HTML/Form-named-property-access.html Normal file
View file

@ -0,0 +1,121 @@
<form id="formy">
<input type="text" name="foo">
<button type="button" name="bar"></button>
<object name="baz"></object>
<select name="qux"></select>
<textarea name="quux"></textarea>
<fieldset name="corge">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" name="grault">
</fieldset>
<img id="inside" src="" alt="">
</form>
<input type="text" name="foo2" form="formy">
<button type="button" name="bar2" form="formy"></button>
<object name="baz2" form="formy"></object>
<select name="qux2" form="formy"></select>
<textarea name="quux2" form="formy"></textarea>
<fieldset name="corge2" form="formy">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" name="grault2" form="formy">
</fieldset>
<form id="form2"></form>
<form id="form3">
<fieldset form="form2" id="formset">
<input type="button" id="button1" form="form2">
<input type="button" id="button2" form="form3">
<input type="button" id="button3"><!-- implicitly form3 -->
</fieldset>
</form>
<form id="samename">
<input type="text" name="a">
<button type="button" name="a"></button>
<object name="a"></object>
<select name="a"></select>
<textarea name="a"></textarea>
<fieldset name="a">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" name="a">
</fieldset>
<img id="a" src="" alt="">
</form>
<form id="sameid">
<input type="text" id="a">
<button type="button" id="a"></button>
<object id="a"></object>
<select id="a"></select>
<textarea id="a"></textarea>
<fieldset id="a">
<!-- input elements in the ImageData type state are excluded -->
<input type="image" id="a">
</fieldset>
<img id="a" src="" alt="">
</form>
<form id="changy">
<input type="text" name="hello">
</form>
<script src="../include.js"></script>
<script>
test(() => {
println("== Elements and Names ==");
let formy = document.forms.formy;
let elements = formy.elements;
println(`formy.length: ${formy.length}`);
println(`elements.length: ${elements.length}`);
for (let i = 0; i < elements.length; i++) {
if (elements[i] !== eval(`formy.${elements[i].name}`)) {
println(`FAIL: elements[${i}] !== form.${elements[i].name}`);
}
else {
println(`elements[${i}] === form.${elements[i].name}`);
}
}
println("== If no listed elements, picks img ==");
let image = document.getElementById("inside");
println("form.inside == image: " + (formy.inside === image));
println("== Form association ==");
let form2 = document.getElementById("form2");
let form3 = document.getElementById("form3");
println(`elements in form2: ${form2.elements.length}`);
println(`elements in form3: ${form3.elements.length}`);
println("== Same name and id for many elements ==");
let samename = document.getElementById("samename");
println(`elements in samename: ${samename.elements.length}`);
let samenameElements = samename.a;
println(`samename.a.length: ${samenameElements.length}`);
println(`typeof samename.a: ${typeof samenameElements}`);
let sameid = document.getElementById("sameid");
println(`elements in sameid: ${sameid.elements.length}`);
let sameidElements = sameid.a;
println(`sameid.a.length: ${sameidElements.length}`);
println(`typeof sameid.a: ${typeof sameidElements}`);
println("== Changing name/id ==");
let changy = document.getElementById("changy");
println(`elements in changy: ${changy.elements.length}`);
let hello = changy.hello;
changy.elements[0].name = "goodbye";
let goodbye = changy.goodbye;
println(`hello is goodbye? ${hello === goodbye}`);
println(`Can we still use the same name?: ${changy.hello === changy.goodbye}`);
let newInput = document.createElement("input");
newInput.type = "text";
newInput.id = "hello";
changy.appendChild(newInput);
println(`new hello is goodbye? ${changy.hello === goodbye}`);
println(`new hello is old hello? ${changy.hello === hello}`);
println(`new hello is newInput? ${changy.hello === newInput}`);
});
</script>