mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-19 15:32:31 +00:00
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:
parent
907dc84c1e
commit
191531b7b1
Notes:
sideshowbarker
2024-07-17 11:29:41 +09:00
Author: https://github.com/simonkrauter
Commit: 191531b7b1
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/555
Issue: https://github.com/LadybirdBrowser/ladybird/issues/520
3 changed files with 36 additions and 5 deletions
26
Tests/LibWeb/Layout/expected/input-range.txt
Normal file
26
Tests/LibWeb/Layout/expected/input-range.txt
Normal 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]
|
8
Tests/LibWeb/Layout/input/input-range.html
Normal file
8
Tests/LibWeb/Layout/input/input-range.html
Normal 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"/>
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue