Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-12-08 06:09:58 +00:00
Code Issues Projects Releases Packages Wiki Activity

LibWeb: Implement :required/:optional pseudo-classes

Browse source
This commit is contained in:
Gingeh 2025-04-30 10:23:46 +10:00 • committed by Sam Atkins
parent fbd1f77161
commit 7acc0f4a42
Notes: github-actions[bot] 2025-05-24 09:32:37 +00:00
13 changed files with 300 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Text/expected/wpt-import/html/semantics/forms/the-select-element/select-required-attribute.tentative.txt
View file

@ -2,5 +2,5 @@ Harness status: OK
Found 1 tests
1 Fail
Fail Test required attribute
1 Pass
Pass Test required attribute

6
Tests/LibWeb/Text/expected/wpt-import/html/semantics/selectors/pseudo-classes/required-optional-hidden.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass Evaluation of :required and :optional changes for input type change.

11
Tests/LibWeb/Text/expected/wpt-import/html/semantics/selectors/pseudo-classes/required-optional.txt Normal file
View file

@ -0,0 +1,11 @@
Harness status: OK
Found 6 tests
6 Pass
Pass ':required' matches required <input>s, <select>s and <textarea>s
Pass ':optional' matches elements <input>s, <select>s and <textarea>s that are not required
Pass ':required' doesn't match elements whose required attribute has been removed
Pass ':optional' matches elements whose required attribute has been removed
Pass ':required' matches elements whose required attribute has been added
Pass ':optional' doesn't match elements whose required attribute has been added

36
Tests/LibWeb/Text/input/wpt-import/html/semantics/selectors/pseudo-classes/required-optional-hidden.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Selector: pseudo-classes (:required, :optional) for hidden input</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#pseudo-classes">
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<style>
span {
color: red;
background-color: pink;
}
:required + span {
color: green;
}
:not(:optional) + span {
background-color: lime;
}
</style>
<input id="hiddenInput" type="hidden" required>
<span id="sibling">This text should be green on lime background.</span>
<script>
test(() => {
assert_equals(getComputedStyle(sibling).color, "rgb(255, 0, 0)",
"Not matching :required for type=hidden");
assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(255, 192, 203)",
"Matching :optional for type=hidden");
hiddenInput.type = "text";
assert_equals(getComputedStyle(sibling).color, "rgb(0, 128, 0)",
"Matching :required for type=text");
assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(0, 255, 0)",
"Matching :not(:optional) for type=text");
}, "Evaluation of :required and :optional changes for input type change.");
</script>

35
Tests/LibWeb/Text/input/wpt-import/html/semantics/selectors/pseudo-classes/required-optional.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Selector: pseudo-classes (:required, :optional)</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1>
<link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="utils.js"></script>
<div id="log"></div>
<input type=text id=text1 value="foobar" required>
<input type=text id=text2 required>
<input type=text id=text3>
<select id=select1 required>
<optgroup label="options" id=optgroup1>
<option value="option1" id=option1>option1
</select>
<select id=select2>
<optgroup label="options" id=optgroup2>
<option value="option2" id=option2>option2
</select>
<textarea required id=textarea1>textarea1</textarea>
<textarea id=textarea2>textarea2</textarea>
<script>
testSelectorIdsMatch(":required", ["text1", "text2", "select1", "textarea1"], "':required' matches required <input>s, <select>s and <textarea>s");
testSelectorIdsMatch(":optional", ["text3", "select2", "textarea2"], "':optional' matches elements <input>s, <select>s and <textarea>s that are not required");
document.getElementById("text1").removeAttribute("required");
testSelectorIdsMatch(":required", ["text2", "select1", "textarea1"], "':required' doesn't match elements whose required attribute has been removed");
testSelectorIdsMatch(":optional", ["text1", "text3", "select2", "textarea2"], "':optional' matches elements whose required attribute has been removed");
document.getElementById("select2").setAttribute("required", "required");
testSelectorIdsMatch(":required", ["text2", "select1", "select2", "textarea1"], "':required' matches elements whose required attribute has been added");
testSelectorIdsMatch(":optional", ["text1", "text3", "textarea2"], "':optional' doesn't match elements whose required attribute has been added");
</script>