nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/fast/css/pseudo-in-range-basics.html

130 lines
5.1 KiB
HTML
Raw Permalink Normal View History

:in-range & :out-of-range CSS pseudo-classes shouldn't match inputs without range limitations https://bugs.webkit.org/show_bug.cgi?id=156558 Patch by Benjamin Poulain <bpoulain@apple.com> on 2016-06-16 Reviewed by Simon Fraser. LayoutTests/imported/w3c: * web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt: One of the previous match was erroneous. Our results are still very far from being correct. There are several bugs affecting our range validation. Source/WebCore: The pseudo selectors :in-range and :out-of-range should only apply if: -minimum/maximum are defined for the input type -the input value is/is-not suffering from underflow/overflow. Only certain types have a valid minimum and maximum: -number -range -date -month -week -time -datetime-local Of those, only one has a default minimum and maximum: range. For all the others, the minimum or maximum is only defined if the min/max attribute is defined and valid. This patch addresses these constraints for number and range. The date types range validation is severely broken and is left untouched. It really needs a clean rewrite. Tests: fast/css/pseudo-in-range-basics.html fast/css/pseudo-in-range-out-of-range-trivial.html fast/css/pseudo-out-of-range-basics.html * html/DateInputType.cpp: (WebCore::DateInputType::createStepRange): * html/DateTimeInputType.cpp: (WebCore::DateTimeInputType::createStepRange): * html/DateTimeLocalInputType.cpp: (WebCore::DateTimeLocalInputType::createStepRange): * html/InputType.cpp: (WebCore::InputType::isInRange): (WebCore::InputType::isOutOfRange): Notice the isEmpty() shortcut. A value can only overflow/underflow if it is not empty. * html/MonthInputType.cpp: (WebCore::MonthInputType::createStepRange): * html/NumberInputType.cpp: (WebCore::NumberInputType::createStepRange): * html/RangeInputType.cpp: (WebCore::RangeInputType::createStepRange): * html/StepRange.cpp: (WebCore::StepRange::StepRange): * html/StepRange.h: (WebCore::StepRange::hasRangeLimitations): * html/WeekInputType.cpp: (WebCore::WeekInputType::createStepRange): LayoutTests: * fast/css/pseudo-in-range-basics-expected.html: Added. * fast/css/pseudo-in-range-basics.html: Added. * fast/css/pseudo-in-range-out-of-range-trivial-expected.html: Added. * fast/css/pseudo-in-range-out-of-range-trivial.html: Added. * fast/css/pseudo-out-of-range-basics-expected.html: Added. * fast/css/pseudo-out-of-range-basics.html: Added. Canonical link: https://commits.webkit.org/176921@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@202143 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2016-06-16 22:47:02 +00:00
<!DOCTYPE html>
<html>
<head>
<style>
:in-range {
background-color: red;
color: green;
border: 2px solid blue;
-webkit-appearance: none;
}
#testcase * {
margin: 0;
padding: 0;
}
#testcase input {
width: 50px;
}
</style>
</head>
<body>
<p>Check styling of elements with the :in-range pseudo selector</p>
<div id=testcase>
<div>
<input type="text">
<input type="text" min=1>
<input type="text" min=1 value=0>
<input type="text" min=1 value=1>
<input type="text" max=42>
<input type="text" max=42 value=42>
<input type="text" max=42 value=43>
<input type="text" min=1 max=42>
<input type="text" min=1 max=42 value=0>
<input type="text" min=1 max=42 value=1>
<input type="text" min=1 max=42 value=2>
<input type="text" min=1 max=42 value=41>
<input type="text" min=1 max=42 value=42>
<input type="text" min=1 max=42 value=43>
</div>
<div>
<input type="number">
<input type="number" min=1>
<input type="number" min=1 value=0>
<input type="number" min=1 value=1>
<input type="number" max=42>
<input type="number" max=42 value=42>
<input type="number" max=42 value=43>
<input type="number" min=1 max=42>
<input type="number" min=1 max=42 value=0>
<input type="number" min=1 max=42 value=1>
<input type="number" min=1 max=42 value=2>
<input type="number" min=1 max=42 value=41>
<input type="number" min=1 max=42 value=42>
<input type="number" min=1 max=42 value=43>
</div>
<div>
<input type="number" min>
<input type="number" min value=0>
<input type="number" max>
<input type="number" max value=42>
<input type="number" min max>
<input type="number" min max=42>
<input type="number" min=1 max>
<input type="number" min max value=0>
<input type="number" min=1 max value=0>
<input type="number" min=1 max value=1>
<input type="number" min max=42 value=42>
<input type="number" min max=42 value=43>
</div>
<div>
<input type="number" min="webkit">
<input type="number" min="webkit" value=0>
<input type="number" max="webkit">
<input type="number" max="webkit" value=42>
<input type="number" min="webkit" max="webkit">
<input type="number" min="webkit" max=42>
<input type="number" min=1 max="webkit">
<input type="number" min="webkit" max="webkit" value=0>
<input type="number" min=1 max="webkit" value=0>
<input type="number" min=1 max="webkit" value=1>
<input type="number" min="webkit" max=42 value=42>
<input type="number" min="webkit" max=42 value=43>
</div>
<div>
<input type="range">
<input type="range" min=1>
<input type="range" min=1 value=0>
<input type="range" min=1 value=1>
<input type="range" max=42>
<input type="range" max=42 value=42>
<input type="range" max=42 value=43>
<input type="range" min=1 max=42>
<input type="range" min=1 max=42 value=0>
<input type="range" min=1 max=42 value=1>
<input type="range" min=1 max=42 value=2>
<input type="range" min=1 max=42 value=41>
<input type="range" min=1 max=42 value=42>
<input type="range" min=1 max=42 value=43>
</div>
<div>
<input type="range" min>
<input type="range" min value=0>
<input type="range" max>
<input type="range" max value=42>
<input type="range" min max>
<input type="range" min max=42>
<input type="range" min=1 max>
<input type="range" min max value=0>
<input type="range" min=1 max value=0>
<input type="range" min=1 max value=1>
<input type="range" min max=42 value=42>
<input type="range" min max=42 value=43>
</div>
<div>
<input type="range" min="webkit">
<input type="range" min="webkit" value=0>
<input type="range" max="webkit">
<input type="range" max="webkit" value=42>
<input type="range" min="webkit" max="webkit">
<input type="range" min="webkit" max=42>
<input type="range" min=1 max="webkit">
<input type="range" min="webkit" max="webkit" value=0>
<input type="range" min=1 max="webkit" value=0>
<input type="range" min=1 max="webkit" value=1>
<input type="range" min="webkit" max=42 value=42>
<input type="range" min="webkit" max=42 value=43>
</div>
</div>
</body>
</html>