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
LadybirdBrowser · Jul 11, 2024 · 191531b · 191531b
1 parent 907dc84
commit 191531b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/Tests/LibWeb/Layout/expected/input-range.txt b/Tests/LibWeb/Layout/expected/input-range.txt
@@ -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]
diff --git a/Tests/LibWeb/Layout/input/input-range.html b/Tests/LibWeb/Layout/input/input-range.html
@@ -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"/>
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
@@ -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);
         }