LibWeb: Return absolutized computed value for border width properties

Author: https://github.com/tcl3
Commit: 8738987e44
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4228
Reviewed-by: https://github.com/gmta ✅

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -944,6 +944,22 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
         // -> Any other property
         //    The resolved value is the computed value.
         //    NOTE: This is handled inside the `default` case.
+    case PropertyID::BorderBottomWidth: {
+        auto border_bottom_width = layout_node.computed_values().border_bottom();
+        return LengthStyleValue::create(Length::make_px(border_bottom_width.width));
+    }
+    case PropertyID::BorderLeftWidth: {
+        auto border_left_width = layout_node.computed_values().border_left();
+        return LengthStyleValue::create(Length::make_px(border_left_width.width));
+    }
+    case PropertyID::BorderRightWidth: {
+        auto border_right_width = layout_node.computed_values().border_right();
+        return LengthStyleValue::create(Length::make_px(border_right_width.width));
+    }
+    case PropertyID::BorderTopWidth: {
+        auto border_top_width = layout_node.computed_values().border_top();
+        return LengthStyleValue::create(Length::make_px(border_top_width.width));
+    }
     case PropertyID::WebkitTextFillColor:
         return CSSColorValue::create_from_color(layout_node.computed_values().webkit_text_fill_color(), ColorSyntax::Modern);
     case PropertyID::Invalid:

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -184,7 +184,7 @@ All supported properties and their default values exposed from CSSStylePropertie
 'background-size': 'auto auto'
 'blockSize': '0px'
 'block-size': '0px'
-'border': 'medium none rgb(0, 0, 0)'
+'border': '0px none rgb(0, 0, 0)'
 'borderBlockEnd': 'medium none rgb(0, 0, 0)'
 'border-block-end': 'medium none rgb(0, 0, 0)'
 'borderBlockEndColor': 'rgb(0, 0, 0)'
@@ -201,8 +201,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'border-block-start-style': 'none'
 'borderBlockStartWidth': 'medium'
 'border-block-start-width': 'medium'
-'borderBottom': 'medium none rgb(0, 0, 0)'
-'border-bottom': 'medium none rgb(0, 0, 0)'
+'borderBottom': '0px none rgb(0, 0, 0)'
+'border-bottom': '0px none rgb(0, 0, 0)'
 'borderBottomColor': 'rgb(0, 0, 0)'
 'border-bottom-color': 'rgb(0, 0, 0)'
 'borderBottomLeftRadius': '0px'
@@ -211,8 +211,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'border-bottom-right-radius': '0px'
 'borderBottomStyle': 'none'
 'border-bottom-style': 'none'
-'borderBottomWidth': 'medium'
-'border-bottom-width': 'medium'
+'borderBottomWidth': '0px'
+'border-bottom-width': '0px'
 'borderCollapse': 'separate'
 'border-collapse': 'separate'
 'borderColor': 'rgb(0, 0, 0)'
@@ -233,30 +233,30 @@ All supported properties and their default values exposed from CSSStylePropertie
 'border-inline-start-style': 'none'
 'borderInlineStartWidth': 'medium'
 'border-inline-start-width': 'medium'
-'borderLeft': 'medium none rgb(0, 0, 0)'
-'border-left': 'medium none rgb(0, 0, 0)'
+'borderLeft': '0px none rgb(0, 0, 0)'
+'border-left': '0px none rgb(0, 0, 0)'
 'borderLeftColor': 'rgb(0, 0, 0)'
 'border-left-color': 'rgb(0, 0, 0)'
 'borderLeftStyle': 'none'
 'border-left-style': 'none'
-'borderLeftWidth': 'medium'
-'border-left-width': 'medium'
+'borderLeftWidth': '0px'
+'border-left-width': '0px'
 'borderRadius': '0px'
 'border-radius': '0px'
-'borderRight': 'medium none rgb(0, 0, 0)'
-'border-right': 'medium none rgb(0, 0, 0)'
+'borderRight': '0px none rgb(0, 0, 0)'
+'border-right': '0px none rgb(0, 0, 0)'
 'borderRightColor': 'rgb(0, 0, 0)'
 'border-right-color': 'rgb(0, 0, 0)'
 'borderRightStyle': 'none'
 'border-right-style': 'none'
-'borderRightWidth': 'medium'
-'border-right-width': 'medium'
+'borderRightWidth': '0px'
+'border-right-width': '0px'
 'borderSpacing': '0px'
 'border-spacing': '0px'
 'borderStyle': 'none'
 'border-style': 'none'
