mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-17 07:50:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Update button/input activation behaviour to match spec

Browse source
This commit is contained in:
Gingeh 2025-02-27 10:53:48 +11:00 • committed by Tim Ledbetter
commit 591c6b0f68
Notes: github-actions[bot] 2025-02-27 12:43:59 +00:00
6 changed files with 436 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

215
Tests/LibWeb/Text/input/wpt-import/html/semantics/popovers/button-type-popovertarget.html Normal file
View file

@ -0,0 +1,215 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=author href="mailto:lwarlow@igalia.com">
<link rel=help href="https://issues.chromium.org/issues/329118508">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id=mypopover popover=auto>popover</div>
<iframe name=foo></iframe>
<form id="form" target=foo action="about:blank">
<button id=reset-in-form type=reset popovertarget=mypopover>reset</button>
<button id=submit-in-form type=submit popovertarget=mypopover>submit</button>
<button id=button-in-form type=button popovertarget=mypopover>type=button</button>
<button id=invalid-in-form type=invalid popovertarget=mypopover>invalid</button>
<button id=missing-in-form popovertarget=mypopover>missing</button>
</form>
<button id=reset-attr-form type=reset popovertarget=mypopover form=form>reset</button>
<button id=submit-attr-form type=submit popovertarget=mypopover form=form>submit</button>
<button id=button-attr-form type=button popovertarget=mypopover form=form>type=button</button>
<button id=invalid-attr-form type=invalid popovertarget=mypopover form=form>invalid</button>
<button id=missing-attr-form popovertarget=mypopover form=form>missing</button>
<button id=reset-outside-form type=reset popovertarget=mypopover>reset</button>
<button id=submit-outside-form type=submit popovertarget=mypopover>submit</button>
<button id=button-outside-form type=button popovertarget=mypopover>type=button</button>
<button id=invalid-outside-form type=invalid popovertarget=mypopover>invalid</button>
<button id=missing-outside-form popovertarget=mypopover>missing</button>
<script>
test((t) => {
let formReset = false;
function onReset(e) {
e.preventDefault();
formReset = true;
}
form.addEventListener('reset', onReset);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('reset', onReset);
});
document.getElementById('reset-in-form').click();
assert_true(formReset, 'type=reset should trigger form reset event');
assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
}, 'Button type=reset in form should trigger form reset and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('submit-in-form').click();
assert_true(formSubmit, 'type=submit should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
}, 'Button type=submit in form should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-in-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'Button type=button in form should toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('invalid-in-form').click();
assert_true(formSubmit, 'type=invalid should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
}, 'Button type=invalid in form should trigger form submit and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('missing-in-form').click();
assert_true(formSubmit, 'missing type should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
}, 'Button missing type in form should trigger form submit and not toggle popover');
test((t) => {
let formReset = false;
function onReset(e) {
e.preventDefault();
formReset = true;
}
form.addEventListener('reset', onReset);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('reset', onReset);
});
document.getElementById('reset-attr-form').click();
assert_true(formReset, 'type=reset should trigger form reset event');
assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
}, 'Button type=reset with form attr should trigger form reset and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('submit-attr-form').click();
assert_true(formSubmit, 'type=submit should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
}, 'Button type=submit with form attr should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-attr-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'Button type=button with form attr should toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('invalid-attr-form').click();
assert_true(formSubmit, 'type=invalid should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
}, 'Button type=invalid with form attr should trigger form submit and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('missing-attr-form').click();
assert_true(formSubmit, 'missing type should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
}, 'Button missing type with form attr should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('reset-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
}, 'Button type=reset outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('submit-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
}, 'Button type=submit outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'Button type=button outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('invalid-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=invalid should toggle the popover');
}, 'Button type=invalid outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('missing-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'missing type should toggle the popover');
}, 'Button missing type outside form should toggle popover');
</script>

172
Tests/LibWeb/Text/input/wpt-import/html/semantics/popovers/input-type-popovertarget.html Normal file
View file

@ -0,0 +1,172 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=author href="mailto:lwarlow@igalia.com">
<link rel=help href="https://issues.chromium.org/issues/329118508">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id=mypopover popover=auto>popover</div>
<iframe name=foo></iframe>
<form id="form" target=foo action="about:blank">
<input id=reset-in-form type=reset popovertarget=mypopover value="reset">
<input id=submit-in-form type=submit popovertarget=mypopover value="submit">
<input id=button-in-form type=button popovertarget=mypopover value="type=button">
<input id=image-in-form type=image popovertarget=mypopover value="type=image">
</form>
<input id=reset-attr-form type=reset popovertarget=mypopover value="reset" form=form>
<input id=submit-attr-form type=submit popovertarget=mypopover value="submit" form=form>
<input id=button-attr-form type=button popovertarget=mypopover value="type=button" form=form>
<input id=image-attr-form type=image popovertarget=mypopover value="type=image" form=form>
<input id=reset-outside-form type=reset popovertarget=mypopover value="reset">
<input id=submit-outside-form type=submit popovertarget=mypopover value="submit">
<input id=button-outside-form type=button popovertarget=mypopover value="type=button">
<input id=image-outside-form type=image popovertarget=mypopover value="type=image">
<script>
test((t) => {
let formReset = false;
function onReset(e) {
e.preventDefault();
formReset = true;
}
form.addEventListener('reset', onReset);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('reset', onReset);
});
document.getElementById('reset-in-form').click();
assert_true(formReset, 'type=reset should trigger form reset event');
assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
}, 'input type=reset in form should trigger form reset and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('submit-in-form').click();
assert_true(formSubmit, 'type=submit should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
}, 'input type=submit in form should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-in-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'input type=button in form should toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('image-in-form').click();
assert_true(formSubmit, 'type=image should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
}, 'input type=image in form should trigger form submit and not toggle popover');
test((t) => {
let formReset = false;
function onReset(e) {
e.preventDefault();
formReset = true;
}
form.addEventListener('reset', onReset);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('reset', onReset);
});
document.getElementById('reset-attr-form').click();
assert_true(formReset, 'type=reset should trigger form reset event');
assert_false(mypopover.matches(':popover-open'), 'type=reset should not toggle the popover');
}, 'input type=reset with form attr should trigger form reset and not toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('submit-attr-form').click();
assert_true(formSubmit, 'type=submit should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
}, 'input type=submit with form attr should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-attr-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'input type=button with form attr should toggle popover');
test((t) => {
let formSubmit = false;
function onSubmit(e) {
e.preventDefault();
formSubmit = true;
}
form.addEventListener('submit', onSubmit);
t.add_cleanup(() => {
mypopover.hidePopover();
form.removeEventListener('submit', onSubmit);
});
document.getElementById('image-attr-form').click();
assert_true(formSubmit, 'type=image should trigger form submit event');
assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
}, 'input type=image with form attr should trigger form submit and not toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('reset-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
}, 'input type=reset outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('submit-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
}, 'input type=submit outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('button-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
}, 'input type=button outside form should toggle popover');
test((t) => {
t.add_cleanup(() => {
mypopover.hidePopover();
});
document.getElementById('image-outside-form').click();
assert_true(mypopover.matches(':popover-open'), 'type=image should toggle the popover');
}, 'input type=image outside form should toggle popover');
</script>