LibWeb: Use correct default value for <input type=range>

Previously the input element was displayed with value 0, when no value
was set in the HTML. Now it uses `value_sanitization_algorithm()`, which
will calculate the default value.
In `value_sanitization_algorithm()` there was a logical mistake/typo.
The comment from the spec says "unless the maximum is less than the
minimum".
The added layout test would fail without the code changes.
Fixes #520
This commit is contained in:
simonkrauter 2024-07-10 16:10:14 -03:00 committed by Andreas Kling
parent 907dc84c1e
commit 191531b7b1
Notes: sideshowbarker 2024-07-17 11:29:41 +09:00
3 changed files with 36 additions and 5 deletions

View file

@ -0,0 +1,26 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x38 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x22 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,9 200x16] baseline: 16
frag 1 from BlockContainer start: 0, length: 0, rect: [208,9 200x16] baseline: 16
BlockContainer <input> at (8,9) content-size 200x16 inline-block [BFC] children: not-inline
BlockContainer <div> at (9,16) content-size 200x4 positioned children: not-inline
BlockContainer <div> at (9,16) content-size 100x4 positioned [BFC] children: not-inline
BlockContainer <div> at (109,10) content-size 16x16 children: not-inline
BlockContainer <input> at (208,9) content-size 200x16 inline-block [BFC] children: not-inline
BlockContainer <div> at (209,16) content-size 200x4 positioned children: not-inline
BlockContainer <div> at (209,16) content-size 20x4 positioned [BFC] children: not-inline
BlockContainer <div> at (229,10) content-size 16x16 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x38]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x22]
PaintableWithLines (BlockContainer<INPUT>) [8,9 200x16] overflow: [8,9 202x17]
PaintableWithLines (BlockContainer<DIV>) [8,15 202x6] overflow: [9,10 200x16]
PaintableWithLines (BlockContainer<DIV>) [9,16 100x4]
PaintableWithLines (BlockContainer<DIV>) [109,10 16x16]
PaintableWithLines (BlockContainer<INPUT>) [208,9 200x16] overflow: [208,9 202x17]
PaintableWithLines (BlockContainer<DIV>) [208,15 202x6] overflow: [209,10 200x16]
PaintableWithLines (BlockContainer<DIV>) [209,16 20x4]
PaintableWithLines (BlockContainer<DIV>) [229,10 16x16]

View file

@ -0,0 +1,8 @@
<!DOCTYPE html><html><head><style>
* {
font: 20px 'SerenitySans';
}
input {
width: 200px;
}
</style></head><body><input type="range" min="0" max="100" /><input type="range" min="0" max="100" value="10"/>

View file

@ -1104,10 +1104,7 @@ void HTMLInputElement::user_interaction_did_change_input_value()
void HTMLInputElement::update_slider_thumb_element()
{
double value = value_as_number();
if (isnan(value))
value = 0;
double value = convert_string_to_number(value_sanitization_algorithm(m_value)).value_or(0);
double minimum = *min();
double maximum = *max();
double position = (value - minimum) / (maximum - minimum) * 100;
@ -1380,7 +1377,7 @@ String HTMLInputElement::value_sanitization_algorithm(String const& value) const
// The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
auto minimum = *min();
auto maximum = *max();
if (maximum > minimum)
if (maximum < minimum)
return JS::number_to_string(minimum);
return JS::number_to_string(minimum + (maximum - minimum) / 2);
}