-'borderTop': 'medium none rgb(0, 0, 0)'
-'border-top': 'medium none rgb(0, 0, 0)'
+'borderTop': '0px none rgb(0, 0, 0)'
+'border-top': '0px none rgb(0, 0, 0)'
 'borderTopColor': 'rgb(0, 0, 0)'
 'border-top-color': 'rgb(0, 0, 0)'
 'borderTopLeftRadius': '0px'
@@ -265,10 +265,10 @@ All supported properties and their default values exposed from CSSStylePropertie
 'border-top-right-radius': '0px'
 'borderTopStyle': 'none'
 'border-top-style': 'none'
-'borderTopWidth': 'medium'
-'border-top-width': 'medium'
-'borderWidth': 'medium'
-'border-width': 'medium'
+'borderTopWidth': '0px'
+'border-top-width': '0px'
+'borderWidth': '0px'
+'border-width': '0px'
 'bottom': 'auto'
 'boxShadow': 'none'
 'box-shadow': 'none'

Tests/LibWeb/Text/expected/css/calc-coverage.txt

@@ -18,20 +18,20 @@ border-bottom-left-radius: 'calc(2px)' -> 'calc(2px)'
 border-bottom-left-radius: 'calc(2px * var(--n))' -> 'calc(4px)'
 border-bottom-right-radius: 'calc(2%)' -> 'calc(2%)'
 border-bottom-right-radius: 'calc(2% * var(--n))' -> 'calc(2 * 2%)'
-border-bottom-width: 'calc(2px)' -> '2px'
-border-bottom-width: 'calc(2px * var(--n))' -> '4px'
-border-left-width: 'calc(2px)' -> '2px'
-border-left-width: 'calc(2px * var(--n))' -> '4px'
-border-right-width: 'calc(2px)' -> '2px'
-border-right-width: 'calc(2px * var(--n))' -> '4px'
+border-bottom-width: 'calc(2px)' -> '0px'
+border-bottom-width: 'calc(2px * var(--n))' -> '0px'
+border-left-width: 'calc(2px)' -> '0px'
+border-left-width: 'calc(2px * var(--n))' -> '0px'
+border-right-width: 'calc(2px)' -> '0px'
+border-right-width: 'calc(2px * var(--n))' -> '0px'
 border-spacing: 'calc(2px)' -> '2px'
 border-spacing: 'calc(2px * var(--n))' -> '4px'
 border-top-left-radius: 'calc(2px)' -> 'calc(2px)'
 border-top-left-radius: 'calc(2px * var(--n))' -> 'calc(4px)'
 border-top-right-radius: 'calc(2%)' -> 'calc(2%)'
 border-top-right-radius: 'calc(2% * var(--n))' -> 'calc(2 * 2%)'
-border-top-width: 'calc(2px)' -> '2px'
-border-top-width: 'calc(2px * var(--n))' -> '4px'
+border-top-width: 'calc(2px)' -> '0px'
+border-top-width: 'calc(2px * var(--n))' -> '0px'
 bottom: 'calc(2px)' -> '2px'
 bottom: 'calc(2px * var(--n))' -> '4px'
 clip-path: 'polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))' -> 'polygon(nonzero, calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -95,7 +95,7 @@ border-bottom-color: rgb(0, 0, 0)
 border-bottom-left-radius: 0px
 border-bottom-right-radius: 0px
 border-bottom-style: none
-border-bottom-width: medium
+border-bottom-width: 0px
 border-inline-end-color: rgb(0, 0, 0)
 border-inline-end-style: none
 border-inline-end-width: medium
@@ -104,15 +104,15 @@ border-inline-start-style: none
 border-inline-start-width: medium
 border-left-color: rgb(0, 0, 0)
 border-left-style: none
-border-left-width: medium
+border-left-width: 0px
 border-right-color: rgb(0, 0, 0)
 border-right-style: none
-border-right-width: medium
+border-right-width: 0px
 border-top-color: rgb(0, 0, 0)
 border-top-left-radius: 0px
 border-top-right-radius: 0px
 border-top-style: none
-border-top-width: medium
+border-top-width: 0px
 bottom: auto
 box-shadow: none
 box-sizing: content-box

Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/border-width-cssom.txt

