various fixes for the height calculation (issue #941)

rbri · rbri · commit 85f20b1ff6a4 · 2025-03-10T20:42:40.000+01:00
diff --git a/src/main/java/org/htmlunit/css/ComputedCssStyleDeclaration.java b/src/main/java/org/htmlunit/css/ComputedCssStyleDeclaration.java
@@ -752,15 +752,20 @@ public String getHeight() {
         if (!elem.isAttachedToPage()) {
             return "";
         }
-        final int windowHeight = elem.getPage().getEnclosingWindow().getInnerHeight();
-        return CssPixelValueConverter
-                .pixelString(elem, new CssPixelValueConverter.CssValue(0, windowHeight) {
-                    @Override
-                    public String get(final ComputedCssStyleDeclaration style) {
-                        final String offsetHeight = style.getCalculatedHeight(true, true) + "px";
-                        return defaultIfEmpty(style.getStyleAttribute(Definition.HEIGHT, true), offsetHeight, AUTO);
-                    }
-                });
+
+        final ComputedCssStyleDeclaration style = elem.getPage().getEnclosingWindow().getComputedStyle(elem, null);
+        final String styleValue = style.getStyleAttribute(Definition.HEIGHT, true);
+
+        if (styleValue == null || styleValue.isEmpty() || AUTO.equals(styleValue) || styleValue.endsWith("%")) {
+            final String calculatedHeight = style.getCalculatedHeight(false, false) + "px";
+            return calculatedHeight;
+        }
+
+        if (styleValue.endsWith("px")) {
+            return styleValue;
+        }
+
+        return CssPixelValueConverter.pixelValue(styleValue) + "px";
     }
 
     /**
diff --git a/src/test/java/org/htmlunit/javascript/host/css/CSSStyleSheetTest.java b/src/test/java/org/htmlunit/javascript/host/css/CSSStyleSheetTest.java
@@ -2003,4 +2003,34 @@ public void brokenExternalCSS() throws Exception {
         getMockWebConnection().setResponse(URL_SECOND, "body { font-weight: 900\\9; }");
         loadPageVerifyTitle2(html);
     }
+
+    /**
+     * Test for #941.
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"true", "true"})
+    public void widthHeightPercent() throws Exception {
+        final String html = "<html>\n"
+            + "  <head>"
+            + "    <style>#testDiv { width: 50%; height: 50%; background-color: blue; }</style>\n"
+            + "  </head>"
+            + "  <body>\n"
+            + "    <div id='testDiv'>Test Div</div>\n"
+
+            + "<script>\n"
+            + LOG_TITLE_FUNCTION
+            + "  let elem = document.getElementById('testDiv');\n"
+            + "  let sty = window.getComputedStyle(elem, null);\n"
+            + "  let w = (window.innerWidth / 2) - parseInt(sty.width, 10);\n"
+            + "  log(10 > w);\n"
+            + "  let h = (window.innerHeight / 2) - parseInt(sty.height, 10);\n"
+            + "  log(10 > h);\n"
+            + "</script>\n"
+
+            + "  </body>\n"
+            + "</html>";
+
+        loadPageVerifyTitle2(html);
+    }
 }
diff --git a/src/test/java/org/htmlunit/javascript/host/css/ComputedCSSStyleDeclarationTest.java b/src/test/java/org/htmlunit/javascript/host/css/ComputedCSSStyleDeclarationTest.java
@@ -328,6 +328,7 @@ public void lengthsConvertedToPixels() throws Exception {
             + LOG_TITLE_FUNCTION
             + "var d = document.getElementById('d');\n"
             + "var cs = window.getComputedStyle(d, null);\n"
+
             + "log(d.style.width + ' ' + cs.width);\n"
             + "log(d.style.height + ' ' + cs.height);\n"
             + "log(d.style.borderBottomWidth + ' ' + cs.borderBottomWidth);\n"
@@ -2503,7 +2504,7 @@ public void offsetHeightTable() throws Exception {
      * @throws Exception if an error occurs
      */
     @Test
-    @Alerts({"false", "false"})
+    @Alerts({"18px", "18px"})
     public void height() throws Exception {
         final String html = "<html>\n"
             + "<head>\n"
@@ -2517,9 +2518,9 @@ public void height() throws Exception {
             + "  function test() {\n"
             + "    var div = document.getElementById('myDiv');\n"
             + "    var style = window.getComputedStyle(div, null);\n"
-            + "    log(style.height == '0px');\n"
+            + "    log(style.height);\n"
             + "    div.className = 'autoheight';\n"
-            + "    log(style.height == '0px');\n"
+            + "    log(style.height);\n"
             + "  }\n"
             + "</script></head>\n"
             + "<body onload='test()'>\n"
diff --git a/src/test/java/org/htmlunit/javascript/host/css/property/ElementOffsetHeightTest.java b/src/test/java/org/htmlunit/javascript/host/css/property/ElementOffsetHeightTest.java
@@ -175,11 +175,11 @@ public void offsetHeightManualLineBreaks() throws Exception {
      * @throws Exception if the test fails
      */
     @Test
-    @Alerts({"549", "273"})
-    @HtmlUnitNYI(CHROME = {"552", "294"},
-            EDGE = {"552", "294"},
-            FF = {"552", "294"},
-            FF_ESR = {"552", "294"})
+    @Alerts({"300", "549", "945", "60", "273", "938", "35"})
+    @HtmlUnitNYI(CHROME = {"300", "552", "9690", "60", "294", "6885", "43"},
+            EDGE = {"300", "552", "9690", "60", "294", "6885", "43"},
+            FF = {"300", "552", "9690", "60", "294", "6885", "43"},
+            FF_ESR = {"300", "552", "9690", "60", "294", "6885", "43"})
     public void issue124() throws Exception {
         final String html
             = "<!DOCTYPE html>\n"
@@ -215,10 +215,14 @@ public void issue124() throws Exception {
             + "    var titleSizer = document.querySelector('.title-sizer');\n"
             + "    var title = document.querySelector('.title');\n"
             + "    var titleHeight = titleSizer.offsetHeight;\n"
-            + "    var titleFontSize = getAttributeValue(titleSizer, 'fontSize');\n"
             + "    var titleHeightGoal = getAttributeValue(titleSizer, 'height');\n"
+            + "    var titleFontSize = getAttributeValue(titleSizer, 'fontSize');\n"
 
-            + "    log(titleHeight);\r\n"
+            + "    log(titleHeightGoal);\n"
+
+            + "    log(titleHeight);\n"
+            + "    log(titleSizer.offsetWidth);\n"
+            + "    log(titleFontSize);\n"
 
             + "    while (titleHeight > titleHeightGoal) {\n"
             + "      titleFontSize -= 1;\n"
@@ -227,6 +231,8 @@ public void issue124() throws Exception {
             + "    }\n"
 
             + "    log(titleHeight);\n"
+            + "    log(titleSizer.offsetWidth);\n"
+            + "    log(titleFontSize);\n"
             + "  </script>\n"
             + "</html>";
 