@@ -0,0 +1,17 @@
+Harness status: OK
+
+Found 12 tests
+
+12 Pass
+Pass	border-top-width: thin is 1px
+Pass	border-right-width: thin is 1px
+Pass	border-bottom-width: thin is 1px
+Pass	border-left-width: thin is 1px
+Pass	border-top-width: medium is 3px
+Pass	border-right-width: medium is 3px
+Pass	border-bottom-width: medium is 3px
+Pass	border-left-width: medium is 3px
+Pass	border-top-width: thick is 5px
+Pass	border-right-width: thick is 5px
+Pass	border-bottom-width: thick is 5px
+Pass	border-left-width: thick is 5px

Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/parsing/border-width-computed.txt

@@ -0,0 +1,16 @@
+Harness status: OK
+
+Found 11 tests
+
+11 Pass
+Pass	Property border-width value '1px'
+Pass	Property border-width value '1px 2px'
+Pass	Property border-width value '1px 2px 3px'
+Pass	Property border-width value '1px 2px 3px 4px'
+Pass	Property border-width value '0.5em'
+Pass	Property border-width value '2px thin medium thick'
+Pass	Property border-top-width value '0px'
+Pass	Property border-right-width value '10px'
+Pass	Property border-bottom-width value 'calc(-0.5em + 10px)'
+Pass	Property border-left-width value 'calc(0.5em + 10px)'
+Pass	thin ≤ medium ≤ thick

Tests/LibWeb/Text/input/wpt-import/css/css-backgrounds/border-width-cssom.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Borders: CSSOM for border-*-width: thin, medium, thick</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">
+<meta name="assert" content="getComputedStyle() for 'border-*-width' with values thin, medium, thick, returns 1px, 3px, and 5px, respectively." />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+.thin { border: solid thin; }
+.medium { border: solid medium; }
+.thick { border: solid thick; }
+</style>
+</head>
+<body>
+  <div class=thin data-expected=1px></div>
+  <div class=medium data-expected=3px></div>
+  <div class=thick data-expected=5px></div>
+  <script>
+    let divs = document.querySelectorAll('div');
+    let props = ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'];
+    for (let div of divs) {
+      let style = getComputedStyle(div);
+      for (let prop of props) {
+        test(() => {
+          assert_equals(style.getPropertyValue(prop), div.dataset.expected);
+        }, `${prop}: ${div.className} is ${div.dataset.expected}`);
+      }
+    }
+  </script>
+</body>
+</html>

Tests/LibWeb/Text/input/wpt-import/css/css-backgrounds/parsing/border-width-computed.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders: getComputedStyle().borderWidth</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width">
+<meta name="assert" content="border-width computed value is the absolute length; zero if the border style is none or hidden.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/computed-testcommon.js"></script>
+<style>
+  #box {
+    border-style: dotted; /* Avoid border-*-width computed style 0 */
+    border-top-width: thin;
+    border-right-width: medium;
+    border-bottom-width: thick;
+  }
+  #target {
+    border-style: dotted; /* Avoid border-*-width computed style 0 */
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="box"></div>
+<div id="target"></div>
+<script>
+'use strict';
+const box = document.getElementById('box');
+const thinWidth = getComputedStyle(box).borderTopWidth;
+const mediumWidth = getComputedStyle(box).borderRightWidth;
+const thickWidth = getComputedStyle(box).borderBottomWidth;
+
+test_computed_value("border-width", "1px");
+test_computed_value("border-width", "1px 2px");
+test_computed_value("border-width", "1px 2px 3px");
+test_computed_value("border-width", "1px 2px 3px 4px");
+
+test_computed_value("border-width", "0.5em", "20px");
+test_computed_value("border-width", "2px thin medium thick", "2px " + thinWidth + " " + mediumWidth + " " + thickWidth);
+
+test_computed_value("border-top-width", "0px");
+test_computed_value("border-right-width", "10px");
+test_computed_value("border-bottom-width", "calc(-0.5em + 10px)", "0px");
+test_computed_value("border-left-width", "calc(0.5em + 10px)", "30px");
+
+test(() => {
+  const thin = Number(thinWidth.replace("px", ""));
+  const medium = Number(mediumWidth.replace("px", ""));
+  const thick = Number(thickWidth.replace("px", ""));
+  assert_less_than_equal(0, thin);
+  assert_less_than_equal(thin, medium);
+  assert_less_than_equal(medium, thick);
+}, "thin ≤ medium ≤ thick");
+</script>
+</body>
+</html>